开发OneNav浏览器扩展：我的经验分享

最近我们发布了OneNav浏览器扩展版本，这也是第二次重构后的版本，期间遇到了一些技术难点，不过最后得以解决，所以打算用这篇文章分享xiaoz在开发OneNav浏览器扩展中用到的技术和经验。

关于OneNav

OneNav是一款开源免费的书签（导航）管理程序，由xiaoz使用使用PHP + SQLite 3开发，界面简洁，安装简单，使用方便。OneNav可帮助你你将浏览器书签集中式管理，解决跨设备、跨平台、跨浏览器之间同步和访问困难问题，做到一处部署，随处访问。

还不了解OneNav的朋友可以参考这篇文章： 一篇文章带你快速了解开源免费的书签（导航）管理程序OneNav

两次重构与技术选型

OneNav浏览器扩展是发布以来的第三个版本，期间经历了两次重构。

第一个版本

首次重构

第二个版本进行了重构，使用“Vue3 + vitesse-webext + Vant 4”这样的技术组合，实际上线后发现存在以下问题：

最后不得不放弃“vitesse-webext + Vant 4”这样的方案。

二次重构

第三个版本，也就是现在的版本，再次进行了重构，这次采用的技术方案是“Vue3 ++ Element Plus”，WXT是下一代Web扩展框架，优点在于他可以通过一套代码编译出适用于Chrome/Firefox/Safari浏览器的扩展。这一点特性显得尤为重要，不然每个浏览器都去单独开发和适配，工作量属实不小。

在使用 vitesse-webext 方案的时候遇到了Firefox编译问题，而在中编译上非常轻松，不同的浏览器都顺利通过编译。

WXT开发浏览器扩展的一些经验

在实际使用WXT开发过程中并不是那么顺利，期间也遇到了不少问题，不过最后得以解决，于是整理了下面的经验。

编译代码

WXT默认编译的是Chrome扩展，直接使用命令：进行编译，编译后的目录在 .output/chrome-mv3 ，如果需要编译Firefox扩展，只需要加上参数即可：

# WXT编译Firefox扩展
pnpm build --browser firefox --mv3

Firefox默认使用的版本，为了避免后续升级问题，我直接添加了参数来指定最新的版本。

同理，如果需要编译Edge扩展，使用下面的命令：

pnpm build --browser edge

本来xiaoz还打算支持Safari，奈何苹果过于封闭，没找到Safari安装第三方扩展的方法，导致无法调试，于是不得不放弃支持Safari浏览器。

WXT在Firefox中遇到的问题

在我编译Firefox扩展后，打算在Firefox下进行调试，发现Firefox无法安装第三方扩展，会提示“此附加组件无法安装，因为它未通过验证”，可以直接参考这篇文章《 Firefox提示“此附加组件无法安装，因为它未通过验证”解决办法 》进行解决。

Firefox浏览器扩展必须在 manifest.json 中指定ID，否则安装和上架的时候会提示ID不存在，导致无法安装。我找遍了WXT文档，并没有发现关于Firefox ID的指示，于是我是编译后手动修改 manifest.json ，添加了下面的内容来指定ID：

"applications": {"gecko": {"id": "oneNav@example.com"}}

之所以Firefox扩展需要ID，ChatGPT是这样解释的：

Chrome浏览器不需要这个ID，否则会出现警告提示（不影响扩展运行）！！！

上架浏览器扩展

目前xiaoz已将OneNav浏览器扩展分别上架到了 Google.com/detail/onenav/omlkjgkogkfpjbdigianpdbjncdchdco?utm_source=ext_app_menu" target="_blank"> Chrome WEB Store / Firefox ADD-ONS 以及Microsoft-Edge-Extensions，不过Microsoft-Edge-Extensions还在审核中，Chrome和Firefox已经上架。

Chrome/Edge/Firefox分别对应的开发者平台如下：

其中Chrome需要支付的一次性开发者费用，而Edge和Firefox则是免费的，不需要任何费用即可提交您的扩展。提交扩展时根据平台的规则指示操作即可，有以下几个地方需要注意：

给我的感受是Chrome平台最规范，最严格，每一个扩展权限开发者都必须做出明确的解释为什么要用到这个权限，而Edge和Firefox则要宽松很多。

辅助工具

开发过程中，xiaoz就用到了一个第三方辅助工具，是用来生成不同尺寸的扩展图标，地址是： Chrome Extension Icon Generator

结语

以上就是xiaoz在开发OneNav浏览器扩展的一些心得和经验分享，希望对各位开发者有所帮助。如果您打算支持多个浏览器，强烈推荐试一下这个下一代Web扩展框架，能提高不少效率。

另外我创建了一个浏览器扩展开发的交流群，有兴趣的朋友可以微信扫码加入。

如何开发Chrome浏览器扩展程序

先进入chrome 网上应用店，进入方法有多种，可以直接在浏览器地址栏输入应用店的地址或者点击“设置”→“扩展程序”→“安装扩展程序”

Chrome扩展开发入门 2.怎样使用Chrome Extensions API

Google提供的Chrome Extensions API是开发Chrome扩展用到的最权威资料之一，里面详细介绍Chrome扩展所能够实现的各方面的功能和Chrome浏览器所提供的接口（比如怎么调用用户书签）。 使用步骤如下：1. 后台HTML里的JS在浏览器被打开时就开始执行了，当浏览器关闭时停止工作。 你可以在这里写一些代码监视浏览器动作（比如在监视到用户创建了一个新标签页时邪恶的把它关闭,可以做定时任务（setInterval等），可以添加一段音乐。 2. 用户点击扩展栏图标时可以弹出一个页面，当用户点击网页部分时这个页面就被关闭了。 3. 可以使用js获取用户当前网页的DOM数据，监听用户键盘、鼠标动作。 这些代码是一个独立的JS文件（而不是像后台、弹出窗等是一个HTML文件里的嵌入js代码），通过扩展配置注入到相应的网页。 4. 读取用户计算机数据（NPAPI Plugins）。 这个功能要用到dll（动态链接库）知识，可以启动用户电脑的程序，删除用户文件等功能。 相当于一个小Windows程序。 利用Chrome提供的方法可以让扩展的后台页面与你的dll通信。

如何开发360浏览器插件

1、我们先创建一个文件夹，名字随便取2、然后在该文件夹下，创建一个文本文件，命名为，其内容为{ manifest_version: 2, name: One-click Kittens, description: This extension demonstrates a browser action with kittens., version: 1.0, permissions: [], browser_action: { default_icon: , default_popup: }}3、然后在创建一个名为的文本文件，再找一张图片，名为作为插件的图标。 4、在里的内容就是我们点击插件后显示的 内容，我在文件里面的 代码是

Wow!Handsome!

上一篇：推荐一个适合NAS部署的私有相册软件MTPhoto

下一篇：阿里云创业者计划申请攻略，通过后可获得最低