介绍

简单来说，Chrome 插件是用来增强浏览器或页面功能的程序。我们可以用它来实现「文章预计阅读时间」、「页面一键暗黑模式」、「Chrome Tab 分组管理」等功能。开发 Chrome 插件主要用到的技术是 HTML、CSS 和 JavaScript ，对 Web 开发人员来说非常友好。

文档链接：

Welcome to Chrome Extensions - Chrome Developers

核心项目结构

.
├── background.js        # 后台脚本, e.g. 插件快捷键、popup、关闭选项卡等事件监听
├── images               # 图片资源
│   ├── icon-128.png
│   ├── icon-16.png
│   ├── icon-32.png
│   ├── icon-48.png
├── manifest.json        # 插件的配置清单JSON
├── popup                # 插件弹窗
│   ├── index.css
│   ├── index.html
│   └── index.js
└── scripts              
    └── content.js       # 插入到网页中的脚本

manifest.json

这个文件必须存在于 Chrome 插件中，而且得放在项目根目录，用途是配置所有和插件相关的配置。其中，manifest_version、name、version 是必不可少的配置字段，description 和 icons 是推荐配置的字段。

{
  "manifest_version": 3,                                    // manifest 版本，必须得是v3
  "name": "Notion Tools",                                   // 插件名称
  "version": "1.0",                                         // 插件版本
  "description": "Enhance the features of notion",          // 插件描述
  "icons": {                                                // 插件 icon 图标
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  },
  "content_scripts": [{                                     // 注入页面的内容脚本
    "js": [                                                 // js 路径配置，按数组顺序加载
      "scripts/utils.js",
      "scripts/Outline.js",
      "scripts/content.js"
    ],
    "matches": [                                            // 允许浏览器识别哪些站点将内容脚本注入
      "https:\\/\\/*\\/*"
    ],
    "css": ["outline.css"],                                 // 样式路径
    "run_at": "document_end"                                // 内容脚本执行阶段, 默认为文档空闲时（document_idle）
  }],
  "permissions": ["scripting", "storage"],                  // 插件权限申请
  "web_accessible_resources": [                             // 插件访问资源
    {
      "matches": ["https:\\/\\/*\\/*"],
      "resources": [
        "images/eye.svg",
        "images/eye-hidden.svg"
      ]
    }
  ],
  "action": {                                               // 控制插件的操作 e.g. 默认弹窗配置等
    "default_popup": "popup/index.html"
  },
  "background": {                                           // 后台脚本, e.g. 插件快捷键、popup、关闭选项卡等事件监听
    "service_worker": "background.js"
  },
  "commands": {                                             // 快捷键配置
    "show-outline": {
      "suggested_key": {
        "default": "Ctrl+Shift+O",
        "windows": "Ctrl+Shift+O",
        "mac": "Command+Shift+O",
        "chromeos": "Ctrl+Shift+O",
        "linux": "Ctrl+Shift+O"
      },
      "description": "Show or hide the outline."
    },
		"_execute_action": {                                    // "_execute_action" 键运行的代码与 action.onClicked() 事件相同，因此不需要额外的代码
      "suggested_key": {
        "default": "Ctrl+U",
        "mac": "Command+U"
      }
    }
  },
	"chrome_url_overrides": {
		"newtab": "index.html"                                  // 用 index.html 作为 chrome newTab 页面
	}
}

文档链接：

Welcome to the Chrome Extension Manifest V3 - Chrome Developers

Content Scripts

虽然叫做 Content Scripts ，但它并不限于 JS ，也可以包含 CSS 。我们可以通过在 manifest.json 中配置的方式，把 JS、CSS 注入到页面中去。

{
	"content_scripts": [{
    "js": [                     // js 路径配置，按数组顺序加载
      "scripts/utils.js",
      "scripts/Outline.js",
      "scripts/content.js"
    ],
    "matches": [
      "https:\\/\\/*\\/*"          // "<all_urls>" 表示匹配所有地址
    ],
    "css": ["outline.css"],     // css 路径配置
    "run_at": "document_end"    // 脚本注入的时间，可选值: "document_start" | "document_end" | "document_idle"，默认 document_idle 表示页面空闲
  }],
}

⚠️ 注意

如果没有配置 run_at 为 document_start，下面这种代码是不会生效的：

document.addEventListener('DOMContentLoaded', function() {
  // todo
});

文档链接：

Chrome Extensions content scripts - Chrome Developers

Background