0

0

javascript如何实现浏览器扩展与插件【教程】

幻影之瞳

幻影之瞳

发布时间:2026-01-30 17:54:09

|

654人浏览过

|

来源于php中文网

原创

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

javascript如何实现浏览器扩展与插件【教程】

Manifest V3 下 content script 如何正确注入到页面

Chrome 从 Manifest V3 开始强制要求 content script 必须通过 content_scripts 字段声明,不再支持动态注入(如 executeScript 注入含 document.writeeval 的代码)。若你发现脚本没执行、document.bodynull 或 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 太慢,应始终用“加载已解压的扩展程序”方式调试。但容易忽略几个关键点:

php中级教程之ajax技术
php中级教程之ajax技术

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",而错误堆栈里几乎不提示具体缺哪个权限——得挨个对照文档补全。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

420

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

536

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

311

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

77

2025.09.10

chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

840

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

746

2023.11.06

string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

483

2023.08.02

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

237

2023.09.22

C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.4万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.0万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号