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

都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)的工作经验可以轻松开发一个功能完善的插件!

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

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

一个次要文件:

  1. 弹出窗口.html (这个文件可以引入更多 js)

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

manifest.json

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

它描述了:

  1. 应用名
  2. 开发者名(还可以包含联系方式)
  3. 图标位置(图标是png格式而非ico格式)
  4. 交互.js路径
  5. 后台.js路径
  6. 所需权限(比如获取cookies就需要在文件中声明)
  7. 生效范围(可以让插件在特定网页生效)
  8. 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 ", //日后惹出祸来,别把师傅说出来就行了
  "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",//请求相关的权限
    "", //生效范围,这个意思是全部
    "tabs", // tab页相关的权限
  ]
}

稍微的解释:

  1. 该文件提到的文件都是相对路径 如 logo1.png 等同于 ./logo1.png、background.js等同于./background.js
  2. 参见 chrome扩展:manifest.json文件详解
  3. 如果你没有logo.png也可以不加
  4. 除了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浏览器),打开开发人员模式,加载解压缩的扩展,选择你的插件目录,点击选择文件夹,导入成功。

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

参考教程:

  1. Chrome插件开发简要指南_w3cschool
  2. 从零深入Chrome插件开发 - 掘金
  3. Chrome 扩展(插件)开发官方入门教程 - 知乎

文章来源于互联网:一文学会浏览器插件(加入光荣的进化吧)(一文晋级璀璨钻石)(本文不含知识诅咒)

THE END
分享
二维码