从零开始：你的第一个浏览器插件 (一) - 基础概念与 manifest.json

qq_997383

已于 2025-04-26 11:39:26 修改

阅读量924

点赞数 23

文章标签： json 浏览器插件前端 js

于 2025-04-26 11:28:08 首次发布

本文链接：https://blog.csdn.net/qq_33217812/article/details/147529136

版权

欢迎来到浏览器插件开发的世界！本系列教程将带你一步步创建一个实用的 Chrome/Edge 浏览器插件，最终目标是实现一个可以解除网页复制和右键限制的工具。在本篇（第一部分）中，我们将了解插件的基本构成，并搭建起项目的骨架。

什么是浏览器插件？

简单来说，浏览器插件（Browser Extension）就是一些小的软件程序，可以修改和增强你的浏览器的功能。它们使用标准的 Web 技术（HTML, CSS, JavaScript）编写，并可以通过浏览器提供的特殊 API 与浏览器本身进行交互。

准备工作

浏览器: Google Chrome 或 Microsoft Edge (基于 Chromium)。
文本编辑器: 任何你喜欢的代码编辑器，如 VS Code, Sublime Text, Atom 等。
一点耐心: 编程总会遇到问题，保持耐心很重要！

核心文件：manifest.json

每个浏览器插件都必须有一个名为 manifest.json 的文件。它是插件的蓝图和入口点，告诉浏览器关于插件的所有关键信息，例如：

插件的名称、版本、描述。
需要哪些权限才能工作。
插件图标放在哪里。
点击工具栏图标时应该弹出哪个 HTML 页面。
需要在哪些网页上运行哪些脚本。

创建项目结构

首先，创建一个名为 copy-unblocker 的文件夹，这将是我们的项目根目录。然后在里面创建以下文件和文件夹：

copy-unblocker/
├── manifest.json       # 插件的核心配置文件
├── icons/              # 存放插件图标的文件夹
│   ├── icon16.png      # 16x16 像素图标 (工具栏)
│   ├── icon48.png      # 48x48 像素图标 (扩展管理页)
│   └── icon128.png     # 128x128 像素图标 (安装/商店)
└── popup.html          # 点击工具栏图标时弹出的窗口页面

编写 manifest.json (v1 - 包含基础和国际化占位符)

现在，打开你的文本编辑器，在 copy-unblocker 文件夹中创建 manifest.json 文件，并填入以下内容。我们会逐步解释其中的关键字段：

{
  "manifest_version": 3,
  "name": "__MSG_extensionName__", // 使用 i18n 键名
  "version": "1.0.0", // 初始版本号
  "description": "__MSG_extensionDescription__", // 使用 i18n 键名
  "default_locale": "en", // 默认语言为英文
  "author": "Brian <bianqiang@gmail.com>", // 作者信息
  "permissions": [
    "scripting",     // 允许执行脚本到页面
    "activeTab",     // 允许访问当前激活标签页的信息 (未来用于精确控制) - 虽然我们后面用了 storage，但保留它通常无害
    "storage"        // 允许使用 chrome.storage API 来保存设置
  ],
  "action": {
    "default_popup": "popup.html", // 指定弹出窗口页面
    "default_icon": {             // 指定不同尺寸的默认图标
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    },
    "default_title": "__MSG_extensionName__" // 鼠标悬停在图标上时显示的标题
  },
  "icons": { // 定义插件在不同场合显示的图标
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "background": { // 后台服务工作线程配置 (Part 3 会用到)
    "service_worker": "background.js"
  },
   "content_scripts": [ // 内容脚本配置 (Part 2 会用到)
    {
      "matches": ["<all_urls>"],       // 在所有 http/https 页面尝试运行
      "js": ["content_script.js"],    // 要注入的 JS 文件
      "run_at": "document_start",     // 尽可能早地运行脚本
      "all_frames": true              // 在所有 frame 中运行 (如 iframe)
    }
  ]
}

关键字段解释:

manifest_version: 必须是 3，这是 Chrome 要求的最新版本。
name, description, default_title: 插件的名称、描述和工具栏提示。我们使用了 __MSG_keyName__ 格式，这表示这些文本将通过国际化（i18n）机制来显示，我们将在第三部分详细介绍。
version: 插件的版本号，通常遵循 主版本.次版本.修订号 格式。
default_locale: 指定默认语言，当用户的浏览器语言没有对应的翻译时使用。
author: (可选) 插件作者信息。
permissions: 插件需要向用户申请的权限列表。这是非常重要且敏感的部分。
- scripting: 允许插件向网页注入和执行脚本（这是我们解除限制的核心）。
- activeTab: 允许插件临时访问用户当前正在交互的标签页（虽然我们最终用了 storage，但这是一个常见的权限）。
- storage: 允许插件使用 chrome.storage API 来存储数据（用于保存用户设置）。
action: 定义了用户与浏览器工具栏上插件图标交互时的行为。
- default_popup: 指定点击图标时弹出的 HTML 文件。
- default_icon: 指定工具栏图标。
icons: 定义插件在不同地方（如扩展管理页、安装时）显示的图标。
background: 配置后台脚本，用于处理一些长期运行或监听浏览器事件的任务（我们暂时留空对应的 JS 文件）。
content_scripts: 定义需要注入到网页中运行的脚本。
- matches: 指定在哪些 URL 模式的页面上注入脚本。<all_urls> 表示所有 http 和 https 页面。
- js: 要注入的 JavaScript 文件列表。
- run_at: 指定脚本注入的时机。document_start 表示在 DOM 构建完成之前、页面脚本运行之前注入，这对于尽早移除限制很重要。
- all_frames: 是否在页面内的所有 <iframe> 中也注入脚本。

准备图标和弹出页面

图标: 在 icons 文件夹中放入三个 PNG 图标文件：icon16.png, icon48.png, icon128.png。现在可以用任何占位符图片代替，重要的是要有这三个文件。
弹出页面 (popup.html): 创建一个简单的 HTML 文件 popup.html：

<!DOCTYPE html>
<html>
<head>
  <title>Placeholder</title>
  <meta charset="UTF-8">
  <style>body { width: 150px; height: 50px; text-align: center; }</style>
</head>
<body>
  <h1>插件骨架</h1>
</body>
</html>

加载你的第一个插件

现在，激动人心的时刻到了！让我们把这个骨架加载到浏览器中：