Chrome 插件开发实战：从入门到精通-EW帮帮网

一、引言

1.1 Chrome 插件简介

Chrome 插件，即扩展程序，是为增强 Google Chrome 浏览器功能而开发的小型软件。它们能为浏览器增添丰富功能，从简单的页面元素操作到复杂的网络请求拦截，应用场景极为广泛。比如 AdBlock 可屏蔽广告，提升浏览体验；LastPass 能安全管理密码；Grammarly 帮助检查拼写和语法错误。Chrome 插件运行于浏览器沙盒环境，确保稳定性与安全性，且主要基于 HTML、CSS 和 JavaScript 等 Web 技术开发，降低了开发门槛，吸引众多开发者参与。

1.2 开发前的准备工作

开发 Chrome 插件，需准备以下环境与工具：

Google Chrome 浏览器：确保安装最新版本，以获取最佳开发体验与完整功能支持。
文本编辑器：推荐使用 Visual Studio Code、Sublime Text 等，它们具备强大的代码编辑与调试功能。
启用开发者模式：在 Chrome 浏览器中，进入菜单 “更多工具”>“扩展程序”，打开右上角的 “开发者模式” 切换按钮，便于加载未打包的扩展程序进行开发与测试。

二、Chrome 插件基础结构与`manifest.json`

2.1 `manifest.json`详解

manifest.json是 Chrome 插件的核心配置文件，定义了插件的基本信息、权限与功能。常见字段如下：

manifest_version：指定清单文件版本，目前常用 2 或 3，决定了插件遵循的规范与特性。
name：插件名称，将显示在浏览器扩展程序页面与工具栏。
version：版本号，用于标识插件版本，方便版本管理与更新。
description：简短描述插件功能与用途，帮助用户了解插件。
icons：定义不同尺寸图标路径，用于展示在扩展程序页面与工具栏，提升插件辨识度。
browser_action或page_action：定义浏览器操作按钮或页面操作按钮行为，如点击按钮显示弹出窗口等。
permissions：声明插件所需 API 权限，如storage用于数据存储，activeTab用于访问当前活动标签页内容。
background：指定后台脚本，persistent设置为false表示后台页面按需创建，节省资源。

示例：

json

{
  "manifest_version": 3,
  "name": "My Chrome Extension",
  "version": "1.0",
  "description": "A simple Chrome extension example",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png"
    }
  },
  "permissions": ["storage", "activeTab"],
  "background": {
    "service_worker": "background.js",
    "persistent": false
  }
}

2.2 文件与目录结构规划

一个基本的 Chrome 插件通常包含以下文件：

manifest.json：配置文件，不可或缺。
background.js：后台脚本，执行长时间运行任务与监听浏览器事件。
popup.html：弹出界面 HTML，用户点击插件图标时显示。
popup.js：弹出界面 JavaScript 逻辑，实现交互功能。
图标文件：不同尺寸图标，用于展示插件。

推荐按功能与类型组织文件和目录，如创建css目录存放样式文件，js目录存放脚本文件等，使项目结构清晰，便于维护与扩展。

三、插件界面开发

3.1 HTML 与 CSS

3.1.1 界面设计原则与实现

设计 Chrome 插件界面应遵循：

简洁性：界面简洁直观，避免复杂元素，确保用户快速理解与操作。
一致性：与 Chrome 浏览器风格一致，提供统一用户体验。
可用性：所有功能易于访问与使用，提升用户满意度。

在popup.html中，可使用语义化 HTML 标签与简洁 CSS 设计界面。例如待办事项插件界面：

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>To - Do List Plugin</title>
</head>
<body>
  <div class="app">
    <h1>To - Do List</h1>
    <input type="text" id="task-input" placeholder="Add a new task">
    <button id="add-task">Add Task</button>
    <ul id="task-list"></ul>
  </div>
  <script src="popup.js"></script>
</body>
</html>

3.1.2 利用 CSS 美化插件 UI

在css/style.css中添加样式美化界面，如设置字体、颜色、布局等。还可使用响应式设计，适应不同屏幕尺寸；为按钮添加悬停效果，增强交互性。

css

.app {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f4f4f4;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

h1 {
  font-size: 20px;
  color: #333;
  margin-bottom: 15px;
}

#task-input {
  width: 80%;
  padding: 8px;
  margin-right: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

#add-task {
  padding: 8px 15px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

#add-task:hover {
  background-color: #0056b3;
}

#task-list {
  list-style-type: none;
  padding: 0;
  margin-top: 15px;
}

#task-list li {
  margin-bottom: 10px;
  background-color: white;
  padding: 8px 10px;
  border-radius: 3px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}

3.2 JavaScript 交互

3.2.1 与页面元素的交互逻辑

在popup.js中，通过获取页面元素并添加事件监听器实现交互。如待办事项插件添加任务功能：

javascript

document.addEventListener('DOMContentLoaded', function () {
  var addTaskButton = document.getElementById('add-task');
  var taskInput = document.getElementById('task-input');
  var taskList = document.getElementById('task-list');

  addTaskButton.addEventListener('click', function () {
    var taskText = taskInput.value.trim();
    if (taskText) {
      var listItem = document.createElement('li');
      listItem.textContent = taskText;
      taskList.appendChild(listItem);
      taskInput.value = '';
    }
  });
});

3.2.2 弹窗、通知与消息传递

弹窗：通过browser_action或page_action的default_popup指定弹窗页面，如popup.html。
通知：使用chrome.notifications API 发送通知，需在manifest.json声明权限。示例：

javascript

// 在manifest.json中添加权限："notifications"
chrome.notifications.create('reminder', {
  type: 'basic',
  iconUrl: 'icon16.png',
  title: '提醒',
  message: '记得完成今日任务'
});

消息传递：插件不同部分（如背景脚本与内容脚本）间通信，使用chrome.runtime.sendMessage与chrome.runtime.onMessage。例如背景脚本向内容脚本发送消息：

javascript

// 背景脚本background.js
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
  chrome.tabs.sendMessage(tabs[0].id, { message: 'Hello from background' }, function (response) {
    console.log(response);
  });
});

// 内容脚本content.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.message === 'Hello from background') {
    sendResponse({ response: 'Hello received in content script' });
  }
});

3.3 使用 Web APIs

3.3.1 Storage API 存储数据

使用chrome.storage API 存储插件数据，分为local（本地存储，容量较大）与sync（同步存储，与用户 Google 账户同步）。示例：

javascript

// 保存数据
chrome.storage.local.set({ key: 'value' }, function () {
  console.log('Data saved');
});

// 获取数据
chrome.storage.local.get('key', function (result) {
  console.log('Value is'+ result.key);
});

3.3.2 Tabs & Windows API 操作标签页和窗口

Tabs API：操作浏览器标签页，如创建、切换、关闭等。示例：

javascript

// 创建新标签页
chrome.tabs.create({ url: 'https://www.example.com' });

// 获取当前活动标签页
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
  console.log(tabs[0].id);
});

Windows API：管理浏览器窗口，如创建、关闭、获取窗口信息。示例：

javascript

// 获取当前窗口
chrome.windows.getCurrent(function (window) {
  console.log(window.id);
});

3.3.3 Runtime & Messaging API 实现插件间通信

除上述消息传递方式，chrome.runtime还提供其他通信方法，如chrome.runtime.connect创建长连接，用于更复杂通信场景。示例：

javascript

// 背景脚本background.js
var port = chrome.runtime.connect({ name: 'communication - channel' });
port.postMessage({ message: 'Hello from background' });
port.onMessage.addListener(function (msg) {
  console.log('Message from other part:'+ msg);
});

// 其他脚本（如popup.js）
var port = chrome.runtime.connect({ name: 'communication - channel' });
port.onMessage.addListener(function (msg) {
  console.log('Message from background:'+ msg);
  port.postMessage('Hello back!');
});

四、权限与安全

4.1 权限请求与管理

了解并合理申请所需权限：在manifest.json的permissions字段声明权限。例如，插件需访问浏览历史，添加"history"权限；要修改网页内容，添加"activeTab"权限等。合理申请权限，避免过度申请，保护用户隐私。
用户隐私与数据安全：处理用户数据时，遵循最小权限原则，仅收集与使用必要数据，并妥善存储与保护。如使用chrome.storage存储数据时，确保数据加密与访问控制。

4.2 内容安全策略 (CSP)

防御 XSS 攻击：Chrome 插件通过内容安全策略（CSP）防止跨站脚本（XSS）攻击。CSP 定义了允许加载资源的来源，限制插件执行恶意脚本。
设置合适的 CSP 规则：在manifest.json中，通过content_security_policy字段设置 CSP 规则。例如，仅允许从插件自身域加载脚本：

json

{
  "content_security_policy": {
    "extension_pages": "script - src'self'; object - src'self'"
  }
}

此规则表示扩展页面的脚本仅可从插件自身域加载，对象资源也仅可从自身域加载，降低 XSS 攻击风险。

五、插件开发实战案例

5.1 案例一：简易网页翻译插件

功能描述：实现网页文字一键翻译，支持常见语言互译。
技术实现：
- 使用 Google Translate API：在内容脚本中获取网页文本，调用 Google Translate API 翻译，将翻译结果替换原文。
- 配置manifest.json：声明"activeTab"权限，以便访问当前页面内容；指定背景脚本与内容脚本。
- 界面设计：在弹出窗口提供语言选择下拉框与翻译按钮，方便用户操作。
代码实现步骤：
- 内容脚本content.js：

javascript

// 获取网页文本
var textElements = document.getElementsByTagName('*');
var textToTranslate = '';
for (var i = 0; i < textElements.length; i++) {
  if (textElements[i].textContent) {
    textToTranslate += textElements[i].textContent +'';
  }
}

// 调用Google Translate API翻译
var apiUrl = 'https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=en&dt=t&q=' + encodeURIComponent(textToTranslate);
fetch(apiUrl)
 .then(response => response.json())
 .then(data => {
    var translatedText = '';
    for (var j = 0; j < data[0].length; j++) {
      translatedText += data[0][j][0];
    }
    // 替换原文
    for (var i = 0; i < textElements.length; i++) {
      if (textElements[i].textContent) {
        textElements[i].textContent = translatedText;
      }
    }
  });

manifest.json：

json

{
  "manifest_version": 3,
  "name": "Simple Translate Extension",
  "version": "1.0",
  "description": "A simple web page translation extension",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png"
    }
  },
  "permissions": ["activeTab"],
  "content_scripts": [
    {
      "matches": ["https://*/*"],
      "js": ["content.js"]
    }
  ]
}

弹出窗口popup.html：

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Translate Popup</title>
  <select id="source - lang">
    <option value="auto">Auto - detect</option>
    <option value="en">English</option>
    <option value="zh - CN">Chinese (Simplified)</option>
  </select>
  <select id="target - lang">
    <option value="en">English</option>
    <option value="zh - CN">Chinese (Simplified)</option>
  </select>
  <button id="translate - button">Translate</button>
  <script src="popup.js"></script>
</head>
<body>
</body>
</html>

popup.js：处理用户选择语言与点击翻译按钮事件，与内容脚本通信实现翻译。

javascript

document.addEventListener('DOMContentLoaded', function () {
  var translateButton = document.getElementById('translate - button');
  var sourceLangSelect = document.getElementById('source - lang');
  var targetLangSelect = document.getElementById('target - lang');

  translateButton.addEventListener('click', function () {
    var sourceLang = sourceLangSelect.value;
    var targetLang = targetLangSelect.value;
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
      chrome.tabs.sendMessage(tabs[0].id, {
        action: 'translate',
        sourceLang: sourceLang,
        targetLang: targetLang
      }, function (response) {
        console.log(response);
      });
    });
  });
});

5.2 案例二：自定义右键菜单插件

功能描述：在浏览器右键菜单添加自定义选项，如 “搜索选中文字”，点击后在新标签页使用搜索引擎搜索选中文字。
技术实现：
- 使用chrome.contextMenus API：在后台脚本中创建自定义右键菜单选项，并监听点击事件。
- 配置manifest.json：声明"contextMenus"权限与后台脚本。
代码实现步骤：
- 后台脚本background.js：

javascript

chrome.contextMenus.create({
  id:'search - selected - text',
  title: 'Search Google for \'%s\'', // %s会替换成选中的文本
  contexts: ['selection']
});

chrome.contextMenus.onClicked.addListener(function (info, tab) {
  if (info.menuItemId ==='search -

Chrome 插件开发实战：从入门到精通

一、引言

1.1 Chrome 插件简介

1.2 开发前的准备工作

二、Chrome 插件基础结构与`manifest.json`

2.1 `manifest.json`详解

2.2 文件与目录结构规划

三、插件界面开发

3.1 HTML 与 CSS

3.1.1 界面设计原则与实现

3.1.2 利用 CSS 美化插件 UI

3.2 JavaScript 交互

3.2.1 与页面元素的交互逻辑

3.2.2 弹窗、通知与消息传递

3.3 使用 Web APIs

3.3.1 Storage API 存储数据

3.3.2 Tabs & Windows API 操作标签页和窗口

3.3.3 Runtime & Messaging API 实现插件间通信

四、权限与安全

4.1 权限请求与管理

4.2 内容安全策略 (CSP)

五、插件开发实战案例

5.1 案例一：简易网页翻译插件

5.2 案例二：自定义右键菜单插件

网站公告

今日签到

热门文章

最新发布

Chrome 插件开发实战：从入门到精通

一、引言

1.1 Chrome 插件简介

1.2 开发前的准备工作

二、Chrome 插件基础结构与manifest.json

2.1 manifest.json详解

2.2 文件与目录结构规划

三、插件界面开发

3.1 HTML 与 CSS

3.1.1 界面设计原则与实现

3.1.2 利用 CSS 美化插件 UI

3.2 JavaScript 交互

3.2.1 与页面元素的交互逻辑

3.2.2 弹窗、通知与消息传递

3.3 使用 Web APIs

3.3.1 Storage API 存储数据

3.3.2 Tabs & Windows API 操作标签页和窗口

3.3.3 Runtime & Messaging API 实现插件间通信

四、权限与安全

4.1 权限请求与管理

4.2 内容安全策略 (CSP)

五、插件开发实战案例

5.1 案例一：简易网页翻译插件

5.2 案例二：自定义右键菜单插件

网站公告

今日签到

热门文章

最新发布

二、Chrome 插件基础结构与`manifest.json`

2.1 `manifest.json`详解