如何自己开发chrome插件

一、项目结构

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

image.png

（一）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项进行配置即可。

image.png

<!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 }); });