↓跳过正文

谷歌浏览器扩展程序开发入门

·886 字·5 分钟

在当今的Web生态中，谷歌浏览器（Chrome）凭借其出色的性能、丰富的扩展程序（Extensions）库和强大的开发者工具，成为了全球最受欢迎的浏览器之一。对于广大用户而言，从《谷歌浏览器插件推荐与安装指南》中获取优秀插件是提升效率的关键。然而，你是否曾想过亲手打造一个独一无二的、能解决你特定需求的扩展程序？无论是想自动化重复性操作、集成第三方服务，还是简单地美化浏览器界面，学习扩展程序开发都是一项极具价值的技能。

本文旨在为你提供一份详尽的谷歌浏览器扩展程序开发入门指南。我们将从最基础的概念讲起，逐步深入，手把手带你完成第一个功能完整的扩展程序，并最终了解如何将其打包、测试乃至发布到Chrome网上应用店。无论你是前端开发新手，还是有一定经验的开发者希望涉足浏览器扩展领域，本文都将为你铺平道路。

谷歌浏览器 谷歌浏览器扩展程序开发入门

一、 扩展程序开发前准备
#

在开始编写代码之前，我们需要搭建好开发环境并理解扩展程序的基本构成。

1.1 核心开发工具
#

  • 谷歌浏览器（Chrome）：这是开发和测试的必备平台。确保你使用的是较新版本的Chrome，以便使用最新的扩展程序API和开发者工具。你可以从我们的《谷歌浏览器下载》页面获取最新版本。
  • 代码编辑器：任何你熟悉的文本编辑器或集成开发环境（IDE）均可，例如 Visual Studio Code、Sublime Text、WebStorm 等。VS Code因其轻量、插件丰富和对前端技术的优秀支持，被广泛推荐。
  • 基础技术栈：扩展程序开发本质上是Web开发，因此你需要掌握：
    • HTML：用于构建扩展的界面，如弹出窗口（popup）、选项页面（options page）。
    • CSS：用于美化扩展的界面。
    • JavaScript：这是扩展程序逻辑的核心。你需要熟悉现代ES6+语法，以及浏览器端的DOM操作和事件处理。

1.2 理解扩展程序的核心构成
#

一个最简单的Chrome扩展程序通常由以下几个部分组成：

  1. 清单文件（manifest.json）：这是扩展程序的“身份证”和“说明书”。它是一个JSON格式的文件，必须放在扩展程序的根目录。它定义了扩展的基本信息（名称、版本、描述）、所需权限、后台脚本、内容脚本、浏览器按钮图标、弹出页面等关键配置。我们将在下一节详细解析。
  2. 背景脚本（Background Script）：扩展的“大脑”或“后台服务”。它是一个长期运行的脚本，用于监听浏览器事件（如标签页创建、书签更新、网络请求等）并做出响应。它独立于任何特定的网页运行。
  3. 内容脚本（Content Script）：扩展的“触手”。这些脚本会被注入到用户访问的特定网页中，可以读取和修改该网页的DOM，从而实现与网页内容的交互。例如，高亮显示页面中的特定文字、修改页面样式等。
  4. 用户界面组件：
    • 弹出页面（Popup）：当用户点击浏览器工具栏中的扩展图标时显示的小窗口。通常是一个简单的HTML页面。
    • 选项页面（Options Page）：允许用户自定义扩展程序设置的独立页面。
    • 其他界面：如侧边栏、右键菜单项等。

二、 创建你的第一个扩展程序：Hello World
#

谷歌浏览器 二、 创建你的第一个扩展程序：Hello World

让我们通过一个最简单的例子，直观感受扩展程序的创建和加载过程。这个扩展的功能是：在浏览器工具栏添加一个图标，点击后弹出一个显示“Hello, Chrome Extension!”的窗口。

2.1 项目结构创建
#

首先，在你的电脑上创建一个新的文件夹，例如 my-first-extension。在该文件夹内创建以下文件：

my-first-extension/
├── manifest.json  // 清单文件
├── popup.html     // 弹出窗口的HTML
├── popup.js       // 弹出窗口的JavaScript逻辑（可选，本例暂不需要）
└── icon.png       // 扩展图标（16x16, 48x48, 128x128像素，可先用占位图）

你可以从网上下载一个简单的图标，或者使用绘图工具制作一个，命名为icon.png，并放置于根目录。

2.2 编写清单文件（manifest.json）
#

打开 manifest.json 文件，输入以下内容。这是扩展程序V3（Manifest V3）的格式，也是当前Chrome主推和强制要求的版本。

{
  "manifest_version": 3,
  "name": "我的第一个扩展",
  "version": "1.0",
  "description": "一个简单的Chrome扩展Hello World示例。",
  "icons": {
    "16": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "permissions": []
}

代码解析：

  • "manifest_version": 3：声明使用Manifest V3。
  • "name", "version", "description"：扩展的基本信息。
  • "icons"：定义扩展在不同场景下使用的图标尺寸。
  • "action"：定义了扩展在浏览器工具栏按钮的行为。default_popup指定了点击按钮后弹出的HTML页面，default_icon设置了按钮图标。
  • "permissions"：声明扩展需要请求的权限数组。我们这个简单扩展不需要任何特殊权限，因此为空。

2.3 编写弹出页面（popup.html）
#

打开 popup.html 文件，输入以下简单的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body {
            width: 300px;
            padding: 20px;
            font-family: Arial, sans-serif;
            text-align: center;
        }
        h1 {
            color: #4285f4; /* 谷歌蓝 */
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Hello, Chrome Extension!</h1>
    <p>恭喜你成功创建了第一个扩展程序！</p>
</body>
</html>

2.4 在Chrome中加载扩展程序
#

现在，我们的第一个扩展程序已经编写完成。接下来将其加载到Chrome中进行测试。

  1. 打开Chrome浏览器，在地址栏输入 chrome://extensions/ 并访问。你也可以通过菜单 更多工具 > 扩展程序 进入。
  2. 打开页面右上角的 “开发者模式” 开关。
  3. 点击左上角出现的 “加载已解压的扩展程序” 按钮。
  4. 在弹出的文件选择器中，找到并选中你刚才创建的 my-first-extension 文件夹。
  5. 点击 “选择文件夹”。

加载成功后，你会在扩展程序列表中看到“我的第一个扩展”，同时浏览器的工具栏（通常位于地址栏右侧）会出现你设置的图标。点击该图标，一个显示着“Hello, Chrome Extension!”的小窗口就会弹出！

恭喜！你已经成功创建并运行了第一个Chrome扩展程序。 如果你在开发过程中遇到浏览器行为异常，可以参考我们的《Chrome浏览器常见问题及解决方法大全》来排查一些通用问题。

三、 深入核心：Manifest V3详解与权限管理
#

谷歌浏览器 三、 深入核心：Manifest V3详解与权限管理

随着你开发更复杂的扩展，深入理解清单文件和权限系统至关重要。

3.1 Manifest V3 的主要变化
#

相较于V2，V3在安全性、隐私性和性能上做了重大改进：

  • 后台脚本变革：V2中使用的是background脚本（持久化页面或脚本），而V3引入了 Service Workers 作为后台脚本。Service Worker 是事件驱动的，在不活动时会被终止，节省了内存和CPU资源。你需要将后台逻辑改写为对事件的监听。
  • 远程代码执行限制：V3禁止远程加载和执行JavaScript、CSS代码（如从CDN拉取），所有代码必须打包在扩展本地，提高了安全性。
  • 权限模型细化：引入了host_permissions（主机权限）来更精确地控制对哪些网站的访问，与API权限（permissions）分离。

3.2 常用配置字段解析
#

除了基础字段，manifest.json中还有一些常用配置：

  • content_scripts: 定义注入到哪些页面的脚本和CSS。 
    "content_scripts": [{
  "matches": ["https://*.example.com/*"],
  "js": ["content-script.js"],
  "css": ["content-style.css"],
  "run_at": "document_end"
}]
  • background: 在V3中定义Service Worker。 
    "background": {
  "service_worker": "service-worker.js"
}
  • options_page 或 options_ui: 定义扩展的设置页面。
  • web_accessible_resources: 声明哪些扩展内的资源（如图片、脚本）可以被网页访问。

3.3 权限（Permissions）申请
#

权限是扩展与浏览器、网页交互的钥匙。必须在manifest.json中预先声明。常见的权限包括：

  • "storage": 使用chrome.storage API本地存储扩展数据。
  • "activeTab": 临时访问当前激活标签页，通常在用户点击扩展图标后生效。
  • "scripting": (V3) 用于动态注入或执行脚本。
  • "host_permissions": 如 ["https://api.github.com/*"]，允许扩展访问特定域下的数据。

最佳实践：遵循“最小权限原则”，只申请完成功能所必需的权限，这能增加用户对扩展的信任度。当需要更高级的权限时，可以考虑使用optional_permissions并在运行时通过chrome.permissions.request API动态请求。

四、 构建一个实用扩展：网页内容高亮器
#

谷歌浏览器 四、 构建一个实用扩展：网页内容高亮器

现在，我们来构建一个更实用的扩展：“简易高亮器”。它的功能是：用户点击扩展图标后，可以输入一个关键词，扩展会将当前网页中所有匹配的文本用黄色背景高亮显示。

4.1 项目结构与清单文件
#

创建新文件夹 text-highlighter，结构如下：

text-highlighter/
├── manifest.json
├── popup.html
├── popup.js
├── content.js      // 内容脚本，负责高亮网页文本
└── icons/          // 存放不同尺寸的图标
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

manifest.json 内容如下：

{
  "manifest_version": 3,
  "name": "简易文本高亮器",
  "version": "1.0",
  "description": "高亮显示当前网页中的指定文本。",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icons/icon16.png"
  },
  "permissions": ["activeTab", "scripting"],
  "host_permissions": ["<all_urls>"]
}

这里我们申请了activeTab和scripting权限，并允许在所有网址(<all_urls>)上运行，以便能操作任何页面的内容。

4.2 编写弹出窗口界面（Popup）
#

popup.html 提供了一个简单的输入框和按钮：

<!DOCTYPE html>
<html>
<head>
    <style>
        body { width: 250px; padding: 15px; }
        input, button { width: 100%; margin-top: 10px; padding: 8px; box-sizing: border-box; }
        button { background-color: #4CAF50; color: white; border: none; cursor: pointer; }
        button:hover { background-color: #45a049; }
    </style>
</head>
<body>
    <h3>文本高亮器</h3>
    <input type="text" id="keyword" placeholder="输入要查找的文本...">
    <button id="highlight">高亮显示</button>
    <button id="clear" style="background-color: #f44336;">清除高亮</button>
    <script src="popup.js"></script>
</body>
</html>

4.3 实现弹出窗口逻辑（Popup.js）
#

popup.js 负责与当前标签页通信，发送高亮或清除指令：

document.getElementById('highlight').addEventListener('click', () => {
  const keyword = document.getElementById('keyword').value.trim();
  if (!keyword) {
    alert('请输入关键词！');
    return;
  }
  
  // 获取当前活动的标签页
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    // 向内容脚本发送消息，传递关键词
    chrome.tabs.sendMessage(tabs[0].id, { action: 'HIGHLIGHT', keyword: keyword });
  });
});

document.getElementById('clear').addEventListener('click', () => {
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    // 向内容脚本发送清除消息
    chrome.tabs.sendMessage(tabs[0].id, { action: 'CLEAR' });
  });
});

4.4 实现内容脚本（Content.js）
#

content.js 是实际在网页中执行高亮操作的脚本。它需要被注入到网页中。我们在manifest.json中通过scripting权限动态注入，因此不需要在content_scripts中静态声明。

注意：在Manifest V3中，更推荐使用scripting.executeScript动态注入内容脚本，除非脚本必须在页面加载早期运行。为了简化，我们修改popup.js的highlight按钮点击事件，使用动态注入：

更新后的 popup.js 部分代码：

document.getElementById('highlight').addEventListener('click', async () => {
  const keyword = document.getElementById('keyword').value.trim();
  if (!keyword) {
    alert('请输入关键词！');
    return;
  }
  
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  
  // 首先尝试执行脚本（如果已注入）
  try {
    await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: highlightText,
      args: [keyword]
    });
  } catch (err) {
    // 如果脚本未注入（例如第一次运行），则先注入再执行
    await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      files: ['content.js']
    });
    // 等待一小段时间确保脚本加载
    setTimeout(async () => {
      await chrome.scripting.executeScript({
        target: { tabId: tab.id },
        func: highlightText,
        args: [keyword]
      });
    }, 50);
  }
});

// 这个函数将被序列化并发送到目标标签页执行
function highlightText(keyword) {
  // 清除旧的高亮
  const oldSpans = document.querySelectorAll('span.chrome-highlight');
  oldSpans.forEach(span => {
    const parent = span.parentNode;
    parent.replaceChild(document.createTextNode(span.textContent), span);
    parent.normalize(); // 合并相邻的文本节点
  });
  
  if (!keyword) return;
  
  const regex = new RegExp(`(${keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
  const walker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_TEXT,
    null,
    false
  );
  
  let node;
  const textNodes = [];
  while (node = walker.nextNode()) {
    if (node.parentNode.nodeName !== 'SCRIPT' && node.parentNode.nodeName !== 'STYLE') {
      textNodes.push(node);
    }
  }
  
  textNodes.forEach(textNode => {
    const content = textNode.textContent;
    if (regex.test(content)) {
      const span = document.createElement('span');
      span.className = 'chrome-highlight';
      span.style.backgroundColor = 'yellow';
      span.style.color = 'black';
      span.textContent = content;
      textNode.parentNode.replaceChild(span, textNode);
    }
  });
}

同时，我们仍然需要一个独立的 content.js 来响应sendMessage的清除操作，并定义清除函数：

// content.js
// 监听来自popup的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'CLEAR') {
    clearHighlights();
    sendResponse({ status: 'CLEARED' });
  }
});

function clearHighlights() {
  const highlights = document.querySelectorAll('span.chrome-highlight');
  highlights.forEach(span => {
    const parent = span.parentNode;
    parent.replaceChild(document.createTextNode(span.textContent), span);
    parent.normalize();
  });
}

// 将highlightText函数暴露给全局，以便popup.js的executeScript调用
window.highlightText = highlightText;
function highlightText(keyword) {
  clearHighlights(); // 先清除旧的
  // ... 同上方的highlightText函数实现 ...
}

这个例子展示了扩展程序各个部分（Popup、Content Script）之间如何使用消息传递（chrome.runtime.sendMessage / chrome.tabs.sendMessage）和API调用（chrome.scripting）进行协作。

五、 调试、打包与发布
#

5.1 调试扩展程序
#

强大的调试能力是Chrome扩展开发的一大优势。

  • 弹出窗口（Popup）：右键点击工具栏中的扩展图标，选择“检查弹出内容”，即可打开针对Popup页面的开发者工具。
  • 后台脚本（Service Worker）：在 chrome://extensions/ 页面，找到你的扩展，点击“service worker”链接（在“详细信息”下），会打开Service Worker的控制台。
  • 内容脚本（Content Script）：内容脚本运行在网页的上下文中。打开你注入脚本的网页，按F12打开开发者工具，在“Sources”面板中，你会在左侧看到一个名为“Content scripts”的目录，里面列出了扩展注入的脚本，可以在此设置断点调试。同时，在“Console”面板中，内容脚本的日志也会显示，但前面会有一个扩展ID的标记。
  • 选项页面（Options Page）：像普通网页一样，可以通过扩展管理页面打开选项页并右键检查。

熟练使用《Chrome浏览器开发者工具使用教程》中介绍的各种技巧，将极大提升你的扩展调试效率。

5.2 打包扩展程序
#

在本地开发和测试完成后，你可能需要将扩展分享给他人或准备发布。

  1. 在 chrome://extensions/ 页面，确保“开发者模式”已打开。
  2. 点击 “打包扩展程序” 按钮。
  3. 在“扩展程序根目录”中选择你的扩展文件夹（如 text-highlighter）。
  4. （可选）如果你有私钥文件（.pem），可以选择它，用于后续更新。如果是第一次打包，留空，Chrome会生成一个新的私钥文件。
  5. 点击 “打包扩展程序”。

打包成功后，会在你的扩展根目录的同级位置生成一个 .crx 文件（扩展程序包）和一个 .pem 文件（私钥，务必妥善保管，丢失后将无法更新此扩展）。.crx 文件可以分发给其他用户，他们可以通过拖拽该文件到 chrome://extensions/ 页面来安装。

5.3 发布到Chrome网上应用店
#

如果你想将扩展公开分发给所有Chrome用户，需要发布到Chrome Web Store。

  1. 准备材料：准备好最终打包的.zip文件（注意，是包含所有源代码的ZIP文件，不是.crx文件）、不同尺寸的推广截图（1280x800或640x400）、一个详细的描述、一个图标（512x512像素）以及准确的分类信息。
  2. 注册开发者账号：访问 Chrome开发者控制台，使用谷歌账号登录并支付一次性5美元的注册费。
  3. 上传与提交：在控制台点击“添加新项目”，上传你的ZIP包，填写所有必填信息，设置合适的权限警告说明。提交后，扩展会进入审核流程。通常需要几天时间。审核通过后，你的扩展就会在商店中上线了！

六、 高级主题与最佳实践
#

当你掌握了基础开发后，以下主题和原则能帮助你构建更健壮、更受欢迎的扩展。

6.1 使用存储API
#

扩展经常需要保存用户设置或数据。不要使用localStorage（在Service Worker中不可用），而应使用Chrome专门提供的chrome.storage API。

  • chrome.storage.sync: 存储的数据会在用户登录的Chrome账号间同步，非常适合保存用户偏好。
  • chrome.storage.local: 数据仅保存在本地设备。
// 保存数据
chrome.storage.sync.set({ theme: 'dark' }, () => {
  console.log('设置已保存');
});
// 读取数据
chrome.storage.sync.get(['theme'], (result) => {
  console.log('当前主题：', result.theme);
});

使用前需要在manifest.json中申请"storage"权限。

6.2 性能与安全最佳实践
#

  • 懒加载与按需注入：仅在需要时才向页面注入内容脚本，避免影响所有页面的性能。
  • 最小化内容脚本的影响：内容脚本应轻量高效，避免执行长时间运行的复杂任务。将复杂逻辑移到Service Worker中。
  • 清理资源：移除不再需要的事件监听器，及时清理添加到DOM中的元素，防止内存泄漏。
  • 处理用户输入：对从Popup或网页接收到的任何输入进行验证和清理，防止XSS攻击。
  • 审查权限：定期检查你的扩展是否过度申请了权限，并考虑将其改为可选权限。

6.3 扩展程序与网页的通信进阶
#

除了简单的消息传递，扩展还可以通过window.postMessage与网页内特定的脚本进行更复杂的通信。同时，也可以利用chrome.runtime.connect建立长期的连接端口（Port），用于频繁的数据交换。

七、 常见问题解答（FAQ）
#

Q1：Manifest V2 和 V3 我该学哪个？ A1：毫无疑问，应该学习 Manifest V3。谷歌已停止接受新的V2扩展上架，并将逐步淘汰现有V2扩展。V3是现在和未来的标准，它更安全、更高效。所有新项目都应基于V3开发。

Q2：我的扩展在本地运行正常，但打包或发布后某些功能失效了，为什么？ A2：最常见的原因是：

  1. 相对路径问题：确保所有文件引用路径在打包后的结构中依然正确。
  2. Content Security Policy (CSP)：V3有更严格的默认CSP。确保你没有违反它，例如尝试内联JavaScript（<script>...</script>）或使用eval()。所有JS代码必须放在独立的.js文件中。
  3. 权限或API调用错误：在Service Worker中无法使用window、document等DOM API，确保代码运行在正确的上下文中。

Q3：如何让我的扩展图标在特定网页上改变颜色或显示徽章（Badge）？ A3：你可以使用 chrome.action API（V3）或 chrome.browserAction API（V2）。例如，在Service Worker中监听标签页更新事件，根据页面URL判断并动态设置图标或徽章文本：

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete' && tab.url) {
    if (tab.url.includes('example.com')) {
      chrome.action.setIcon({ tabId: tabId, path: 'icons/active-icon.png' });
      chrome.action.setBadgeText({ tabId: tabId, text: '!' });
    } else {
      chrome.action.setIcon({ tabId: tabId, path: 'icons/default-icon.png' });
      chrome.action.setBadgeText({ tabId: tabId, text: '' });
    }
  }
});

Q4：扩展程序可以盈利吗？ A4：可以。常见的方式包括：

  1. 付费扩展：在Chrome网上应用店直接设置购买价格。
  2. 内购（In-App Purchases）：扩展提供基础免费功能，高级功能需要付费解锁。
  3. 赞助与捐赠：在扩展描述或界面中添加捐赠链接。
  4. ** affiliate营销**：推广相关产品或服务并获得佣金（需透明告知用户）。

Q5：开发扩展需要特别注意哪些隐私政策要求？ A5：随着数据隐私法规（如GDPR， CCPA）的加强，扩展开发者必须：

  1. 提供清晰、易懂的隐私政策：说明你收集哪些数据、为什么收集、如何存储、与谁分享。
  2. 仅收集必要数据：严格遵守“最小数据收集原则”。
  3. 获取用户同意：对于敏感数据或非必要的数据收集，应在扩展中明确请求用户同意。
  4. 安全地处理数据：对传输和存储的用户数据进行加密保护。强烈建议你参考我们的《谷歌浏览器安全设置完全攻略》来理解浏览器层面的安全机制，并将其理念应用于你的扩展开发中。

结语
#

谷歌浏览器扩展程序开发打开了Web技术应用的一扇新大门。它允许你将Web技术（HTML、CSS、JavaScript）的能力从网页延伸到浏览器本身，创造出能够提升浏览体验、自动化工作流、集成各种服务的强大工具。从本文的“Hello World”到实用的“文本高亮器”，你已走过了从概念理解到实战开发的关键一步。

学习扩展开发的最佳方式就是动手实践。从一个解决你自己痛点的小想法开始，查阅官方文档，利用强大的开发者工具进行调试，并参考社区中的优秀开源项目。随着经验的积累，你将能够驾驭更复杂的API，设计出架构更优雅、体验更流畅的扩展程序。浏览器扩展的世界充满可能，期待你创造出下一个改变无数人上网方式的作品。

本文由谷歌浏览器官网提供，欢迎浏览chrome下载站获取更多资讯信息。

相关文章

Chrome浏览器隐私模式高级使用技巧
·195 字·1 分钟
谷歌浏览器跨设备书签同步指南
·169 字·1 分钟
如何为Chrome浏览器选择最佳主题
·191 字·1 分钟
谷歌浏览器快捷键大全与应用场景
·429 字·3 分钟
谷歌浏览器账号同步功能详解
·239 字·2 分钟
Chrome浏览器开发者工具使用教程
·362 字·2 分钟