分分钟你也能写一个自己需要的 Chrome 扩展程序

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

废话

对于chrome浏览器想必大家大不陌生了里面的扩展程序本文后面称插件多多少少也都用过吧毕竟可以辅助自己的日常工作娱乐等等添加完之后呢就会多出一些操作按钮或者右键之类的还能打包成crx多个设备同步等看似很神奇其实就是一个html文件下面让你分分钟也能自己写一个自己想用的插件.

开始

早上无意中看到这样的数字时钟屏保
请添加图片描述

感觉还挺好看的但是总不能关着电脑看吧于是想着放到Chrome新窗口里这样不就好了分分钟的事

新建clock文件夹,里面四个子文件

在这里插入图片描述

manifest.json文件和各种小程序开发一样一个核心配置也是chrome 插件的心脏

{
  "name": "clock",
  "description": "clock",
  "version": "1.0",
  "manifest_version": 3,
  "chrome_url_overrides": {
    "newtab": "clock.html"
  },
  "offline_enabled": true
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>clock</title>
  <link rel="stylesheet" href="./clock.css">
</head>
<body>
  <div class="container">
    <div class="search">
      <img src="https://lf-cdn-tos.bytescm.com/obj/static/xitu_extension/static/baidu.9627e61f.png" alt="baidu" class="baidu_logo">
      <input id="baidu" type="text" placeholder="输入关键词搜索">
    </div>
    <div class="time_box">
      <div style="overflow: hidden;padding:35px 10px 25px 62px">
        <div class="week item">星 期 一</div>
        <div class="date item">2023 年 01 月 01 日</div>
      </div>
      <div class="clock">
        <div class="hour">00</div>
        <span>:</span>
        <div class="minute">00</div>
        <span>:</span>
        <div class="second">00</div>
      </div>
      <div class="offTime">下班倒计时: 00:00:00</div>
    </div>
    <div class="footer">Lenovo Yoga</div>
  </div>
  <script src="./clock.js"></script>
</body>
</html>

let baiduDom = document.getElementById('baidu'),
  weekDom = document.getElementsByClassName('week')[0],
  dateDom = document.getElementsByClassName('date')[0],
  hourDom = document.getElementsByClassName('hour')[0],
  minuteDom = document.getElementsByClassName('minute')[0],
  secondDom = document.getElementsByClassName('second')[0],
  offTimeDom = document.getElementsByClassName('offTime')[0],
  weekArr = ['星 期 日', '星 期 一', '星 期 二', '星 期 三', '星 期 四', '星 期 五', '星 期 六'],
  goHomeTime = '18:30:00';
// 搜索回车事件
baiduDom.onkeydown = function (event) {
  if(event.keyCode==13){
    window.open(`https://www.baidu.com/s?wd=${event.target.value}`)
  }
}
// 时间补零
function addZero(num){
  if(num>=10){
    return num
  }else{
    return '0' + num
  }
}
// 更新text
function setText(dom,text){
  dom.innerText = text
}
// 时间戳转时间
function time(time = +new Date()) {
    var date = new Date(time); // 增加8小时
    return date.toJSON().substr(11, 8).replace('T', ' ');
}
// 更新时间
function updateTime(){
  let date = new Date(),
    YY = date.getFullYear(),
    MM = addZero(date.getMonth() + 1),
    DD = addZero(date.getDate()),
    WW = weekArr[date.getDay()],
    hh = addZero(date.getHours()),
    mm = addZero(date.getMinutes()),
    ss = addZero(date.getSeconds()),
    // 当前时间
    currentTime = +new Date,
    // 下班时间
    offTime = +new Date(`${YY}-${MM}-${DD} ${goHomeTime}`);
    setText(weekDom,WW)
    setText(dateDom,`${YY} 年 ${MM} 月 ${DD} 日`)
    setText(hourDom,hh)
    setText(minuteDom,mm)
    setText(secondDom, ss)
    if (currentTime > offTime) {
      setText(offTimeDom,'到点了, 赶紧下班啦')
    } else {
      setText(offTimeDom,'距离下班' + time(offTime-currentTime))
    }
}
// 设置定时器
let timer = null
timer = setInterval(() => {
  updateTime()
}, 1000);
// 监听窗口进入与隐藏
document.addEventListener("visibilitychange", function() {
  if (document.visibilityState == "hidden") {
    //切离该页面时执行
    clearInterval(timer)
  } else if (document.visibilityState == "visible") {
    //切换到该页面时执行
    timer = setInterval(() => {
      updateTime()
    }, 1000);
  }
});

css

body {
  margin: 0;
}
.container {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to bottom, #27293d, #0d0d16);
  padding-top: 5%;
  box-sizing: border-box;
}
.search {
  width: 400px;
  height: 38px;
  margin: 0 auto;
  position: relative;
}
.search .baidu_logo {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 4px;
  left: 5px;
}
.search input {
  padding: 0 10px 0 40px;
  margin: 0;
  border: 0;
  outline: 0px;
  width: 100%;
  height: 100%;
  border-radius: 3px;
}
.time_box {
  position: relative;
  margin: 20px auto 0;
  width: 800px;
}
.time_box .item {
  color: rgba(255, 255, 255, .7);
  font-size: 20px;
}
.time_box .week {
  float: left;
}
.time_box .date {
  float: right;
}
.time_box .clock {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 150px;
  color: rgba(255, 255, 255, .8);
}

.time_box .clock div {
  background: #363648;
  height: 200px;
  width: 200px;
  text-align: center;
  border-radius: 10px;
  position: relative;
}
.time_box .clock span {
  margin-top: -20px;
}
.offTime{
  color: rgba(255, 255, 255, .8);
  width: 100%;
  text-align: center;
  font-size: 30px;
  margin-top:50px
}
.footer {
  font-size: 50px;
  width: 100%;
  text-align: center;
  position: absolute;
  color: rgba(255, 255, 255, .8);
  bottom: 8%;
}

就很简单的一个html, 没啥介绍的, 看下就懂了