您现在的位置是：首页 > 网络工具 > 正文

网络工具

chrome浏览器插件编写的一个例子

1987web2023-10-21网络工具51

今天跟大家介绍一下chrome浏览器插件开发的一个例子，希望可以通过这个例子能让大家了解chrome浏览器插件编写的大致步骤。

先看下面这个html页面：

现在介绍的插件功能是：在插件未点击时，点击页面上点击按钮提示请先点击启动插件，当插件点击后，再点击页面上的点击按钮弹出欢迎弹框，下面简单介绍一下编写流程：

1.新建index.html，代码为:

content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">test

2.新建插件配置文件manifest.json,这个配置文件是必须创建的：

{"manifest_version":3,"name":"欢迎插件","version":"1.0.0","description":"点击弹出欢迎弹框","action": {"default_icon": {"16":"icon.png","24":"icon.png","32":"icon.png","48":"icon.png"}},"permissions": ["activeTab","scripting","tabs"],"host_permissions": ["*://*/*"],"background": {"service_worker":"index.js"}}

上述代码中对插件的名称、描述、使用的api版本以及使用的插件功能等都进行了配置，其中"service_worker": "index.js"表示该js在插件添加到浏览器中时即执行。

3.新建index.js插件执行js：

index.js中不能直接访问document，如果需要访问window或document可以在index.js中通过chrome.scripting.executeScript来执行额外的js，本次插件index.js主要实现点击插件后执行content-script.js，然后发送初始化消息：

asyncfunctionsendMsg(obj){awaitchrome.scripting.executeScript({target: {tabId: obj.tabId},files: [content-script.js],});chrome.tabs.sendMessage(obj.tabId, obj)}chrome.action.onClicked.addListener((tab) =>{sendMsg({code:initable,tabId: tab.id})});

上述代码中chrome.tabs.sendMessage(obj.tabId, obj)表示发送obj消息。

chrome.scripting.executeScript来执行content-script.js前提是需要在manifest.json中的permissions中设置了scripting，要不然是使用不了的，我们在使用某个插件能力的时候比如使用storage存储和executeScript执行脚本时，都需要在permissions中提前进行设置。

4.content-script.js在index.js中用户点击插件时会被执行，在content-script.js中可以访问到document，即可以通过document来给页面上的点击按钮添加click事件:

chrome.runtime.onMessage.addListener(msgHandler);function msgHandler(request, sender, sendResponse) {switch (request.code) {case "initable":initable(request, sender, sendResponse)break}}let timer = nullfunction addDom(text) {if (timer) {clearTimeout(timer)timer = null}let dom = document.getElementById(welcome-me)if (!dom) {dom = document.createElement("div");dom.setAttribute("id", "welcome-me");dom.style.cssText = `position: fixed;top: 20px;left: 50%;transform: translateX(-50%);width: 200px;height: auto;padding: 3px 2px;background: 333;color: fff;border-radius: 4px;text-align: center;z-index: 9999;`document.body.appendChild(dom);}dom.style.display = blockdom.innerText = texttimer = setTimeout(() => {timer = nulldom.style.display = none}, 5000)}async function initable(request, sender, sendResponse) {const dom = document.getElementById(click-me)if (dom) {dom.setAttribute(data-welload, 1)dom.onclick = function () {addDom(欢迎你啊，谢谢点击)}}}

上述代码中chrome.runtime.onMessage.addListener(msgHandler)表示监听消息，即可以监听到index.js通过chrome.tabs.sendMessage(obj.tabId, obj)发来的消息，监听到初始化消息后通过document.getElementById(click-me)找到按钮，然后给按钮添加click点击事件，这样当用户点击按钮时就会弹出欢迎弹框。

初始化时会在document.getElementById(click-me)中设置data-welload属性为1，可以通过这个属性来判断插件是否已点击。

5.将插件加载到chrome中

点击chrome的管理扩展程序，然后点击加载已解压的扩展程序按钮将插件添加到chrome中，然后重启浏览器即可使用插件：