老罗语录-老罗爱折腾：老罗专属Chrome浏览器扩展程序插件准备中

2026 年 1 月 14 日 21:43:23老罗日记评论16阅读模式

起心动念

老罗自从工作需要完成大量数据抓取，对爬虫，AI网页爬虫和网页自动化Agent等技术需求增大，高效工作谁都爱。今天体验了浏览器插件《Thunderbit：AI网页爬虫和网页自动化Agent》之后，根据自己日常需求，尝试开始用Trae CN编程基于Chrome浏览器的扩展程序插件。

老罗插件开发进度

尝试了基于Microsoft Edge的扩展程序之后，出现错误，尝试了Chrome浏览器非常顺利。给Trae CN输入下面的二步提示词就完成了上图的效果，后面只需要填充详细功能实现。

基于Chrome浏览器的扩展程序插件

第一步实现：点击图标，Chrome在侧边栏打开【已实现】

第二步实现：工具栏菜单实现 点击获取，获取当前访问网页的内容，提取网址、网站名称、description、keywords 在前端展示，点击保存按钮保存

Chrome 浏览器插件开发流程参考

你想要了解 Chrome 扩展程序的完整开发流程，我会从核心基础、分步开发、调试、打包发布四个维度，为你梳理一套清晰、可落地的开发流程，覆盖从入门到上线的全环节。

一、核心基础认知

Chrome 扩展（Chrome Extension）是基于HTML、CSS、JavaScript前端技术栈开发的轻量应用，无需学习额外编程语言，核心依赖一个名为manifest.json的配置文件（扩展的 "灵魂"，用于声明扩展的所有属性、权限、资源等）。

目前 Chrome 扩展主流使用Manifest V3（推荐，安全性更高、性能更优，是 Chrome 官方主推版本，Manifest V2 已逐步被弃用），以下流程均基于 Manifest V3。

二、分步开发流程（核心环节）

步骤 1：搭建项目目录结构

步骤 2：编写核心配置文件 manifest.json

manifest.json是 JSON 格式文件，必须声明manifest_version（指定 V3）、name（扩展名称）、version（版本号）、icons（图标）等必填项，其他配置按需添加。

{
  "manifest_version": 3,  // 必须指定为3（Manifest V3）
  "name": "我的第一个Chrome扩展",  // 扩展名称（自定义）
  "version": "1.0.0",  // 版本号（遵循语义化版本，如x.y.z）
  "description": "Chrome扩展开发入门示例",  // 扩展描述（可选）
  "icons": {  // 图标配置，对应icons目录下的文件
    "16": "icons/16.png",
    "48": "icons/48.png",
    "128": "icons/128.png"
  },
  // 弹出窗口配置（点击扩展图标触发）
  "action": {
    "default_popup": "popup/popup.html",  // 指定popup页面入口
    "default_icon": "icons/16.png"  // popup默认图标（可选，可复用上方图标）
  },
  // 后台服务配置（Manifest V3使用service_worker，无DOM访问权限）
  "background": {
    "service_worker": "background/background.js"
  },
  // 权限声明（按需添加，最小权限原则）
  "permissions": [
    "storage",  // 允许扩展使用Chrome本地存储API
    "tabs"      // 允许扩展操作浏览器标签页
  ]
}

步骤 3：编写业务功能代码（以 Popup 页面为例）

扩展的 UI 和交互基于前端技术，这里编写一个简单的 Popup 页面，实现基础展示和交互：

popup/popup.html（页面结构）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的扩展</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <h1>欢迎使用Chrome扩展</h1>
  <button id="testBtn">点击测试</button>
  <script src="popup.js"></script>
</body>
</html>

2.popup/popup.css（简单样式）：

3.popup/popup.js（交互逻辑）：

// 给按钮绑定点击事件
document.getElementById('testBtn').addEventListener('click', () => {
  alert('Chrome扩展测试成功！');
  // 可选：使用Chrome API存储数据（需在manifest.json中声明storage权限）
  chrome.storage.local.set({ testKey: 'testValue' }, () => {
    console.log('数据存储成功');
  });
});

步骤 4：本地加载与调试扩展

编写完基础代码后，需要在 Chrome 浏览器中加载未打包的扩展，进行本地调试，步骤如下：

打开 Chrome 浏览器，在地址栏输入 chrome://extensions/ 并回车，进入扩展管理页面；
开启页面右上角的开发者模式（开关按钮，开启后会出现「加载已解压的扩展程序」「打包扩展程序」等按钮）；
点击「加载已解压的扩展程序」，在弹出的文件选择窗口中，选中你的扩展项目根目录（my-chrome-extension），点击「选择文件夹」；
加载成功后，扩展会出现在扩展列表中，同时 Chrome 浏览器地址栏右侧会出现你的扩展图标；
调试操作：
- 调试 Popup 页面：右键点击地址栏右侧的扩展图标，选择「检查弹出内容」，会打开开发者工具，可像调试普通网页一样调试 HTML、CSS、JS；
- 调试 Background Service Worker：在扩展管理页面，找到你的扩展，点击「服务工作者」对应的「检查」按钮，打开后台脚本的调试工具；
- 修改代码后：大多数修改（如 Popup 页面、CSS、JS）可直接刷新扩展（在扩展列表中，点击你的扩展下方的「刷新」图标），无需重新加载整个扩展；
- 查看日志：在对应的开发者工具「Console」面板中，可查看console.log输出的日志，排查错误。

三、扩展功能进阶（可选）

如果需要实现更复杂的功能（如操作当前网页 DOM、拦截网络请求、添加右键菜单等），可按需添加以下配置和代码：

内容脚本（Content Scripts）：用于访问和修改当前网页的 DOM，需在manifest.json中声明：

"content_scripts": [
  {
    "matches": ["<all_urls>"],  // 匹配所有网页，可自定义（如"https://www.baidu.com/*"）
    "js": ["content/content.js"],  // 内容脚本文件
    "css": ["content/content.css"]  // 内容脚本样式文件（可选）
  }
]

声明更多权限：如webRequest（拦截网络请求）、contextMenus（右键菜单）等，需在manifest.json的permissions中添加；
选项页面（Options Page）：给用户提供扩展配置入口，需在manifest.json中声明"options_page": "options/options.html"。

四、打包与发布（上线 Chrome 应用商店）

当扩展开发调试完成后，如需分享或上线，可进行打包和发布：

步骤 1：本地打包扩展

再次进入 chrome://extensions/ 扩展管理页面（确保开发者模式已开启）；
点击「打包扩展程序」，在弹出的窗口中：
- 「扩展程序根目录」：选中你的扩展项目根目录；
- 「私有密钥文件」：首次打包可留空（Chrome 会自动生成.pem格式的私钥文件，用于后续更新扩展，需妥善保存）；
点击「打包扩展程序」，打包完成后，项目根目录同级会生成两个文件：.crx（扩展安装包，可分发给他人安装）和.pem（私钥文件，后续更新必需）。

步骤 2：上线 Chrome 应用商店（Chrome Web Store）

准备工作：
- 拥有一个Google 开发者账号（需支付一次性 5 美元注册费，用于验证开发者身份）；
- 准备扩展的宣传材料（如 1280×800 的宣传图、扩展详细描述、使用说明等）；
- 确保扩展符合《Chrome Web Store 政策》（无恶意代码、无违规内容、功能可用等）；
访问「Chrome Web Store 开发者控制台」（地址：https://chrome.google.com/webstore/devconsole），登录你的 Google 开发者账号；
点击「添加新项」，上传打包好的.crx文件（或直接上传未打包的项目目录，控制台会自动打包）；
填写扩展的商店信息（名称、描述、分类、宣传图等），确认无误后提交审核；
等待审核（通常几个工作日到几周不等，取决于扩展的复杂度和合规性），审核通过后，扩展会上线到 Chrome 应用商店，可供全球用户搜索和安装。