如何打造一个【专属的英语学习浏览器插件】

262 阅读6分钟

还是先说一下为什么有这篇文章。

马上到年底了,要开始立新的一年的flag了,24年还是想系统的提升一下英语水平。

因为现在很多文档都是英文的,比如ai绘画,ai动画,大模型,我那点塑料英语实在是不够看。

所以准备系统的重新学一下,然后多背点单词。

在自己开发之前,也找了一些资料(我都放插件里了,点击可直接跳转)。

也找了个插件(BlueSea),目前好像用不了了。本来是打算克隆下来二次开发的,但是那个项目是用了一些三方的库(因为是压缩文件,我也不知道用的是啥),然后有些功能并不符合我的预期,所以还是自己开发一个。

文章分为3部分,1.如何开始一个插件开发以及调试;2.如何使用vue来搭建页面;3.如何搭建一个专属英语学习插件。

如果你对浏览器插件部分已经比较熟悉了,可以直接跳到后续内容查看。


1.如何开始一个插件开发以及调试

浏览器开发包含3个部分,backgroud,popup,scripts。

image.png

首先所有的配置,均在manifest.json中,这个文件是必需的,有了这个文件才会被认为是一个插件,否则会报错。

1.popup(必需)

其中browser_action,是插件的页面入口,也是必需的,也就是我们点击插件图标,出来的页面。

image.png

这个页面一般命名为popup,这个页面的所有文件,样式,均在popup中。

在弹出的页面上,右键选择检查,可进入开发者模式。

2.backgroud(非必需)

backgroud为插件的后台,主要处理浏览器相关功能。

调试模式,可进入chrome://extensions/页面,点击插件背景页进入。

image.png

3.content_scripts (非必需)

此处的资源,为加载到页面的资源。

比如我打开百度网址,插件会自动在这个网址上,插入js文件,以及css文件。

可通过matches配置哪些地址需要插入,以及插入时机。

content_scripts的调试,只要在当前页面打开开发者模式就行。

有了这些基本认识,我们便能开发一个插件了。

比如这个计算房贷,计算理财收益的插件(github.com/yeshaojun/l…) 只使用了popup,一个html加几个js文件,就是一个插件了。

2.如何使用vue来搭建页面

如果遇到稍微复杂一些的popup页面,用纯原生的方式就太麻烦了。

所以最好还是vue或者react来写。

使用方法有两种,第一种是直接在html引入vue包。

image.png

使用这种方式的话,在manifest.json文件中,需要配置一个content_security_policy属性,否则会因为安全限制,不允许使用在线url。

当然也可以直接下载到本地使用。

第二种方式,就是我们日常开发项目是一样的步骤。

用脚手架也行,自己搭一个也行(我这边是自己搭建的)。

搭建完成之后,启动项目,因为本地vite是启动了一个服务的,资源通过get请求转发到node_modules里。但是popup页面需要一个可访问的html,怎么办呢?

打开vite.config配置文件,将输出目录改为popup,并添加watch关键字,这样一来,当有代码变动时,会自动打包。

这样插件的页面就会实时更新了,这也是我采用的方式。

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.如何搭建一个专属英语学习插件

有了前面的基础知识之后,我们就可以开始搭建插件了。

我们再来看一下项目的目录结构。

image.png

vue_p就是vue的项目,popup是项目打包出来的文件。

scripts是脚本文件,从命名也能看出来。barrage是弹幕功能,common是公共方法,content是主文件,文本选中翻译,review是复习功能。

css是脚本样式。(注意命名,因为是插入当前页面的,有可能改变原本样式)

background就更简单的了,就一个发送翻译接口方法。

我们来理一下部分需求:

1.当前页面鼠标选中文本,可以出翻译结果 2.单词可加入生词本 3.弹幕功能

1.当前页面鼠标选中文本,可以出翻译结果

1.gif

首先鼠标选中,监听mouseup事件,判断是否有选中文本。

    if (window.getSelection()?.toString().length === 0) {
      return;
    }

如果有,就很简单的了,直接调翻译接口。

考虑到接口最好不要出现在当前页面,所以通过chrome.runtime.sendMessage发送一个消息,在background中通过chrome.runtime.onMessage.addListener来监听,并发送接口。

翻译的接口用的是有道智云的接口(同类型的还有百度,讯飞都可以)

参考文档(ai.youdao.com/DOCSIRMA/ht…

翻译完之后,再通过回调函数返回。

翻译结果显示,可通过document.createElement来创建元素,并通过鼠标的位置来计算并展示结果。

ps(如果是本地自己使用,接口都没必要走后端,直接请求有道智云的接口即可,我这里请求后端主要是隐藏一下敏感数据)

2.单词可加入生词本

5.gif 单词的数据并没有存数据库,而是使用chrome.storage.sync来存储。

理由有3点,1.如果用数据库存,则需要额外的接口请求,以及账户信息;2.其他使用者没有那么容易改造;3.我是个人服务器,资源有限。

在使用chrome.storage时需要注意的是,不管是存或者取,均是异步的。

3.弹幕功能

3.gif

在barrage脚本中,因为已经没有ui页面了,所以只能通过动态创建的方式,来操作dom。

可以引入jquery来操作。(我这边是纯原生写的)

思路也很简单,就是取第二步创建的生词本中的单词,依次创建dom元素,并添加动画。

单词加入生词本之后,我们希望有一个复习提醒的机制,所以在弹幕中还额外添加了标记按钮来标记权重,单词权重对应则复习的时间。

4.gif

ps(按钮的事件监听,需在元素创建之后监听,否则会监听不到)

总结一下

插件功能并不复杂,但是涉及的知识面还挺多的。

比如插件开发,插件数据交互,如何集成vue,如何用原生js实现弹幕,复习等功能。

我也是花了好多时间才有了一个可使用的版本。

插件的使用,可以访问github.com/yeshaojun/c…, 之前找的学习资料也在上面。

希望这篇文章对你有所帮助。

如果这篇文章对你有所收获,欢迎点赞评论。