Chrome Extension 基础篇-烟雨网

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"

开启主题权限

https://developer.chrome.com/docs/extensions/mv3/manifest/override/ 文档丢了 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 。
- 单击加载已解压的扩展程序按钮并选择扩展目录。