引言
大家好啊，我是前端拿破轮。
作为一个前端工程师，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插件开发过程，欢迎各位读者订阅，希望对你有所帮助。
好了，这篇文章就到这里啦，如果对您有所帮助，欢迎点赞,收藏,分享👍👍👍。您的认可是我更新的最大动力。由于笔者水平有限，难免有疏漏不足之处，欢迎各位大佬评论区指正。
往期推荐✨✨✨
我是前端拿破轮，关注我，一起学习前端知识，我们下期见！