wxt快速开发浏览器插件

R__J
1,401 阅读4分钟

起因

最近在看一些文章的时候，看到一些好的句子会想记录下来，但是又不想直接收藏整个网页，所以想着能不能只把这一段话添加到类似收藏夹的地方，就产生了开发一个浏览器插件的想法。

开发过程

  1. vscode插件 Chrome Extension Developer Tools

    刚开始使用了在vscode的扩展商店里下载了这个插件，使用方式也很简单，安装完后直接ctrl+shift+p，然后输入这个命令就行了。

image.png

运行这个命令后，会出现这样一个界面，简单配置一下你，这里注意一下Extension Type，这个是你要开发的插件类型，一般类型有下面几种

  • Popup，弹出窗口，这个是浏览器右上角，点击插件弹出的小窗口，一般放一些简单的操作
  • Side Panel，侧边栏，这个允许扩展在浏览器窗口侧边显示内容，可以做一些复杂的功能，很多ai插件就是使用这个
  • DevTools，这个是为了开发者工具扩展功能的，Vue DevTools就是使用这个开发的 image.png

点击create后，就开始创建项目了，项目结构很清晰

  • config文件存放webpack打包配置
  • public，存放了一些静态资源，如svg图片，以及popup.html(这个就是插件弹窗的界面了)以及manifest.json（浏览器插件的一些配置，如文件地址，使用权限等等）
  • src中存放项目的主要逻辑
    • background是插件的脚本，运行在整个浏览器插件的生命周期内，一般是用来处理popup和contentScript的的消息通信
    • contentScript这个是运行在网页中的，这个可以获取到当前网页的dom，也可以直接操作dom
    • popup是插件弹出的小窗口中的逻辑，是一个沙箱环境，可以向contentScript发送消息
    • popup.css没什么好说的，就是插件弹窗中的一些样式

image.png

background.js、contentScript.js、popup.js这三者之间都是可以互相通信的

image.png

使用插件来创建项目的弊端就是，默认提供的都是原生操作，如果只是单纯的一些js逻辑，页面不复杂，还是比较推荐这种方式的，一旦ui和一些交互逻辑比较复杂，使用原生开发的复杂度会上升很多，这里我选择了用wxt开发 (Next-gen Web Extension Framework – WXT)

  1. wxt框架

wxt是一个专门开发浏览器插件的框架，支持市面上的主流浏览器，可以直接使用前端框架进行开发：

  • Vue
  • React
  • Vanilla
  • Svelte
  • Solid

按照官网使用脚手架搭建完项目后，基础的项目结构如下，我们主要关注entrypoints和wxt.config.ts

image.png

  • wxt.config.ts是配置插件的地方，框架默认帮我们配置好了一套manifest.json，如果想要自定义，可以自己添加配置，直接在manifest属性中配置
import { defineConfig } from 'wxt';

// See https://wxt.dev/api/config.html
export default defineConfig({
 extensionApi: 'chrome',
 modules: ['@wxt-dev/module-vue'],
 manifest:{
   name:'xxxx',
   side_panel:{
     default_path:'sidepanel.html'
   },
   permissions:[
     'sidePanel',
     'contextMenus', 
     'storage',
     'webRequest'
   ],
   host_permissions: ['https://open.iciba.com/*', '<all_urls>']
 },
});
  • entrypoints是放html，contentScript和background的地方，默认是只有popup文件夹，sidepanel是后来添加的，这里需要给sidepanel单独添加一个html文件，作为侧边栏的界面，这里需要注意sidepanel.ts这个文件是相当于main.ts是sidepanel的入口文件，需要在这里把App挂载到根节点上，剩下的就和开发vue项目一样的，在App.vue中开发我们的界面和逻辑

image.png

image.png

wxt框架提供了打包脚本，我们开发完直接npm run build就可以打包完，然后把文件放到浏览器上运行了，直接运行npm run dev也会打包出一个产物，会放到根目录的.output文件下，在浏览器的扩展中添加一下就可以调试了

结果

开发完的效果

选中一段文字右键，点击插件，会唤起插件，可以选择保存的位置和标题 image.png

image.png

这里的功能和浏览器的收藏夹差不多，点击收藏的内容，会打开一个tab页面，可以查看收藏的内容和网页

image.png

总结

使用wxt开发浏览器插件很快捷，和我们平时使用框架开发前端项目差不多，需要注意一下不同模块之前的通信机制。

avatar
文章
阅读
粉丝