Chrome 扩展开发：从 Idea 到上线

核心要点

• Chrome 扩展介绍：架构、API、开发工具
• 开发环境搭建：manifest.json、HTML、CSS、JavaScript
• 核心功能：标签页管理、存储、消息通信
• 实际案例：开发一个简单的翻译扩展
• 测试与调试：加载扩展、调试工具
• 上线流程：Chrome Web Store 发布、审核、推广

最近在浏览 Chrome Web Store 时，发现有很多实用的 Chrome 扩展。有些扩展功能简单，但却能解决很多实际问题。我突然想到，自己也可以开发一个 Chrome 扩展，既能解决自己的问题，还能作为副业赚钱。今天，我就来分享一下 Chrome 扩展开发的经验，希望能帮助大家快速上手。

Chrome 扩展介绍

Chrome 扩展是一种基于 Web 技术的应用程序，可以增强 Chrome 浏览器的功能。Chrome 扩展可以访问浏览器的 API，实现各种功能，比如页面解析、数据处理、用户交互等。

架构

Chrome 扩展的架构主要包括以下几个部分：

• manifest.json：扩展的配置文件，包含扩展的基本信息、权限、背景脚本、内容脚本等。
• 背景脚本：运行在浏览器后台的脚本，负责处理扩展的逻辑。
• 内容脚本：注入到网页中的脚本，负责与网页进行交互。
• ** popup**：扩展的弹出窗口，用户可以通过点击扩展图标打开。
• 选项页：扩展的设置页面，用户可以通过选项页配置扩展的功能。

API

Chrome 扩展提供了丰富的 API，包括：

• 浏览器操作：访问浏览器的标签页、窗口、书签等。
• 页面操作：访问网页的 DOM、CSS、JavaScript 等。
• 存储：使用 localStorage 或 Chrome 扩展的存储 API 存储数据。
• 网络请求：发送 HTTP 请求，获取数据。
• 消息通信：扩展内部的脚本之间，或者扩展与网页之间的通信。

开发工具

Chrome 浏览器提供了强大的开发工具，帮助我们开发和调试 Chrome 扩展。这些工具包括：

• 扩展管理页面：可以加载和管理扩展。
• 开发者工具：可以调试扩展的脚本和样式。
• 性能分析工具：可以分析扩展的性能。

开发环境搭建

开发 Chrome 扩展非常简单，只需要以下几个步骤：

1. 创建项目目录

创建一个新的项目目录，用于存放扩展的文件。

2. 创建 manifest.json

在项目目录中创建 manifest.json 文件，包含扩展的基本信息。

3. 创建 HTML、CSS、JavaScript 文件

根据扩展的功能，创建 HTML、CSS、JavaScript 文件。

4. 加载扩展

在 Chrome 浏览器的扩展管理页面，加载扩展的项目目录。

核心功能

Chrome 扩展的核心功能包括：

标签页管理

Chrome 扩展可以访问浏览器的标签页 API，实现标签页的打开、关闭、切换等功能。

存储

Chrome 扩展可以使用 localStorage 或 Chrome 扩展的存储 API 存储数据。

消息通信

Chrome 扩展可以通过消息通信机制，实现扩展内部的脚本之间，或者扩展与网页之间的通信。

实际案例

开发一个简单的翻译扩展

今天，我就来开发一个简单的翻译扩展。这个扩展的功能是：选中网页中的文字，点击扩展图标，弹出翻译结果。

1. 创建 manifest.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

{
  "manifest_version": 3,
  "name": "简单翻译扩展",
  "version": "1.0",
  "description": "选中网页中的文字，点击扩展图标，弹出翻译结果。",
  "permissions": ["activeTab", "storage"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "32": "images/icon32.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "icons": {
    "16": "images/icon16.png",
    "32": "images/icon32.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

2. 创建 popup.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>简单翻译扩展</title>
  <style>
    body {
      width: 300px;
      height: 200px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-family: Arial, sans-serif;
    }
    #translateBtn {
      margin-top: 20px;
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    #translateBtn:hover {
      background-color: #45a049;
    }
    #result {
      margin-top: 20px;
      font-size: 14px;
      color: #333;
    }
  </style>
</head>
<body>
  <h1>简单翻译扩展</h1>
  <button id="translateBtn">翻译</button>
  <div id="result"></div>
  <script src="popup.js"></script>
</body>
</html>

3. 创建 popup.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

document.getElementById('translateBtn').addEventListener('click', async () => {
  // 获取当前选中的文字
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const [result] = await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: () => window.getSelection().toString()
  });
  const text = result.result;

  // 调用翻译 API
  const response = await fetch(`https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=zh-CN&dt=t&q=${encodeURIComponent(text)}`);
  const data = await response.json();
  const translatedText = data[0][0][0];

  // 显示翻译结果
  document.getElementById('result').textContent = translatedText;
});

测试与调试

1. 加载扩展

在 Chrome 浏览器的扩展管理页面，点击“加载已解压的扩展程序”，选择扩展的项目目录。

2. 测试功能

选中网页中的文字，点击扩展图标，弹出翻译结果。

3. 调试

使用 Chrome 浏览器的开发者工具调试扩展的脚本和样式。

上线流程

1. 准备扩展包

将扩展的文件打包成 zip 文件。

2. 上传到 Chrome Web Store

登录 Chrome Web Store 开发者后台，上传扩展包。

3. 审核

Chrome Web Store 会对扩展进行审核，审核通过后，扩展就会上线。

4. 推广

推广扩展是非常重要的一步，可以通过以下方式推广：

• 在社交媒体上分享
• 写博客介绍
• 在论坛发帖
• 与其他开发者合作

总结

Chrome 扩展开发是一项非常有趣的技术，可以帮助我们解决很多实际问题。通过本文的介绍，相信大家对 Chrome 扩展开发有了更深入的了解。希望大家能够动手实践，开发出自己的 Chrome 扩展，实现副业赚钱。