Manifest V3 下 content script 必须声明在 manifest.json 的 content_scripts 字段,run_at 默认 document_idle,匹配需完整协议域名;popup 与 service worker 通过 chrome.runtime.sendMessage 通信;content script 无法直接访问页面变量,需 DOM 注入 script 或 executeScript;本地调试应加载已解压扩展并手动刷新 extensions 页面。

Manifest V3 下 content script 如何正确注入到页面
Chrome 从 Manifest V3 开始强制要求 content script 必须通过 content_scripts 字段声明,不再支持动态注入(如 executeScript 注入含 document.write 或 eval 的代码)。若你发现脚本没执行、document.body 为 null 或 DOM 操作失效,大概率是注入时机或匹配规则问题。
-
run_at设为"document_idle"(默认)时,脚本在 DOM 构建完成但可能尚未触发DOMContentLoaded,适合大多数操作;需访问完整 DOM 或监听事件时,改用"document_end" -
matches必须写完整协议+域名,比如"https://example.com/*"不会匹配"http://example.com";通配符不支持子路径模糊匹配("*://*.github.com/*/pull/*"合法,"*://*.github.com/**/pull/**"非法) - 若页面使用前端路由(如 React Router),首次加载后 URL 变化不会触发新注入——content script 只在页面初始加载时运行一次
popup 页面如何与 background script 安全通信
Manifest V3 禁用了长期运行的 background page,改用 service_worker,它无 DOM、不可直接调用 alert 或操作 localStorage(需用 chrome.storage.local)。popup 和 service worker 之间不能共享变量,必须走消息机制。
- popup 发送消息用
chrome.runtime.sendMessage(),service worker 接收用chrome.runtime.onMessage.addListener();注意回调函数必须返回true才能支持异步响应(否则 Promise resolve 后消息通道立即关闭) - 避免在 popup 中直接调用
chrome.tabs.query()后立刻sendMessage到当前标签页——该标签页的 content script 可能尚未加载完成,应先用chrome.tabs.sendMessage()并捕获PromiseRejection(错误信息为"Could not establish connection. Receiving end does not exist.") - service worker 被系统休眠后唤醒时,所有内存状态丢失,不要依赖全局变量缓存数据
如何让 content script 访问页面 JS 定义的变量或函数
content script 运行在独立的“隔离世界”(isolated world),与页面脚本不共享 JS 执行环境。直接读取 window.myVar 或调用 window.myFunc() 会得到 undefined。
- 最可靠方式是通过 DOM 注入一个
标签,把要执行的逻辑写成字符串(注意转义引号和换行),并确保其type="text/javascript";执行后可通过自定义事件或修改 DOM 属性把结果传回 content script - 也可用
chrome.scripting.executeScript()(Manifest V3 新 API),但需在manifest.json中声明"scripting"权限,且目标页面不能启用了Content-Security-Policy: unsafe-eval(否则报错"Refused to evaluate a string as JavaScript") - 不要尝试重写
window.eval或劫持Function构造器——现代浏览器已禁止此类操作,且违反 Chrome Web Store 审核政策
本地开发时如何快速加载未打包的扩展
每次改代码都要 zip + upload 太慢,应始终用“加载已解压的扩展程序”方式调试。但容易忽略几个关键点:
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。它不是新的编程语言,而是一种使用现有标准的新方法,最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容,不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。《php中级教程之ajax技术》带你快速
立即学习“Java免费学习笔记(深入)”;
- 确保根目录下有有效的
manifest.json,且manifest_version明确设为3;V2 的扩展在新版 Chrome 中无法加载 - service worker 文件(如
background.js)必须在manifest.json中通过"background.service_worker"声明,不能只靠 HTML 引入 - 修改
manifest.json后,需手动点击 chrome://extensions 页面右上角的「刷新」按钮(不是浏览器刷新键),否则变更不生效;content script 修改则需重新加载目标网页
真正麻烦的是跨域请求和权限调试:比如想从 content script 调用后端 API,fetch 会因缺少 "host_permissions" 或 "permissions" 报 "Failed to fetch",而错误堆栈里几乎不提示具体缺哪个权限——得挨个对照文档补全。










