前言

先贴一下edge浏览器扩展插件地址：摸鱼办-edge浏览器插件

首先说一下为什么不是 Chrome 插件，因为发布它是需要收费的！！！所以选择使用edge发布插件。

我相信作为一个开发者你肯定使用过浏览器插件，因为它可以扩展浏览器的功能，可以让我们更方便、更有效率的摸鱼，啊呸！是高效工作！

常见的浏览器插件如：json格式化、广告终结者、划词翻译等等；安装了这些插件用起来是非常方便的，但是你有没有想过它是如何实现的呢？

其实很简单，浏览器插件通常是使用 JavaScript、HTML和CSS开发的，最终打包成一个 .crx 后缀的压缩包。这对于我们前端而言简直没有学习成本可言，前端三件套可是最最基本的技能了。

既然开发成本几乎为0，已经迫不及待的想自己尝试一下了。但是开发一个啥插件好呢？

仔细想了想，我每天其实看电脑最多的就是浏览器和编辑器了，那我可以实现一个浏览器插件以面板的形式每天提醒我下班时间。这样是不是比自己到下班点去看时间更醒目一些呢？虽然之前已经实现了云函数定时任务微信推送下班提醒消息：从github定时任务到云函数的实践 - 掘金 (juejin.cn)

但这是第一次实现浏览器插件，可以先开发一个简单的小插件练练手；于是纠结了很久后最终决定就叫它：摸鱼办

需求拆分

有了目标后就好办了，想了想需求罗列一下，然后就可以动手用代码去实现了，先列了下面几个功能点：

每天下班时间倒计时
周五放假时间倒计时
上班不同格言的展示
右键快捷导航

由于我个人这几个需求都是很简单的，很好实现，所以就不一一贴代码了，下面主要记录一下插件工程的结构、主要字段、调试、错误、发布等问题

扩展插件源码结构

manifest.json

这个json文件可以理解为这个工程的配置文件，它是必须存在的！

js 复制代码

{
  "name": "xxx",  // 插件名称
  "description": "Build an Extension!", // 插件描述
  "version": "0.3", // 版本
  "manifest_version": 3, // 指定插件版本，这个很重要，指定什么版本就用什么样的api，不能用错了
  "background": {
    "service_worker": "background.js" // 指定background脚本的路径
  },
  "action": {
    "default_popup": "popup.html", // 指定popup的路径
    "default_icon": {  // 指定popup的图标，不同尺寸
      "16": "/images/get_started16.png",
      "32": "/images/get_started32.png",
      "48": "/images/get_started48.png",
      "128": "/images/get_started128.png"
    }
  },
  "icons": { // 指定插件的图标，不同尺寸
    "16": "/images/get_started16.png",
    "32": "/images/get_started32.png",
    "48": "/images/get_started48.png",
    "128": "/images/get_started128.png"
  },
  "permissions": [],// 指定应该在脚本中注入那些变量方法
  "content_scripts": [ // 指定content脚本配置
    {
      "js": [ "content.js"], // content脚本路径
      "css":[ "content.css" ],// content的css
      "matches": ["<all_urls>"] // 对匹配到的tab起作用。all_urls就是全部都起作用
    }
  ]
}

下面是几个重要的字段：

background

在插件刚安装的时候，也会执行一个脚本叫做 background 脚本，这个脚本也是一个独立的环境，之后没有特殊情况下不会重新执行，是整个插件当中执行频率最低的一个脚本。在chromeV2以及之前的版本中background有自己的视图页面，但是在v3版本中，废弃了这一设计，只有一个脚本来代替，跑在插件的后台。