Chrome Extension 基础篇前言由于Manifest V3接近与Manifest V2的完全功能对等，Ch

Extensions are software programs, built on web technologies (such as HTML, CSS, and JavaScript) that enable users to customize the Chrome browsing experience.

扩展程序是基于 Web 技术（例如 HTML、CSS 和 JavaScript）构建的软件程序，可让用户自定义 Chrome 浏览体验。

前言

由于Manifest V3接近与Manifest V2的完全功能对等，Chrome Extension将逐步淘汰Manifest V2，作为与时俱进的前端吃瓜人，本文以Manifest V3中的概念进行介绍。

插件结构与介绍

manifest.json

manifest.json向浏览器提供有关扩展的信息，可以理解成配置文件，Chrome Extension读取配置文件开启对应功能，同时每个扩展都需要一个manifest

必填项
1. name：插件名称
2. version：版本号
3. manifest_version：配置文件版本，v2 or v3

推荐填写
1. default_locale：国际化相关
2. description：对插件的描述
3. icons：插件icon配置
4. author：插件开发者

定义浏览器工具栏

"action": {
    "default_icon": {              // optional
      "16": "images/icon16.png",   // optional
      "24": "images/icon24.png",   // optional
      "32": "images/icon32.png"    // optional
    },
    "default_title": "Click Me",   // optional, shown in tooltip
    "default_popup": "popup.html"  // 1111
  },

开启后台脚本权限

 "background": {
    "service_worker": "background.js",
    "type": "module" // optional 开启ES Module
  }

在网页上下文中运行的额外文件权限

 "content_scripts": [
   {
     "matches": ["https://*.nytimes.com/*"], // <all_urls> 匹配所有链接
     "css": ["my-styles.css"],
     "js": ["content-script.js"]
   }
 ]

匹配模式

自定义扩展程序选项

"options_ui": {
    "page": "options.html",
    "open_in_tab": false
}
"options_page": "options.html"

开启devtools权限

"devtools_page": "devtools.html"

开启主题权限

developer.chrome.com/docs/extens… 文档丢了 QAQ

"chrome_url_overrides": {
    "newtab": "./index.html"
},

获取浏览器内置API

"host_permissions": ["http://*/*", "https://*/*"],
"permissions": ["tabs"],
"optional_permissions": ["downloads"],

host_permissions：允许使用扩展的域名

permissions：包含已知字符串列表中的项目

optional_permissions：与常规类似permissions，但由扩展的用户在运行时授予，而不是提前授予

Background Script

background script是扩展的事件处理程序：它包含对扩展很重要的浏览器事件的侦听器。它处于休眠状态，直到触发事件，然后执行指示的逻辑。有效的后台脚本仅在需要时加载，并在空闲时卸载。

不使用时终止，需要时重新启动（类似于事件页面）。

无权访问 DOM。（service worker独立于页面）

chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    "id": "sampleContextMenu",
    "title": "Sample Context Menu",
    "contexts": ["selection"],
  });
});

// This will run when a bookmark is created.
chrome.bookmarks.onCreated.addListener(() => {
  // do something
});

Content Script

读取或写入网页的扩展程序使用content_script。内容脚本包含在已加载到浏览器的页面上下文中执行的 JavaScript。内容脚本读取和修改浏览器访问的网页的 DOM。

content_script可以通过使用storage/message API来与扩展其他部分进行通信。

两种注入方式

脚本自动注入

"content_scripts": [
   {
     "matches": ["<all_urls>"], // <all_urls> 匹配所有链接
     "css": ["my-styles.css"],
     "js": ["content-script.js"]
   }
 ]

通过Background Script注入

// background.js
chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ['content-script.js']
  });
});

UI Elements

扩展可以包含各种 HTML 文件，例如弹出窗口、选项页面和其他 HTML 页面。所有这些页面都可以访问Chrome API。

Popup Page

运行于弹窗的html显示 & js脚本

Options Page

正如扩展程序允许用户自定义 Chrome 浏览器一样，支持扩展程序的自定义。选项可用于启用功能并允许用户选择与其需求相关的功能。

两种模式

全页面

嵌入式

Devtools

DevTools 扩展的结构与任何其他扩展一样：它可以有一个背景页面、内容脚本和其他项目。此外，每个 DevTools 扩展都有一个 DevTools 页面，可以访问 DevTools API。

调式

安装

要在开发人员模式下加载解压的扩展：
- chrome://extensions通过在新选项卡中输入来转到“扩展”页面。（按照设计chrome://，URL 不可链接。）
  1. 或者，单击扩展菜单拼图按钮并选择菜单底部的管理扩展。
  2. 或者，点击 Chrome 菜单，将鼠标悬停在更多工具上， 然后选择扩展程序。
- 单击开发者模式旁边的切换开关启用Developer Mode 。
- 单击加载已解压的扩展程序按钮并选择扩展目录。

Debug

控制台日志

错误日志

点击错误按钮查看插件错误日志

发布

chrome发布插件需要花费 5 美元开通账号：developer.chrome.com/docs/websto…

chrome发布流程：developer.chrome.com/docs/websto…

连载

下一篇：如何从0到1打造Chrome Extension Cli