Chrome扩展的核心：manifest 文件（中）

大家好，我是 dom 哥。我正在写关于 Chrome 扩展开发的系列文章，感兴趣的可以 点个小星星 。

在上一篇中已经完成了 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 指定的文件路径必须是相对路径！总是相对于扩展根目录！

• "matches"：用于指定往哪些页面注入 css 和 js，必填项。

  其值并非普通的 url，而是满足如下结构的匹配模式。

  <scheme>://<host>/<path>
  

  • scheme：指明协议格式，只能是以下几种

    • http
    • https
    • 通配符 *, 表示 http 或 https
    • file

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

    • *.example.com 匹配子域
    • */ 匹配所有域

  • path：指明匹配的网址路径。/* 表示匹配所有路径。

  特殊 case： "<all_urls>" 匹配所有页面！一般，额，简单粗暴，就用这个

  标签：document,Chrome,扩展,js,content,scripts,manifest,css,页面
  From： https://www.cnblogs.com/iovec/p/manifest2.html