前言
大家好,我是倔强青铜三 。是一名热情的软件工程师,我热衷于分享和传播IT技术,致力于通过我的知识和技能推动技术交流与创新,欢迎关注我,微信公众号:倔强青铜三。欢迎点赞、收藏、关注,一键三连!!!
针对不同浏览器进行构建
使用 WXT 构建扩展程序时,您可以创建多个构建版本,针对不同的浏览器和清单版本。
针对特定浏览器
使用 -b
命令行标志为特定浏览器创建独立的扩展构建。默认情况下,目标浏览器是 chrome
。
sh
wxt # 等同于:wxt -b chrome
wxt -b firefox
wxt -b custom
在开发过程中,如果您针对 Firefox,Firefox 将会打开。其他字符串默认会打开 Chrome。要自定义打开的浏览器,请参阅 设置浏览器二进制文件。
此外,WXT 定义了一些您可以在运行时使用的常量,以检测正在使用的浏览器:
ts
if (import.meta.env.BROWSER === 'firefox') {
console.log('仅在 Firefox 构建中执行某些操作');
}
if (import.meta.env.FIREFOX) {
// 简写形式,等同于上述 if 语句
}
更多详情请参阅 内置环境变量。
针对特定清单版本
要针对特定的清单版本,请使用 --mv2
或 --mv3
命令行标志。
默认清单版本
默认情况下,WXT 会针对 Safari 和 Firefox 使用 MV2,针对其他所有浏览器使用 MV3。
与浏览器类似,您可以通过 内置环境变量 在运行时获取目标清单版本:
ts
if (import.meta.env.MANIFEST_VERSION === 2) {
console.log('仅在 MV2 构建中执行某些操作');
}
过滤入口点
每个入口点都可以通过 include
和 exclude
选项在针对特定浏览器时包含或排除。
以下是一些示例:
-
仅在针对
firefox
时构建的内容脚本:tsexport default defineContentScript({ include: ['firefox'], main(ctx) { // ... }, });
-
仅在非
chrome
目标中构建的 HTML 文件:html<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="manifest.exclude" content="['chrome', ...]" /> </head> <body> <!-- ... --> </body> </html>
或者,您也可以使用 filterEntrypoints
配置来列出您想要构建的所有入口点。
最后感谢阅读!欢迎关注我,微信公众号 :
倔强青铜三
。欢迎点赞
、收藏
、关注
,一键三连!!!