给优快云博客开发 Chrome 插件 - 基础知识【含源码】

本文介绍了Chrome插件的基本概念，详细讲解了manifest文件的结构和字段，通过一个HelloWorld插件的实例，演示了从创建工程、编写配置、添加popup页面到加载和调试插件的完整流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

欢迎来到我的 Chrome 插件系列教程。

简介

通过本文，你将学到 Chrome 插件的基本概念；了解了插件核心 manifast 文件的结构、字段含义；最后，通过一个 hello extension 小插件的开发，学会了整个插件的开发调试流程。

你可以在附件中获取本文中使用的所有源码。

关于 Chrome 插件

Chrome 插件是通过向 Chrome 浏览器中添加特性和功能，增强浏览器用户体验，提供如下功能：

生产工具
内容丰富
信息聚合

当然，你可以在 Chrome 应用商店里获取丰富的插件，自定义 Chrome 功能，以提升自己的 Chrome 使用体验。

Web 基础知识

Chrome 扩展是使用和 web 开发相同的技术：

HTML：负责页面框架机构；
CSS：负责页面样式；
JavaScript：负责脚本和逻辑处理

如果非常熟悉以知识，在接下来的学习过程中将会变得非常简单。

Chrome 插件 API

Chrome 插件除了能够使用 JavaScript API 提供的基础功能，还能使用 Chrome API。这就使得 Chrome 插件功能更加的强大。举几个简单的例子：

更改网站的功能或行为；
允许跨站收集整理用户信息；
向 Chrome 调试工具中添加新功能。

更多的 Chrome 插件能力可以参考这篇文章：Extension development overview

Chrome 插件文件结构

Chrome 插件工程需要根据功能的不同，提供不同的文件，以下是常用文件相关介绍：

Manifest

这是 Chrome 插件最重要的文件。有以下强制要求：

必须以 manifest.json 命名；
必须放在项目根目录中。

在 manifest 文件中记录了核心 metadata、资源声明、权限声明、指定在前台或后台运行的文件。

Service work

监听和处理浏览器事件。可以处理很多事件，例如：打开新页面、移除书签、关闭标签页等。它可以使用所有的 Chrome API，但是不能直接和页面内容进行交互。

Content scripts

Content scripts 可以在页面中执行 JS 脚本。只能够读取和操作注入页面的 DOM，只能使用部分 Chrome API 功能。如果想要使用剩下功能，需要和 Service worker 进行通信。

popup 等其他页面

一个插件可以拥有多个 HTML 文件，比如：popup、options page、其他 HTML 页面。这些页面都可以使用 Chrome API。并不是所有的 Chrome 插件都需要包括 popup 页面，例如接下来教程中的【专注模式】插件和【阅读时间】插件就不需要。

Chrome 插件项目结构示例：

.
├── background.js
├── button.css
├── images
│   ├── get_started128.png
│   ├── get_started16.png
│   ├── get_started32.png
│   └── get_started48.png
├── manifest.json
├── options.html
├── options.js
├── popup.html
└── popup.js

写一个 Chrome 插件

了解了这么多基础知识，想必你已经迫不及待想要上手尝试一下了。接下来我们以一个 hello world 级别的 Chrome 插件为例，带你了解插件开发、运行、调试整套流程吧。

完整 Chrome 插件代码可以在附件中下载

创建工程

新建工程目录

$ mkdir hello-extension && cd hello-extension

创建并修改配置文件

创建 manifest 文件

在当前目录下创建 manifest 文件，并填入以下内容：

{
  "manifest_version": 3,
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

字段说明

manifest_version：指定插件使用的基础库版本，当前是最新版。不建议使用 v2 版本。
name：插件名称；
description：插件描述信息；
verision：当前插件开发版本。自定义即可；
action：定义了插件使用的图标，已经图标点击之后应该显示的页面；

创建并修改 popup

添加 popup 页面内容

在 hello.html 中添加如下内容：

<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>

加载插件

在 Chrome 中加载未打包插件

打开 chrome://extensions 页面；
打开【开发者模式】开关
点击【加载已解压扩展程序】按钮，导入刚刚编写的插件

如图：

在这里插入图片描述

至此 hello extensions 插件已经加载完成，你将看到如下效果：
在这里插入图片描述

调试插件

创建 hello.js 文件，并添加如下内容：

console.log('hello popup!');

修改 hello.html 文件，如下：

<html>
  <body>
    <h1>Hello Extensions</h1>
    <script src="popup.js"></script>
  </body>
</html>

点击插件按钮，对弹出层右键打开调试控制台，如图操作：

在这里插入图片描述

此时，你将在 Console 中看到 hello popup 输出。

在这里插入图片描述

查看出错信息

如果我们的插件在运行过程中出现报错，可以在 Chrome 插件管理页面进行查看，如图所示：

在这里插入图片描述

总结

通过本文我们了解到了 Chrome 插件的基本概念；了解了插件核心 manifast 文件的结构、字段含义；通过一个 hello extension 小插件的开发，学会了整个插件的开发调试流程。

以上就是本文所有内容了，希望对你有所帮助。在接下来的教程中我们会进入到本次实战的核心内容，为优快云写 Chrome 插件，你将学到更多有用的插件开发技巧。

如果你喜欢本文，也请务必点赞、收藏、评论、转发，这会对我有非常大的帮助。请我喝杯冰可乐也是极好的！

未完结，欢迎持续关注。

给 优快云 博客开发 Chrome 插件 - 基础知识【含源码】

简介

关于 Chrome 插件

Web 基础知识

Chrome 插件 API

Chrome 插件文件结构

写一个 Chrome 插件

创建工程

创建并修改配置文件

创建并修改 popup

加载插件

调试插件

总结

附件：给 优快云 博客开发 Chrome 插件-基础知识-源码

给优快云博客开发 Chrome 插件 - 基础知识【含源码】

附件：给优快云博客开发 Chrome 插件-基础知识-源码