从零到一开发一个Chrome插件(一)

引言

大家好啊,我是前端拿破轮。

作为一个前端工程师,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直接加载该未打包的扩展了。

  1. 在地址栏中输入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页面是一样的,包括ElementsNetwork等选项卡都是可以正常使用的,在此不再赘述。

TypeScript支持

如果我们在开发过程中想要VSCodeChrome API提示,我们可以安装chrome-types

csharp 复制代码
 pnpm add chrome-types

总结

本文首先介绍了项目的背景和需求,然后分析了Chrome插件开发中的常见概念,包括清单,Service Worker,内容脚本,工具栏操作,侧边栏和DeclarativeNetRequest,接着进行了Hello World的Demo开发,详细介绍了如何在本地开发一个插件,并加载未打包的插件,同时总结了调试方法和TS的支持方法。

本文属于Chrome插件开发专栏,会持续更新拿破轮的Chrome插件开发过程,欢迎各位读者订阅,希望对你有所帮助。

好了,这篇文章就到这里啦,如果对您有所帮助,欢迎点赞,收藏,分享👍👍👍。您的认可是我更新的最大动力。由于笔者水平有限,难免有疏漏不足之处,欢迎各位大佬评论区指正。

往期推荐✨✨✨

我是前端拿破轮,关注我,一起学习前端知识,我们下期见!

相关推荐
allanGold17 小时前
【Chrome 扩展】chrome自动升级后 Switchomega扩展不支持了怎么办
chrome·chrome升级·扩展不兼容·switchomega
柯南952721 小时前
Chrome浏览器插件(Extensions)的原理
前端·chrome
子兮曰21 小时前
🎯 UnoCSS终极速查表:这些原子类让你开发效率翻倍!
前端·css·前端工程化
金金金__21 小时前
浏览器插件开发的大致流程详解~
前端·浏览器
不一样的少年_1 天前
Onion CLI:3秒建项目,10秒出包的Chrome插件开发脚手架神器
前端·vue.js·chrome
BUG收容所所长1 天前
为什么浏览器要有同源策略?跨域问题怎么优雅解决?——一份面向初学者的全流程解读
前端·面试·浏览器
rocksun1 天前
如何使用Enhance构建App:后端优先框架指南
前端·前端框架·前端工程化
红尘客栈22 天前
Shell 编程入门指南:从基础到实战2
前端·chrome
2501_930124702 天前
Linux之Shell编程(三)流程控制
linux·前端·chrome