返回

Chrome Extension开发指南：从0到1构建第一个扩展程序

前端

在Chrome上编写一个简单的扩展程序

1. 前提条件

在开始之前，你需要具备以下条件：

  • Chrome浏览器
  • Node.js和npm
  • 一个文本编辑器（如VSCode、Atom或Sublime Text）

2. 创建一个新的Chrome Extension项目

首先，使用以下命令创建一个新的Chrome Extension项目：

npx create-react-app chrome-extension

这将创建一个名为chrome-extension的新目录，其中包含了一个基本的Chrome Extension项目结构。

3. 安装依赖项

接下来，你需要安装以下依赖项：

npm install --save-dev @types/chrome

这将安装必要的类型定义文件，使你可以在你的代码中使用Chrome API。

4. 创建一个新的扩展程序背景脚本

在chrome-extension/src目录中，创建一个新的文件名为background.js。这个文件将包含你的扩展程序的背景脚本。

// 在这里添加你的扩展程序的背景脚本代码

5. 创建一个新的扩展程序内容脚本

在chrome-extension/src目录中，创建一个新的文件名为content.js。这个文件将包含你的扩展程序的内容脚本。

// 在这里添加你的扩展程序的内容脚本代码

6. 创建一个新的扩展程序清单文件

在chrome-extension目录中，创建一个新的文件名为manifest.json。这个文件将包含你的扩展程序的清单信息。

{
  "manifest_version": 2,
  "name": "My Chrome Extension",
  "description": "This is my first Chrome Extension.",
  "version": "1.0.0",

  "permissions": [
    "activeTab",
    "clipboardWrite",
    "contextMenus"
  ],

  "background": {
    "scripts": ["background.js"]
  },

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],

  "context_menus": [
    {
      "id": "copy-url-and-title",
      "title": "Copy URL and Title",
      "contexts": ["page"]
    }
  ]
}

7. 构建你的扩展程序

现在你可以使用以下命令构建你的扩展程序：

npm run build

这将在chrome-extension/build目录中创建一个名为chrome-extension.zip的扩展程序包。

8. 将你的扩展程序加载到Chrome

最后，你可以将你的扩展程序加载到Chrome中。为此，请按照以下步骤操作：

  1. 打开Chrome浏览器。
  2. 在地址栏中输入chrome://extensions/并按Enter键。
  3. 点击加载已解压的扩展程序按钮。
  4. 选择chrome-extension/build目录。
  5. 点击打开按钮。

你的扩展程序现在应该加载到Chrome中。

9. 测试你的扩展程序

现在你可以测试你的扩展程序了。为此，请按照以下步骤操作：

  1. 打开一个新的标签页。
  2. 右键单击页面并选择Copy URL and Title。
  3. 打开一个新的文本编辑器并粘贴剪贴板上的内容。

你应该看到当前标签的URL和标题被粘贴到文本编辑器中。

10. 发布你的扩展程序

如果你对你的扩展程序感到满意，你就可以将其发布到Chrome网上应用店。为此，请按照以下步骤操作：

  1. 访问Chrome网上应用店开发者控制台。
  2. 点击创建新应用按钮。
  3. 输入你的扩展程序的名称和。
  4. 上传你的扩展程序包（chrome-extension.zip）。
  5. 点击发布按钮。

你的扩展程序现在应该在Chrome网上应用店中可用。