IT博客汇 | V3 版本的 Chrome 扩展项目模板

V3 版本的 Chrome 扩展项目模板

zhuxy发表于 2024-07-27 07:24:47

要初始化一个基于 Chrome 扩展的项目，包括 V3 版本，你需要按照以下步骤进行操作：

创建项目文件夹： 在你的项目文件夹中，创建一个新文件夹来保存你的扩展代码和资源。
创建清单文件（manifest.json）： Chrome 扩展的核心是清单文件，它描述了扩展的属性、权限和功能。以下是一个基本的 V3 版本清单文件示例：

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "A description of my extension.",
  "permissions": [
    "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

添加扩展图标和资源： 在项目文件夹中创建一个 "images" 文件夹，将你的扩展图标（16×16、48×48 和 128×128 大小）放入其中。
编写内容脚本（content.js）： 这是在网页内容中执行的脚本。例如：

// content.js
console.log("Content script loaded!");

编写背景脚本（background.js）： 这是在后台运行的脚本，可以监听事件和处理逻辑。

// background.js
console.log("Background script loaded!");

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    function: () => {
      console.log("Script executed on the active tab.");
    }
  });
});

创建弹出页面（popup.html）： 这是点击扩展图标时显示的弹出页面。

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <title>My Extension Popup</title>
  <script src="popup.js"></script>
</head>
<body>
  <h1>Hello from the popup!</h1>
</body>
</html>

编写弹出页面脚本（popup.js）：

// popup.js
console.log("Popup script loaded!");

加载扩展：
- 打开 Chrome 浏览器，输入 chrome://extensions/ 并按下 Enter。
- 在右上角启用 "开发者模式"。
- 点击 "加载已解压的扩展程序"，选择你的项目文件夹。
测试扩展： 现在你可以在浏览器中测试你的扩展了。点击扩展图标，弹出页面应该会显示 "Hello from the popup!"，并且在开发者工具的控制台中会看到相关的日志输出。

以上步骤为初始化一个基于 Chrome 扩展 V3 版本的项目所需的基本步骤。根据你的扩展功能，你可能需要添加更多的功能和文件。记得查阅 Chrome 开发者文档以获取更多信息。