使用wxt开发跨浏览器插件

一、背景

在使用@crxjs/vite-plugin一段时间后，开发发了welibrary等图书馆插件，为了进一步推广插件计划支持Chrome、Edge浏览器之外的Firefox，为此耗费了不少时间用于调整配置，初步结论如下，

1）Firefox对mv2版本支持更多，mv3版本有诸多限制，@crxjs/vite-plugin等工具打包后的产物可能无法运行

2）虽然Firefox支持chrome全局变量，但是使用webextension-polyfill支持跨浏览器更加顺畅
二、选择新框架

无意中发现了wxt.dev，它的看法和我调研后两个结论如此接近，而且它还是battery ready形式的设计。

通过约定代码组织形式，然后解析生成manifest.json这点就别出新意，业务代码和配置功能融合一体，更加模块化，约定大于配置实际上就对开发人员减负不少。

还有多入口的理解，这是其他浏览器插件没有做到的，可以看出作者对浏览器插件架构的设计有深刻的理解。

还有type-safety, auto-import，甚至还对storage进行了重新设计，最后当然是不同浏览器的debug和打包功能了，这些这个框架都支持得很丝滑。

三、开发过程

结合官网的文档，https://wxt.dev

pnpx wxt@latest init <project-name>
然后选择vue和pnpm选项

生成的样板代码如下，

<rootDir>
├─src/
│  └─ entries/
│     ├─ background.ts
│     └─ ...
└─wxt.config.ts

3.1开发content scripts

按照官网推荐的目录组织不做改动，在entrypoints新建xxx.content.ts，比如entrypoints/csdn.content.ts

import { createApp } from'vue'
importAppfrom'./components/Trojan.vue'
exportdefaultdefineContentScript({
matches: ['https://*.blog.csdn.net/**'],
main() {
   constel = document.createElement('div')
   document.body.append(el)
   createApp(App).mount(el)
 },
})

这个做法最终产生的内容包含一段manifest.json的配置，

Content_scripts: [
{"matches":["https://*.blog.csdn.net/**"],"css":["content-scripts/csdn.css"],"js":["content-scripts/csdn.js"]}]

在Vue文件里面的内容就和普通的Vue开发没有什么区别了。

除了defineContentScript还有defineBackground

3.2 调整manifest配置

如果在整个插件项目中使用到了storage权限，但是从xxx.content.ts等入口文件中又没有看到可以配置的，这个时候就需要调整wxt.config.ts配置了，

export default defineConfig({
manifest: {
permissions: ['storage', 'tabs'],
},
});

如果要支持mv3和mv2，涉及web_accessible_resources、host_permissions到等属性时要特殊处理下，建议使用

manifest: ({ manifestVersion }) => ({}) function配置形式，

1）web_accessible_resources

在mv3中web_accessible_resources的结构，

[
  
        {
          resources: ['*.png', '*.svg'],  
          matches: ['<all_urls>'],
  
        },
  
      ]

在mv2中结构是['.png', '.svg']

2）host_permissions

在mv2中没有host_permissions，所以必须合并到permissions的末尾。

3）还要update_url

这个是为了支持Firefox插件的要求，举例，

update_url:'https://honwhy.wang/projects/',

四、前端工程化增强

这个框架还有缺少关于eslint和格式化等配置，在此做些补充。

在我同事的推荐之下，参考这篇文章，https://antfu.me/posts/why-not-prettier，最终的配置很简单

pnpm add @antfu/eslint-config -D
新增<rootDir>/eslint.config.js配置文件，

importantfufrom'@antfu/eslint-config'
exportdefaultantfu({
//
customizations
rules: { 'no-console':'off' },
})

另外为了解决css格式等问题，建议在vscode中安装Prettier，在工程中配置.editorconfig搭配使用，<rootDir>/.editorconfig

# EditorConfig
helps developers define and maintain consistent
# coding styles
between different editors and IDEs
#
editorconfig.org
root = true
[*]
# Change these
settings to your own preference
indent_style = space
indent_size = 2
# I recommend
you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 80
[*.md]
trim_trailing_whitespace = false

调整package.json

“scripts” {
   "lint": "eslint .",
   "lint:fix": "eslint .--fix"
}

最终整体目录

附录

[1]wxt.dev, https://wxt.dev

[2] Why I don't use Prettier, https://antfu.me/posts/why-not-prettier