Chrome MV3 扩展程序开发指南：从零入门

2023-11-10 06:52:37

作为浏览器插件开发领域的从业者，我深知总结输出文章的重要性。尤其是随着 Chrome 全面升级到 Manifest V3，迫切需要一份全面易懂的指南来帮助开发者驾驭这一转变。

什么是 Chrome MV3 扩展程序？

Chrome MV3 扩展程序是基于 WebExtensions API 构建的浏览器扩展程序，可让开发者访问 Chrome 的核心功能。Manifest V3 是 Manifest V2 的继任者，引入了重大更改，例如对 API 权限的限制和对后台脚本的使用。

为何 Manifest V3 如此重要？

Manifest V3 旨在解决 Manifest V2 中的一些安全和隐私问题。通过限制对某些 API 的访问，它可以减少扩展程序滥用用户数据的风险。此外，它还提高了扩展程序的性能和稳定性。

从零开始开发 Chrome MV3 扩展程序

1. 创建一个新的扩展程序项目

使用 Visual Studio Code 或你喜欢的代码编辑器创建一个新的项目文件夹。在文件夹中，创建以下文件：

manifest.json
background.js
popup.html
popup.js

2. 编写 Manifest 文件

manifest.json 文件定义了扩展程序的基本信息，包括名称、版本、权限和内容脚本。以下是示例 manifest 文件：

{
  "manifest_version": 3,
  "name": "My Chrome Extension",
  "version": "1.0.0",
  "permissions": ["tabs"],
  "content_scripts": [
    {
      "matches": ["https://*/*"],
      "js": ["content_script.js"]
    }
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "action": {
    "default_popup": "popup.html"
  }
}

3. 编写后台脚本

background.js 脚本在扩展程序后台运行。它可以监听事件、发送消息和管理后台任务。以下是示例后台脚本：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === "getTabs") {
    chrome.tabs.query({}, (tabs) => {
      sendResponse(tabs);
    });
  }
});

4. 编写弹出窗口脚本和 HTML

popup.html 和 popup.js 文件定义了扩展程序弹出窗口的界面和行为。以下是示例 HTML 和 JavaScript 文件：

<!-- popup.html -->
<html>
  <head>
    <script src="popup.js"></script>
  </head>
  <body>
    <button id="get-tabs-btn">Get Tabs</button>
  </body>
</html>

// popup.js
document.getElementById("get-tabs-btn").addEventListener("click", () => {
  chrome.runtime.sendMessage({ type: "getTabs" }, (response) => {
    console.log(response);
  });
});

5. 打包和发布扩展程序

一旦你编写完扩展程序，你需要将其打包为 .crx 文件并将其发布到 Chrome 网上商店。有关打包和发布过程的详细说明，请参阅 Chrome 开发者文档。

结论

通过遵循本指南，你可以轻松地从头到尾开发 Chrome MV3 扩展程序。虽然 Manifest V3 引入了重大变化，但通过了解其关键概念和遵循最佳实践，开发者仍然可以构建功能强大且安全的扩展程序。