Chrome 插件开发指南——初识插件

如今，浏览器扩展（插件）已经成为提高用户体验、个性化浏览器功能的重要组成部分之一。其中，Chrome 插件的开发相对简单而强大，为广大开发者提供了丰富的功能和创新的可能性。本文将带您深入了解 Chrome 插件开发的要点，包括插件构成、功能页面设计以及发布流程。

插件构成

manifest.

每个扩展程序都有一个 JSON 格式的清单文件（名为 manifest.json），用于提供重要信息，这个文件是必须的。相当于插件的 meta 信息，包含插件的名称、版本号、图标、脚本文件名称等。

perl 复制代码

{
  // 指定插件的 manifest 文件的版本类型。在这里，值为 3 表示使用 Manifest V3 版本。
  "manifest_version": 3,

  // 插件的名称，显示在 Chrome 浏览器中。
  "name": "Chrome Extension",

  // 插件的简要描述，用于向用户说明插件的功能或目的。
  "description": "A chrome extension",

  // 指定插件的选项页面，用户可以在这个页面上配置插件的一些设置。
  "options_page": "options.html",

  // 插件的后台页面配置，用于处理插件的核心逻辑。在这里使用了 service worker，代表插件的后台逻辑由一个 service worker 来处理。
  "background": { 
    "service_worker": "background.js" 
  },

  // 插件的操作按钮配置。
  "action": {
    // 当用户点击插件图标时弹出的默认弹出页面。
    "default_popup": "popup.html",

    // 指定插件在浏览器工具栏中显示的默认图标。
    "default_icon": "icon-34.png"
  },

  // 覆盖 Chrome URL，指定新标签页的内容，这里指向了一个自定义的 HTML 页面。
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  },

  // 定义插件的图标，其中 "128" 表示图标的尺寸，"icon-128.png" 是实际图标文件的路径。
  "icons": {
    "128": "icon-128.png"
  },

  // 内容脚本配置，指定插件在哪些页面上运行，以及插入到页面的 JavaScript 和 CSS 文件。
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*", "<all_urls>"],
      "js": ["contentScript.js"],
      "css": ["content.css"]
    }
  ],
  
  // Chrome 插件清单文件中的一个权限声明，表示插件请求在当前活动的标签页（active tab）上执行一些操作的权限。
//具体而言，"activeTab" 权限通常用于插件需要与当前用户正在浏览的页面进行交互或获取页面信息的情况。一旦插件声明了这个权限，它就能够通过 Chrome 扩展 API 访问和操作当前活动标签页的内容，执行诸如注入脚本、修改页面样式、获取页面信息等操作。
  "permissions": ["activeTab"],

  // 指定插件的开发者工具页面，允许在 Chrome 开发者工具中查看插件的调试信息。
  "devtools_page": "devtools.html",

  // 定义插件可访问的资源，包括样式表和图标。可以通过插件访问这些资源的页面是空数组，表示所有页面都可以访问。
  "web_accessible_resources": [
    {
      "resources": ["content.styles.css", "icon-128.png", "icon-34.png"],
      "matches": []
    }
  ]
}

background script

扩展程序的事件处理脚本；其中包含对扩展程序非常重要的浏览器事件的监听器。该事件会处于休眠状态，直到某个事件触发，然后执行指示的逻辑。有效的后台脚本仅在需要时才加载，在空闲时卸载。

content script

内容脚本是插件注入到页面的脚本，但不会体现在页面的 DOM 结构中。它可以操作 DOM，但与页面上的其他脚本隔离，无法访问其他脚本定义的变量、函数等，相当于在单独的沙盒中运行。内容脚本可以调用有限的 Chrome 插件 API，但受到同源策略限制。

功能页面

包括点击插件图标弹出的页面（简称 popup）、插件的配置页面（简称 options）

option page

就像扩展程序允许用户自定义 Chrome 浏览器一样，您也可以在选项页面中自定义扩展程序。选项可用于启用功能，并允许用户选择与其需求相关的功能。(非必需)

eg: 篡改猴的管理面板

无法通过程序打开弹出窗口，只能由用户点击打开。点击弹出窗口之外的区域会导致弹出窗口收起。

重点说明一下：

V2版本的时候存在browser action 和 page action：这俩我们可以理解为插件的按钮。browser action 会固定在 chrome 的工具栏。而 page action 可以设置特定的网页才显示图标。

V3版本已改为只有一个action，即之前的browser action.

通信架构

content script、插件功能页面、background script 之间的通信架构如下

举个例子------生成页面二维码

arduino 复制代码

｜── popup.html
｜── popup.js
｜── mainifest.json
｜── popup.html
｜── qrcode.min.js

mainifest.json

json 复制代码

{
  "manifest_version": 3,
  "name": "Random Quote Extension V3",
  "version": "1.0",
  "description": "Displays a random quote on new tab",
  "permissions": ["activeTab"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon.png",
      "48": "icon.png",
      "128": "icon.png"
    }
  },
  "icons": {
    "16": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  }
}

popup.html

xml 复制代码

<!DOCTYPE html>
<html>
  <head>
    <title>URL to QR Code</title>
    <script src="qrcode.min.js"></script>
    <script src="popup.js"></script>
  </head>
  <body>
    <div id="qrcode"></div>
  </body>
</html>

poup.js

javascript 复制代码

document.addEventListener('DOMContentLoaded', function() {
  chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
    var url = tabs[0].url;
    var qrcodeDiv = document.getElementById("qrcode");

    var qrcode = new QRCode(qrcodeDiv, {
      text: url,
      width: 128,
      height: 128
    });
  });
});

如何使用呢？

打开chrome://extensions/
点击 - 加载已解压的扩展程序-选择你刚编写的插件代码

点击扩展程序中的icon，大功告成（当然，你的可能的并未出现在下图中的位置，可以尝试将其固定）

发布

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

"罗马"非一日建成，"罗码"也非一帆风顺，虽然条条大路通罗马，但"罗码之路"还有待验证