引言
大家好啊,我是前端拿破轮。
作为一个前端工程师,Chrome在我们的工作中扮演着重要作用。它不仅是前端的主要运行环境,而且是我们代码调试的重要工具,也是平时学习生活使用的重要软件。
在Chrome中有许多优秀的扩展,包括但不限于我们使用的React Devtools
,沉浸式翻译插件
等等。许多扩展极大地拓展了浏览器的能力边界,提高了我们工作和学校的效率。
所以笔者早有开发一个自己的插件的想法,苦于之前一直忙于学习和工作,没有合适的时间,最近忙里偷闲,决定抽出时间来进行这项工作。而且AI的时代浪潮也给浏览器的插件带来了新的生命力。所以笔者决定做一款浏览器端的AI助手插件。
需求分析
暂时先定的需求就睡开发一个浏览器端的AI助手,具有总结网页主要内容,生成摘要功能。后续可以再加入其他功能。
Demo开发
概念认识
首先查看Chrome的官方文档来学习如何创建一个Chrome插件的项目。
这里有一些基础的概念需要我们有所了解。
- 清单:扩展程序的清单是唯一必须具有特定文件名 (即
manifest.json
)的必须文件。它还必须位于扩展程序的根目录中。清单会记录重要元数据,定义资源,声明权限,并确定要在后台和网页上运行哪些文件。 Service Worker
:服务工件在后台运行,并处理浏览器事件,例如移除书签或关闭标签页。他们无法访问DOM,但您可以将其与屏幕外文档结合使用来实现此用例。- 内容脚本:内容脚本会在网页上下文中运行
JavaScript
. - 工具栏操作:在用户点击扩展程序工具栏图标时执行代码,或使用
Action API
显示弹出式窗口。 - 侧边栏:在浏览器侧边栏中显式自定义界面。
DeclarativeNetRequest
:拦截,屏蔽或修改网络请求。
Hello World扩展
参考官方文档来构建最简单的Hello World
扩展程序。
当我们点击扩展工具栏时,会呈现下面的效果:

首先,创建一个新的文件夹用来存储扩展程序的文件。这里以hello-world
为例。
bash
# 创建文件夹
mkdir hello-world
# 进入文件夹
cd hello-world
然后,在该文件夹的根目录创建我们在概念认识 部分提到的清单文件manifest.json
。
json
// manifest.json
{
"name": "Hello Extensionns",
"description": "简单的Hello-world扩展程序",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_popup": "hello.html",
"default_icon": "hello.png"
}
}
然后在根目录创建一个hello.html
文件,并下载一个icon
命名为hello.png
。

xml
<!-- hello.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello Extensions</h1>
</body>
</html>
在目录中保存这些文件之后,就可以使用Chrome直接加载该未打包的扩展了。
-
在地址栏中输入
chrome://extensions
即可前往"扩展程序"页面。- 或者也可以点击"扩展程序"菜单拼图按钮,然后选择菜单底部的管理扩展程序
- 或则点击Chrome菜单,将鼠标悬停到"扩展程序",然后点击管理扩展程序。
在扩展程序页面开启开发者模式 ,点击加载未打包的扩展程序 ,然后选择我们刚才创建的hello-world
文件夹即可。
加载后,扩展程序出现在"所有扩展程序"列表中,并且在扩展程序的工具栏也出现了我们的扩展程序。

点击扩展程序,我们可以看到弹出了我们项目目录中的hello.html
文件的界面。

调试
那在开发扩展程序的过程中如何进行调试呢?
我们可以做一个简单的测试。在hello.html
中加入一段脚本。
xml
<!-- hello.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello Extensions</h1>
<script>
console.log('我是脚本');
</script>
</body>
</html>
我们不能直接在标签页的控制台中去进行调试,因为标签页的控制台对应的是当前页面,而不是我们的扩展程序页面。
所以我们需要在点击我们的扩展后,右击扩展页面,点击检查来得到扩展页面的调试工具。

然后我们在弹出的窗口的控制台会发现报错。

这是内容安全策略(Content Security Policy, CSP)限制导致的。因为Chrome扩展的manifest v3版本制定了CSP的script-src 'self'
,也就是禁止执行内联脚本,只能通过<script src="example.js"></script>
的形式来引用脚本。
我们在根目录下新建一个hello.js
文件并在hello.html
文件中引入,然后重新加载扩展程序,并打开扩展程序的控制台。
arduino
// hello.js
console.log('我是脚本');
xml
<!-- hello.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello Extensions</h1>
<script src="hello.js"></script>
</body>
</html>
我们发现已经可以成功输出了。因为扩展程序有自己独立的窗口,所以其他的调试和我们调试正常的Web页面是一样的,包括
Elements
,Network
等选项卡都是可以正常使用的,在此不再赘述。
TypeScript支持
如果我们在开发过程中想要VSCode
的Chrome API
提示,我们可以安装chrome-types
。
csharp
pnpm add chrome-types
总结
本文首先介绍了项目的背景和需求,然后分析了Chrome插件开发中的常见概念,包括清单,Service Worker
,内容脚本,工具栏操作,侧边栏和DeclarativeNetRequest
,接着进行了Hello World
的Demo开发,详细介绍了如何在本地开发一个插件,并加载未打包的插件,同时总结了调试方法和TS的支持方法。
本文属于Chrome插件开发专栏,会持续更新拿破轮的Chrome插件开发过程,欢迎各位读者订阅,希望对你有所帮助。
好了,这篇文章就到这里啦,如果对您有所帮助,欢迎点赞,收藏,分享👍👍👍。您的认可是我更新的最大动力。由于笔者水平有限,难免有疏漏不足之处,欢迎各位大佬评论区指正。
往期推荐✨✨✨
我是前端拿破轮,关注我,一起学习前端知识,我们下期见!