chrome浏览器插件extension开发中content内容脚本和background脚本通讯

有时候我们想监听页面中的数据变化,然后将监听到的数据传递给background脚本处理,比如根据不同的数据,来处理不同的业务逻辑,存储到服务器?或者控制浏览器显示效果?都可以,问题的重点是怎么让content脚本和background脚本通讯?

1.第一种方式

可能大家都想到了用sendMessage这个api,附上官方文档:https://developer.chrome.com/docs/extensions/reference/api/runtime?hl=zh-cn

2.第二种方式

使用storage存储,然后另一方监听storage变化, 附上官方文档:https://developer.chrome.com/docs/extensions/reference/api/storage?hl=zh-cn#type-StorageChange

3.第三种方式

也可以使用cookie,一方通过修改指定domain的cookie,然后另一方监听cookie变化,就可以拿到变化后的数据,这样就可以间接的传输数据。可以看我的另一片文章https://xiaoshen.blog.csdn.net/article/details/129026868

### 如何开发 Chrome 浏览器插件实现代理功能 #### 插件结构概述 创建一个能够配置并切换代理服务器的 Chrome 插件涉及多个文件组件。通常情况下,这类项目会包含 `manifest.json` 文件来定义元数据以及权限声明;背景脚本用于处理后台逻辑操作;内容脚本负责网页交互;而用户界面部分则由 HTML/CSS/JavaScript 构建而成。 #### 创建 manifest.json 配置文件 这是每一个 Chrome 扩展都必需的一个 JSON 格式的描述文件,在这里可以指定扩展的名字、版本号以及其他必要的参数。对于想要控制网络请求路径的应用来说,还需要申请特定 API 权限以便于修改系统的代理设置[^3]。 ```json { "name": "Custom Proxy Switcher", "version": "1.0", "description": "A simple proxy switcher extension.", "permissions": [ "proxy", "storage" ], "background": { "service_worker": "background.js" }, "options_page": "options.html", "manifest_version": 3 } ``` #### 编写 background.js 背景脚本脚本运行在一个独立进程中,即使当前没有打开任何标签页也会持续工作。它主要用来监听来自其他页面的消息,并调用相应的 Chrome APIs 进行实际的任务执行,比如更改代理规则等。 ```javascript // 设置默认代理模式为空闲状态 chrome.runtime.onInstalled.addListener(() => { chrome.proxy.settings.clear({}, () => console.log('Default settings cleared.')); }); function setProxyMode(mode, server) { let config = {}; if (mode === 'direct') { config.mode = mode; } else if (mode === 'fixed_servers') { config.mode = mode; config.rules = { singleProxy: { scheme: "http", host: server.host, port: parseInt(server.port), } }; } chrome.proxy.settings.set( { value: config, scope: 'regular' }, () => console.log(`Set to ${JSON.stringify(config)}`) ); } // 监听来自选项页面的信息传递事件 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { const { action, data } = request; if(action === 'set_proxy'){ setProxyMode(data.mode, data.server); } }); ``` #### 设计 options.html 用户界面 为了让使用者更便捷地管理自己的代理设定,应该提供一个图形化的配置面板供其输入相关信息。这个页面可以通过表单的方式收集用户的偏好并将这些信息发送给后台处理器去更新全局性的代理策略。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Options</title> <style> body{font-family:sans-serif;} input[type=text], input[type=number]{margin-bottom:.5em;width:90%;} button{display:block;margin-top:1em;padding:.75em;background:#0d6efd;color:white;border:none;border-radius:.25rem;cursor:pointer;} button:hover{opacity:.9;} </style> </head> <body> <h2>Configure Your Custom Proxy:</h2> <label for="host">Host Address:</label><br/> <input type="text" id="host"/><br/> <label for="port">Port Number:</label><br/> <input type="number" min="1" max="65535" id="port"/><br/> <button onclick="saveConfig()">Save Configuration</button> <script src="options.js"></script> </body> </html> ``` #### 处理前端逻辑 options.js 最后一步就是编写 JavaScript 代码片段以响应上述界面上发生的各种动作。当点击保存按钮时,应当读取填写好的字段值并通过消息通道告知后台服务端做出相应调整。 ```javascript async function saveConfig() { try { const hostElement = document.getElementById('host'); const portElement = document.getElementById('port'); await chrome.runtime.sendMessage({ action: 'set_proxy', data: { mode: 'fixed_servers', // or 'direct' server: { host: hostElement.value.trim(), port: portElement.valueAsNumber || '' } } }); alert('Configuration has been updated successfully!'); } catch(error){ console.error('Failed to update configuration:', error.message); } } ``` 通过以上步骤就可以构建出一款基本可用的 Chrome 插件来动态改变浏览器所使用的代理服务器了。当然这只是一个非常基础的例子,真实世界中的应用程序可能会更加复杂一些,涉及到更多细节上的优化完善。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

1024小神

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值