Chrome Extension 开发笔记
chrome extension content script, 只能访问 dom, 不能访问页面 js 变量和函数 Injected Script, 被插入到页面里的 js 代码 chrome://extensions puzzle button: chrome extension 图标后面的拼图按钮 develop chrome extension doc https://developer.chrome.com/docs/extensions/mv3/ javascript web api: https://developer.mozilla.org/en-US/docs/Web/API chrome api: https://developer.mozilla.org/en-US/docs/Web/API html: https://web.dev/learn/html/ css: https://web.dev/learn/css/ javascript: https://developer.mozilla.org/en-US/docs/Learn/JavaScript chrome extension development overview: https://developer.chrome.com/docs/extensions/mv3/devguide/ chrome extension 的构成 The manifest, manifest.json, 唯一一个必须要存在于 extension 根目录的文件 The service worker, service worker 监听 chrome 的各种事件, 可以调用 Chrome api, 但是不能直接操作页面内容 Content scripts: content script 可以直接在页面中执行 js 代码, 可以直接操作 DOM, 还可以跟 service worker 通信 The popup and other pages content script 与 service worker 的分工和通信 各自负责什么 对比项 content script service worker（background） 运行位置 注入到网页里，每个匹配的 tab（以及 all_frames 打开时的每个 frame）各一份 整个扩展只有一个，运行在扩展自己的后台 DOM 能读写所在页面的 DOM 没有 DOM，也没有 window、document、localStorage 页面的 JS 变量 访问不到，运行在 isolated world 访问不到 可用的 chrome API 只有一小部分：chrome.runtime（发消息、getURL 等）、chrome.storage、chrome.i18n 按 manifest 里申请的 permissions 全部可用：tabs、scripting、cookies、alarms、contextMenus 等 网络请求 fetch() 按所在页面的 origin 处理，受页面 CORS 限制 对 host_permissions 里的域名 fetch() 不受 CORS 限制 生命周期 跟着页面走，页面刷新或关闭就没了 事件驱动，空闲约 30 秒被回收，有事件再拉起（见下一节） 一句话概括：content script 负责“页面里看得见的部分”，比如读取用户选中的文字、在页面上插入按钮或浮层；service worker 负责“页面之外的部分”，比如调用后端 API、保存登录 token、管理 tab、响应扩展图标点击和右键菜单。两边都做不了对方的事，所以绝大多数扩展功能都是两者配合完成的。 ...