还是先说一下为什么有这篇文章。
马上到年底了，要开始立新的一年的flag了，24年还是想系统的提升一下英语水平。
因为现在很多文档都是英文的，比如ai绘画，ai动画，大模型，我那点塑料英语实在是不够看。
所以准备系统的重新学一下，然后多背点单词。
在自己开发之前，也找了一些资料（我都放插件里了，点击可直接跳转）。
也找了个插件（BlueSea），目前好像用不了了。本来是打算克隆下来二次开发的，但是那个项目是用了一些三方的库（因为是压缩文件，我也不知道用的是啥），然后有些功能并不符合我的预期，所以还是自己开发一个。
文章分为3部分，1.如何开始一个插件开发以及调试；2.如何使用vue来搭建页面；3.如何搭建一个专属英语学习插件。
如果你对浏览器插件部分已经比较熟悉了，可以直接跳到后续内容查看。
1.如何开始一个插件开发以及调试
浏览器开发包含3个部分，backgroud,popup,scripts。
首先所有的配置，均在manifest.json中，这个文件是必需的，有了这个文件才会被认为是一个插件，否则会报错。
1.popup（必需）
其中browser_action，是插件的页面入口，也是必需的，也就是我们点击插件图标，出来的页面。
这个页面一般命名为popup，这个页面的所有文件，样式，均在popup中。
在弹出的页面上，右键选择检查，可进入开发者模式。
2.backgroud（非必需）
backgroud为插件的后台，主要处理浏览器相关功能。
调试模式，可进入chrome://extensions/页面，点击插件背景页进入。
3.content_scripts （非必需）
此处的资源，为加载到页面的资源。
比如我打开百度网址，插件会自动在这个网址上，插入js文件，以及css文件。
可通过matches配置哪些地址需要插入，以及插入时机。
content_scripts的调试，只要在当前页面打开开发者模式就行。
有了这些基本认识，我们便能开发一个插件了。
比如这个计算房贷，计算理财收益的插件（github.com/yeshaojun/l...) 只使用了popup,一个html加几个js文件，就是一个插件了。
2.如何使用vue来搭建页面
如果遇到稍微复杂一些的popup页面，用纯原生的方式就太麻烦了。
所以最好还是vue或者react来写。
使用方法有两种，第一种是直接在html引入vue包。
使用这种方式的话，在manifest.json文件中，需要配置一个content_security_policy属性，否则会因为安全限制，不允许使用在线url。
当然也可以直接下载到本地使用。
第二种方式，就是我们日常开发项目是一样的步骤。
用脚手架也行，自己搭一个也行（我这边是自己搭建的）。
搭建完成之后，启动项目，因为本地vite是启动了一个服务的，资源通过get请求转发到node_modules里。但是popup页面需要一个可访问的html,怎么办呢？
打开vite.config配置文件，将输出目录改为popup，并添加watch关键字，这样一来，当有代码变动时，会自动打包。
这样插件的页面就会实时更新了，这也是我采用的方式。
php
import { defineConfig } from "vite";
import { fileURLToPath, URL } from "node:url";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": fileURLToPath(new URL("src", import.meta.url)),
},
},
base: "./",
build: {
outDir: "../popup",
watch: {},
},
server: {
hmr: true,
},
});3.如何搭建一个专属英语学习插件
有了前面的基础知识之后，我们就可以开始搭建插件了。
我们再来看一下项目的目录结构。
vue_p就是vue的项目，popup是项目打包出来的文件。
scripts是脚本文件，从命名也能看出来。barrage是弹幕功能，common是公共方法，content是主文件，文本选中翻译，review是复习功能。
css是脚本样式。（注意命名，因为是插入当前页面的，有可能改变原本样式）
background就更简单的了，就一个发送翻译接口方法。
我们来理一下部分需求：
1.当前页面鼠标选中文本，可以出翻译结果 2.单词可加入生词本 3.弹幕功能
1.当前页面鼠标选中文本，可以出翻译结果
首先鼠标选中，监听mouseup事件，判断是否有选中文本。
ini
if (window.getSelection()?.toString().length === 0) {
return;
}如果有，就很简单的了，直接调翻译接口。
考虑到接口最好不要出现在当前页面，所以通过chrome.runtime.sendMessage发送一个消息，在background中通过chrome.runtime.onMessage.addListener来监听，并发送接口。
翻译的接口用的是有道智云的接口（同类型的还有百度，讯飞都可以）
参考文档（ai.youdao.com/DOCSIRMA/ht...
翻译完之后，再通过回调函数返回。
翻译结果显示，可通过document.createElement来创建元素，并通过鼠标的位置来计算并展示结果。
ps(如果是本地自己使用，接口都没必要走后端，直接请求有道智云的接口即可，我这里请求后端主要是隐藏一下敏感数据)
2.单词可加入生词本
单词的数据并没有存数据库，而是使用chrome.storage.sync来存储。
理由有3点，1.如果用数据库存，则需要额外的接口请求，以及账户信息；2.其他使用者没有那么容易改造；3.我是个人服务器，资源有限。
在使用chrome.storage时需要注意的是，不管是存或者取，均是异步的。
3.弹幕功能
在barrage脚本中，因为已经没有ui页面了，所以只能通过动态创建的方式，来操作dom。
可以引入jquery来操作。（我这边是纯原生写的）
思路也很简单，就是取第二步创建的生词本中的单词，依次创建dom元素，并添加动画。
单词加入生词本之后，我们希望有一个复习提醒的机制，所以在弹幕中还额外添加了标记按钮来标记权重，单词权重对应则复习的时间。
ps(按钮的事件监听，需在元素创建之后监听，否则会监听不到)
总结一下
插件功能并不复杂，但是涉及的知识面还挺多的。
比如插件开发，插件数据交互，如何集成vue，如何用原生js实现弹幕，复习等功能。
我也是花了好多时间才有了一个可使用的版本。
插件的使用，可以访问github.com/yeshaojun/c..., 之前找的学习资料也在上面。
希望这篇文章对你有所帮助。
如果这篇文章对你有所收获，欢迎点赞评论。