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

谷歌浏览器博客资讯 2026-01-09 29

从零到一构建你的第一个扩展

目录导读

什么是Chrome扩展程序？
开发环境准备与基础结构
核心文件解析：manifest.json详解
构建第一个简单扩展：Hello World
扩展程序核心功能模块
调试与测试方法
发布与分发流程
常见问题与解答

什么是Chrome扩展程序？

谷歌浏览器扩展程序是基于Web技术（HTML、CSS、JavaScript）构建的小型软件程序，用于定制和增强Chrome浏览器的功能，与完整应用程序不同，扩展程序专注于单一特定功能，如广告拦截、密码管理、网页翻译或生产力工具。

谷歌浏览器扩展程序开发入门-第1张图片-谷歌浏览器|丰富扩展生态官方版

扩展程序运行在一个受限制的沙盒环境中，通过Chrome提供的API与浏览器交互，可以修改用户界面、操作网页内容、管理浏览器行为等，根据统计，Chrome网上应用店拥有超过18万个扩展程序，全球用户下载量达数十亿次,展示了扩展生态系统的巨大活力。

开发环境准备与基础结构

开发环境要求：

谷歌浏览器（最新版本）
文本编辑器（VS Code、Sublime Text等）
基础Web开发知识（HTML、CSS、JavaScript）

扩展程序基本结构： 每个Chrome扩展程序都包含以下核心部分：

清单文件 (manifest.json)：扩展的"身份证"，定义基本信息、权限和资源
背景脚本 (background scripts)：扩展的事件处理中心脚本 (content scripts)：注入到网页中与页面交互
用户界面组件：弹出窗口(popup)、选项页面(options)等
静态资源：图标、图片等

核心文件解析：manifest.json详解

manifest.json是每个扩展程序必需的配置文件，采用JSON格式,以下是基本结构：

{
  "manifest_version": 3,
  "name": "我的第一个扩展",
  "version": "1.0.0",
  "description": "这是一个简单的Chrome扩展示例",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon16.png"
  },
  "permissions": [
    "activeTab",
    "storage"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

关键字段说明：

manifest_version：必须为3（最新版本）
permissions：声明扩展需要的API权限
content_scripts：定义注入到哪些页面的脚本
action：配置浏览器工具栏按钮的行为

构建第一个简单扩展：Hello World

让我们创建一个最简单的扩展，在浏览器工具栏添加一个按钮，点击时显示"Hello World"。

步骤1：创建项目文件夹

my-first-extension/
├── manifest.json
├── popup.html
├── popup.js
└── icons/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

步骤2：编写manifest.json

{
  "manifest_version": 3,
  "name": "Hello World扩展",
  "version": "1.0",
  "description": "我的第一个Chrome扩展程序",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "action": {
    "default_popup": "popup.html",
    "default_title": "点击查看Hello World"
  }
}

步骤3：创建popup.html

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      width: 200px;
      padding: 15px;
      font-family: Arial, sans-serif;
    }
    h1 {
      color: #4285f4;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>Hello World!</h1>
  <p>这是我的第一个Chrome扩展</p>
  <script src="popup.js"></script>
</body>
</html>

步骤4：加载扩展到浏览器

打开Chrome，进入扩展管理页面 (chrome://extensions/)
开启"开发者模式"
点击"加载已解压的扩展程序"
选择你的项目文件夹

现在你应该能在浏览器工具栏看到你的扩展图标，点击即可显示Hello World弹窗！

扩展程序核心功能模块

脚本(Content Scripts)**脚本运行在网页上下文中,可以访问和操作DOM：

// content.js
// 改变页面背景色
document.body.style.backgroundColor = "#f0f0f0";
// 查找并修改所有链接
const links = document.querySelectorAll("a");
links.forEach(link => {
  link.style.color = "#4285f4";
});

后台脚本(Background Scripts) 在Manifest V3中，后台脚本被Service Worker取代：

// background.js
// 监听扩展安装事件
chrome.runtime.onInstalled.addListener(() => {
  console.log("扩展已安装");
});
// 监听浏览器标签页更新
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete') {
    console.log(`页面加载完成: ${tab.url}`);
  }
});

存储数据 使用Chrome存储API保存扩展数据：

// 保存数据
chrome.storage.local.set({ key: "value" }, () => {
  console.log("数据已保存");
});
// 读取数据
chrome.storage.local.get(["key"], (result) => {
  console.log("获取的数据:", result.key);
});

调试与测试方法

调试弹出窗口(Popup)

右键点击扩展图标
选择"检查弹出内容"
使用开发者工具进行调试脚本**脚本运行的页面上打开开发者工具
转到"源代码"选项卡脚本"部分找到你的脚本

调试后台脚本(Service Worker)

进入扩展管理页面 (chrome://extensions/)
找到你的扩展，点击"service worker"链接
在新打开的开发者工具中调试

自动化测试 考虑使用以下工具进行自动化测试：

Jest：JavaScript测试框架
Puppeteer：控制Chrome进行端到端测试
Sinon：间谍、存根和模拟库

发布与分发流程

准备发布：

确保扩展符合Chrome网上应用店政策
创建高质量的图标和宣传图片
编写详细的描述和更新说明
准备隐私政策（如果收集用户数据）

打包扩展：

在扩展管理页面点击"打包扩展程序"
选择扩展根目录
生成.crx文件和私钥文件（妥善保管！）

提交到Chrome网上应用店：

访问Chrome开发者控制台
支付一次性注册费（目前为5美元）
上传ZIP格式的扩展包
填写商店列表信息
提交审核（通常需要几天时间）

更新扩展：

更新manifest.json中的版本号
打包新版本
在开发者控制台上传新版本
提交更新审核

常见问题与解答

Q：Manifest V2和V3有什么区别？我应该使用哪个版本？

A：Manifest V3是当前最新版本，相比V2有重大安全性和性能改进，主要区别包括：后台页面被Service Worker取代、更严格的权限模型、远程代码执行限制，新扩展应使用Manifest V3,现有V2扩展需要在2023年6月前迁移到V3。

Q：扩展程序可以访问哪些浏览器API？

A：扩展程序可以通过chrome.* API访问浏览器功能，如tabs（标签页）、storage（存储）、notifications（通知）、bookmarks（书签）等，具体可用API取决于manifest.json中声明的权限,完整API文档可在Chrome开发者网站查看。

Q：如何处理跨域请求(CORS)限制？

A：扩展程序可以通过在manifest.json中声明host权限来绕过CORS限制，但应谨慎使用，更好的做法是使用后台脚本作为代理,或通过内容脚本与页面通信获取数据。

Q：扩展程序有大小限制吗？

A：是的，通过Chrome网上应用店分发的扩展程序包大小限制为200MB，如果扩展需要更大资源,可以考虑使用外部资源或按需加载策略。

Q：如何实现扩展与网页之间的通信？

A：有几种通信方式：1) 内容脚本与后台脚本通过chrome.runtime.sendMessage通信；2) 内容脚本与网页通过window.postMessage通信；3) 使用长连接(chrome.runtime.connect)进行持续通信,选择哪种方式取决于具体需求。

Q：扩展程序会被所有用户自动更新吗？

A：是的，一旦通过Chrome网上应用店发布更新，用户浏览器会自动在后台更新扩展，用户也可以手动禁用自动更新,但大多数用户会使用默认设置。

Q：如何国际化(i18n)我的扩展程序？

A：Chrome扩展支持通过_locales文件夹实现国际化，创建不同语言文件夹，在每个文件夹中放置messages.json文件定义翻译字符串，然后在manifest.json和代码中使用chrome.i18n.getMessage()引用这些字符串。

谷歌浏览器扩展程序开发为开发者提供了一个强大的平台，可以创建工具来增强数百万用户的浏览体验，通过掌握扩展的基本结构、核心API和开发流程，你可以将创意转化为实用的浏览器功能，无论你是想解决个人痛点，还是创建面向大众的产品,扩展开发都是一个值得投入的技能领域。

开始你的扩展开发之旅吧！从简单的"Hello World"开始，逐步添加功能，测试优化，最终与世界分享你的创作，最好的扩展往往源于解决真实存在的问题，所以观察日常浏览中的不便之处,那可能就是你的下一个伟大扩展的起点。

如需进一步学习，请访问我们的扩展开发专题页面/，获取更多教程、示例代码和API参考。

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

本文地址： https://www.nx-google.com.cn/post/8.html