快速制作一个 chrome 插件

2023-02-20
广东
本文字数：2188 字
阅读完需：约 7 分钟

说在前面

在我日常开发以及娱乐生活中，浏览器是我使用频率较高的一个应用，当我大学拥有第一部电脑开始，之后不论电脑换成什么，以及使用的是什么系统，我的首选浏览器都是 Chrome，不仅仅是因为其速度快，更多是它丰富的扩展在吸引我，那么大家有没有想过如何自己来开发一个 Chrome 浏览器插件呢？是不是有的同学会觉得 Chrome 浏览器插件的制作难度会很大呢？今天就让我来带你们看看一个简单的 Chrome 浏览器插件的编写过程，并给大家制作一个简单的插件模板，大家可以通过模板来进行快速开发。

一、项目结构

一个完整的插件目录结构如下：

（一）html + js

1、manifest.json

简单配置，具体配置说明已在配置项后标出。

{  "manifest_version": 2, //版本号，由google指定为2  "name": "helloWorld", //插件名称  "version": "1.0", //插件版本  "description": "hello world 插件", //插件描述  "icons": {    //插件图标    "128": "img/logo.jpg",    "48": "img/logo.jpg",    "16": "img/logo.jpg"  },  "browser_action": {    "default_icon": "img/logo.jpg", //插件图标    "default_popup": "default_popup" //点击图标后弹出的html互动文件  },  "content_scripts": [    {      "matches": ["<all_urls>"], //匹配url      "js": ["bg.js"], //执行脚本      "run_at": "document_start" //脚本运行时机    }  ],  "permissions": ["tabs", "activeTab"] //权限申请}

复制代码

使用"content_scripts"你可以修改你当前访问的页面的 dom，主要是靠 js 实现的，里面的"matches"是一个数组，里面装的是一些匹配的规则，意思就是当你的页面的地址满足数组里面的值的时候就会操作 js 文件，all_urls 表示所有网页都会加载脚本。而"js"里面的是具体的操作，具体操作就是要自己写了。

2、popup.html

插件弹窗页，可以直接编写一个 html 页面，在 manifest.json 中的 default_popup 项进行配置即可。

<!DOCTYPE html><html lang="">  <head>    <title>helloWorld</title>    <meta charset="utf-8" />  </head>  <body style="width: 200px; height: 200px">    <h1 id="message">你好</h1>    <input id="input1" type="text" />  </body>  <script src="js/popup.js"></script></html>

复制代码

3、popup.js

插件弹窗页的脚本 js 代码，在 popup.html 页面中引入即可。

(function () {  const input1 = document.getElementById("input1");  const message = document.getElementById("message");  input1.addEventListener("keyup", (e) => {    message.innerHTML = "你好" + e.target.value;    chrome.tabs.query({ active: true, currentWindow: true }, function (tab) {      chrome.tabs.sendMessage(        tab[0].id,        {          action: "hello",          data: message.innerHTML,        },        function (response) {          console.loig("收到回复：", response.state);        }      );    });  });})();

复制代码

4、bg.js

运行在浏览器打开 tab 窗体的脚本，需要在 manifest.json 中的 content_scripts 中进行配置。

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {  const { action, data } = request;  console.log("%c Line:4 🥔 action,data", "color:#b03734", action, data);  sendResponse({ state: "已接收到数据" + data });});

复制代码

（二）vue + js

1、使用 vue 来编写插件弹窗页

使用 vue 来编写插件弹窗页面，我们可以将项目结构简化成这样，只需要修改 manifest.json 中的 default_popup 为 vue 项目打出的 dist 包即可。

{  "manifest_version": 2, //版本号，由google指定为2  "name": "helloWorld", //插件名称  "version": "1.0", //插件版本  "description": "hello world 插件", //插件描述  "icons": {    //插件图标    "128": "img/logo.jpg",    "48": "img/logo.jpg",    "16": "img/logo.jpg"  },  "browser_action": {    "default_icon": "img/logo.jpg", //插件图标    "default_popup": "demo/dist/index.html" //点击图标后弹出的html互动文件  },  "content_scripts": [    {      "matches": ["<all_urls>"], //匹配url      "js": ["bg.js"], //执行脚本      "run_at": "document_start" //脚本运行时机    }  ],  "permissions": ["tabs", "activeTab"] //权限申请}