WXT浏览器插件开发中文教程(16)----针对不同浏览器进行构建

前言

大家好,我是倔强青铜三 。是一名热情的软件工程师,我热衷于分享和传播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 构建中执行某些操作');
}

过滤入口点

每个入口点都可以通过 includeexclude 选项在针对特定浏览器时包含或排除。

以下是一些示例:

  • 仅在针对 firefox 时构建的内容脚本:

    ts 复制代码
    export 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 配置来列出您想要构建的所有入口点。

最后感谢阅读!欢迎关注我,微信公众号倔强青铜三。欢迎点赞收藏关注,一键三连!!!

相关推荐
eric*16883 分钟前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
程序员爱钓鱼19 分钟前
Go语言中的反射机制 — 元编程技巧与注意事项
前端·后端·go
GIS之路40 分钟前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
just小千43 分钟前
重学React(二):添加交互
javascript·react.js·交互
烛阴1 小时前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥1 小时前
HTML之表单结构全解析
前端·html
qq_589568101 小时前
element-plus按需自动导入的配置 以及icon图标不显示的问题解决
开发语言·javascript·ecmascript
聪聪的学习笔记1 小时前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er1 小时前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
菌菇汤1 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app