一文学会浏览器插件（加入光荣的进化吧）（一文晋级璀璨钻石）（本文不含知识诅咒）

都2023年了，你还不会开发浏览器插件？

注意：此教程针对chrome和chromium内核的浏览器制定的，且仅适用于前端开发者

在chrome地址栏输入chrome://extensions/，就进入了谷歌浏览器扩展程序控制面板，在这里可以装载一些插件，来扩展浏览器的功能，或者做一些自动化处理，由于众所周知的原因，国内是无法直接访问谷歌应用商店的，所以当你想用一个插件时，不得已要去国内的某些第三方网站查找，但是这些网站的插件要么不全，要么严重过时了，他们甚至还恬不知耻的让你关注公众号才能下载。

当你看到这篇文章的时候，一切都结束了，我们前端人不受他这个气。

打开edge浏览器，输入edge://extensions/，进入edge应用商店！

一文学会浏览器插件（加入光荣的进化吧）（一文晋级璀璨钻石）（本文不含知识诅咒）

新版edge用的内核叫做chromium，它就是chrome的开源版，chromium的功能往往比chrome更加先进，且99%的兼容了chrome，也就是说，你可以把edge当成次世代的chrome浏览器！edge还支持微软账户登录、使用同步功能、网页一键翻译（必应翻译）！

特大好消息：使用edge可以获取微软积分！积分可以换英雄联盟点券、京东购物券、星巴克和沃尔玛的消费券！

你问我什么时候讲怎么开发插件？

我也不会，我只能告诉你一些简单的东西，相信聪明的你很快就能开发出一个属于自己的浏览器插件！

我为什么要开发浏览器插件？

比如你找到了一个非常棒的网站（不卡、没广告、还有你喜欢的各种口味），这指定不能让你女朋友知道！但是怎么才能不让你女朋友知道呢？删除历史记录是远远不够的！

如果你女朋友（一脸严肃的）不小心打开了你的神秘网站，却发现这只是一个普通的学习网站，除了你不用写一千字的检讨外，你女朋友说不定还会因为怀疑你是个 LSP（全称分层服务提供程序）而内疚。

快速完活！~

接下来的内容是描述内容，如果你想快速开始，请直接跳到下一小节，再回头来看。

浏览器插件大部分且主流的开发方式，就是 html、css、 js。不用怀疑，凭你的大专学历以及两年半（ji）的工作经验可以轻松开发一个功能完善的插件！

浏览器插件包括四个主要文件

与正常页面交互的js
插件后台运行的js
图标.png
manifest.json

一个次要文件：

弹出窗口.html （这个文件可以引入更多 js）

上述文件中，每个文件都不是必须的，必须的文件只有一个，就是 manifest.json

manifest.json

这个文件简单来说，就像 npm 标准项目中的 package.json

它描述了：

应用名
开发者名（还可以包含联系方式）
图标位置（图标是png格式而非ico格式）
交互.js路径
后台.js路径
所需权限（比如获取cookies就需要在文件中声明）
生效范围（可以让插件在特定网页生效）
manifest_version 这是一个必填项，目前主流为版本为2，但是在2023年将被废弃，推荐使用 3（直接写数字即可）

关于此文件详解参见 chrome扩展：manifest.json文件详解

与正常页面交互的 js和插件后台运行的 js

这两个文件的运行环境是不互通的，交互js无法使用很多浏览器接口，后台却可以，如果想前后之间传递数据，要用消息发送机制

下面是一个简单的实例：

//myscript.js （这是前面提到的交互js，可以和正常页面进行交互）
  chrome.runtime.sendMessage({ url: url }, async (response) => {
     console.log("cookie=", response);
  });

//background.js （这是后台js，也就是插件的独立环境运行的js）
chrome.runtime.onMessage.addListener(
  (request, sender, sendResponse) => {
    //console.log(request);//这个输出是看不到的，没有用！
    let cookie
    chrome.cookies.getAll({
      url: request.url
    }, (cks) => {
      sendResponse(cks);
    });
    return true;
  });

相信上面的代码很好懂，我们在background调用了chrome.runtime.onMessage.addListener，添加了一个消息监听器，当myscript的消息发送（chrome.runtime.sendMessage）时，就触发了background的监听器，并执行其中的代码，当执行完成后，background.js可以通过sendResponse（即myscript中标有async的函数，它充当一个回调）把消息返回回去。

此时myscript将会打印出当前页的所有cookies，它可能是一个数组。

快快快快速完活！~

如果你不想看上面的长篇大论，还可以直接跟着本小节直接开始写代码！

快速搭建一个插件

必须要一个文件：

manifest.json

可选文件：

myscript.js （前台交互脚本，这个文件的输出可以打印到控制台）
background.js （后台服务脚本，这个文件的运行是被隔离的，可以理解为静默运行）
logo.png （图标）
popup.html (点击插件图标时的弹窗)

下面是一个简单的manifest.json文件实例：

{
  "manifest_version": 2, //推荐使用 3 ，因为 2 即将在 2023年停止支持
  "name": "cookie获取工具",
  "version": "1.0.1",
  "description": "这是一个cookie获取工具",
  "author": "Larry Zhu <LarryZhu@foxmail.com>", //日后惹出祸来，别把师傅说出来就行了
  "icons": {
    "16": "logo1.png",
    "128": "logo1.png"
  },
  "background": {
    "persistent": true,  //是否常驻后台
    "scripts": [
      "background.js"
    ]
  },
  "content_scripts": [ //这是前台js配置
    {
      "matches": [
        "https://mp.weixin.qq.com/cgi-bin/home?*" //生效范围，这个地址是微信公众平台
      ],
      "js": [
        "myscript.js"
      ],
      "run_at": "document_end" //当dom加载完时,或者使用_start什么的，自己搜吧我忘了
    }
  ],
  "permissions": [ //权限列表，如果你使用过wxjssdk，你就很熟悉了，跟那个一个意思
    "cookies", //获取cookie
    "webRequest",//请求相关的权限
    "<all_urls>", //生效范围，这个意思是全部
    "tabs", // tab页相关的权限
  ]
}

稍微的解释：

该文件提到的文件都是相对路径如 logo1.png 等同于 ./logo1.png、background.js等同于./background.js
参见 chrome扩展：manifest.json文件详解
如果你没有logo.png也可以不加
除了manifest_version、name、version外，你可以省略其他任何参数，也就是说，你可以创建一个完全没有任何功能的空插件，甚至这仨也能省略，我没试过，你可以试一下

下面是一个前台js的简单实例：

//myscript.js
window.addEventListener("load", myMain, false);

function getCookies(url) {
  chrome.runtime.sendMessage({ url: url }, async (response) => {
    console.log("cookie=", response);
  });
}

function myMain(evt) {
  console.log("AutoLarry is Loaded");
  getCookies(document.URL)
}

简单解释：chrome.xxx是调用浏览器提供的接口，包含默认的、已经刚刚在manifest中声明过的方法，注意：一些方法在前台js是没有的，比如 chrome.cookies.getAll

在这里，使用了chrome.runtime.sendMessage 向后台js 发送了一条消息

下面是后台js的一个简单实例：

//background.js
chrome.runtime.onMessage.addListener(
  (request, sender, sendResponse) => {
    console.log(request);
    let cookie
    chrome.cookies.getAll({
      url: request.url
    }, (cks) => {
      sendResponse(cks);
    });
    return true;
  });

可以看到，后台js添加了一个消息监听器（有点类似与mqtt的消息机制），当前台调用chrome.runtime.sendMessage时，

chrome.runtime.onMessage.addListener中的函数就会触发，当函数中的代码执行完成后，还可以通过前台传来的回调函数(myscript.js中async（异步）前缀的那个就是传入的回调)把数据什么的返回给前台 sendResponse(cks)

此时 myscript.js中的 console.log("cookie=", response) 就会输出对应的值，对于我们这个程序来说，将会输出一个数组，数组内容是当前页的cookies。

导入

要导入自己开发的插件，在地址栏输入edge://extensions/（edge浏览器），打开开发人员模式，加载解压缩的扩展，选择你的插件目录，点击选择文件夹，导入成功。

听说点赞的人都找到了满意的工作（在评论区打出你的愿望，本文会帮你实现）

参考教程：

秒客网

一文学会浏览器插件（加入光荣的进化吧）（一文晋级璀璨钻石）（本文不含知识诅咒）

都2023年了，你还不会开发浏览器插件？

你问我什么时候讲怎么开发插件？

我为什么要开发浏览器插件？

快速完活！~

manifest.json

与正常页面交互的 js和插件后台运行的 js

快快快快速完活！~

导入

相关文章