王振友 发表于 2023-12-15 01:32:49

Chrome扩展的核心:manifest 文件(中)

大家好,我是 dom 哥。我正在写关于 Chrome 扩展开发的系列文章,感兴趣的可以 点个小星星 https://img.shields.io/github/stars/dom-bro/chrome-extension-development?label=&style=social。
在上一篇中已经完成了 Chrome 扩展的雏形,本篇接着介绍 manifest 中的可选字段,完善扩展的细节。
manifest 中的可选字段

"content_scripts"

向 web 页面注入 JavaScript 和 CSS。可以说这是 Chrome 扩展的灵魂。当指定 content_scripts 后,每当页面加载时,content_scripts 也将随之加载。
"content_scripts": [
   {
   "css": ["content-style.css"],
   "js": ["content-script.js"],
   "matches": ["<all_urls>"],
   "run_at": "document_idle", // optional
   "world": "ISOLATED" // optional
   }
]content_scripts 里的配置项解释:

[*]"css":指定注入的 css 样式文件
[*]"js":指定注入的 js 脚本文件
值得注意的是,css 和 js 指定的文件路径必须是相对路径!总是相对于扩展根目录!
<ul>"matches":用于指定往哪些页面注入 css 和 js,必填项。
其值并非普通的 url,而是满足如下结构的匹配模式。
<scheme>://<host>/<path>

[*]scheme:指明协议格式,只能是以下几种

[*]http
[*]https
[*]通配符 *, 表示 http 或 https
[*]file

[*]host:指明主机名。支持通配符 *,但有限制,通配符 * 的屁股后面必须跟 . 或 /!也就是只有以下两种使用方式

[*]*.example.com 匹配子域
[*]*/ 匹配所有域

[*]path:指明匹配的网址路径。/* 表示匹配所有路径。
<blockquote>
特殊 case: "" 匹配所有页面!一般,额,简单粗暴,就用这个
来源:https://www.cnblogs.com/iovec/p/manifest2.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: Chrome扩展的核心:manifest 文件(中)