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. 必填项

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

1. 推荐填写

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

1. 定义浏览器工具栏

   1. "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
        },
      

   2. 

1. 开启后台脚本权限

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

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

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

匹配模式

1. 自定义扩展程序选项

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

1. 开启devtools权限

"devtools_page": "devtools.html"

1. 开启主题权限

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

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

1. 获取浏览器内置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来与扩展其他部分进行通信。

两种注入方式

1. 脚本自动注入

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

1. 通过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 浏览器一样，支持扩展程序的自定义。选项可用于启用功能并允许用户选择与其需求相关的功能。

两种模式

1. 全页面

1. 嵌入式

Devtools

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

调式

安装

• 要在开发人员模式下加载解压的扩展：

• • chrome://extensions通过在新选项卡中输入来转到“扩展”页面。（按照设计chrome://，URL 不可链接。）

    1. 或者，单击扩展菜单拼图按钮并选择菜单底部的管理扩展。
    2. 或者，点击 Chrome 菜单，将鼠标悬停在更多工具上， 然后选择扩展程序。

  • 单击开发者模式旁边的切换开关启用Developer Mode 。

  • 单击加载已解压的扩展程序按钮并选择扩展目录。

    1. 

Debug

控制台日志

错误日志

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

发布

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

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

连载

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