WXT浏览器插件开发中文教程(14)----插件API的调用方式

前言

大家好,我是倔强青铜三 。是一名热情的软件工程师,我热衷于分享和传播IT技术,致力于通过我的知识和技能推动技术交流与创新,欢迎关注我,微信公众号:倔强青铜三。欢迎点赞、收藏、关注,一键三连!!!

扩展 API [​](#扩展 API "#extension-apis")

Chrome 文档Firefox 文档

不同浏览器提供了不同的全局变量用于访问扩展 API(Chrome 提供 chrome,Firefox 提供 browser 等)。

WXT 将这两种合并为一个统一的 API,通过 browser 变量访问。

ts 复制代码
import { browser } from 'wxt/browser';
browser.action.onClicked.addListener(() => {
  // ...
});

提示 :启用自动导入后,甚至无需从 wxt/browser 导入此变量!

WXT 提供的 browser 变量是浏览器在运行时提供的 browserchrome 全局变量的简单导出:

mjs 复制代码
export const browser = globalThis.browser?.runtime?.id
  ? globalThis.browser
  : globalThis.chrome;

这意味着你可以使用适用于 MV2 和 MV3 的 Promise 风格 API,并且它可以在所有浏览器(Chromium、Firefox、Safari 等)中工作。

访问类型

所有类型都可以通过 WXT 的 Browser 命名空间访问:

ts 复制代码
import { Browser } from 'wxt/browser';
function handleMessage(message: any, sender: Browser.runtime.MessageSender) {
  // ...
}

使用 webextension-polyfill [​](#使用 webextension-polyfill "#using-webextension-polyfill")

如果你想在导入 browser 时使用 webextension-polyfill,可以通过安装 @wxt-dev/webextension-polyfill 包来实现。

查看其 安装指南 以了解如何开始。

功能检测

根据清单版本、浏览器和权限,某些 API 在运行时可能不可用。如果某个 API 不可用,它将为 undefined

警告 :类型在这里帮不了你。WXT 为 browser 提供的类型假设所有 API 都存在。你需要自行判断某个 API 是否可用。

要检查某个 API 是否可用,可以使用功能检测:

ts 复制代码
if (browser.runtime.onSuspend != null) {
  browser.runtime.onSuspend.addListener(() => {
    // ...
  });
}

在这里,可选链操作符 是你的好帮手:

ts 复制代码
browser.runtime.onSuspend?.addListener(() => {
  // ...
});

或者,如果你想在不同名称下使用类似的 API(以支持 MV2 和 MV3),可以这样做:

ts 复制代码
(browser.action ?? browser.browser_action).onClicked.addListener(() => {
  //
});

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

相关推荐
故事与九14 分钟前
vue3使用vue-pdf-embed实现前端PDF在线预览
前端·vue.js·pdf
小西↬15 分钟前
vite+vue3+websocket处理音频流发送到后端
javascript·websocket·音视频
Mintopia1 小时前
🚀 顶点-面碰撞检测之诗:用牛顿法追寻命运的交点
前端·javascript·计算机图形学
wb1891 小时前
企业WEB应用服务器TOMCAT
运维·前端·笔记·tomcat·云计算
烛阴1 小时前
解锁 Gulp 的潜力:高级技巧与工作流优化
前端·javascript
Entropy-Lee2 小时前
JavaScript 语句和函数
开发语言·前端·javascript
Wcowin3 小时前
MkDocs文档日期插件【推荐】
前端·mkdocs
xw54 小时前
免费的个人网站托管-Cloudflare
服务器·前端
网安Ruler4 小时前
Web开发-PHP应用&Cookie脆弱&Session固定&Token唯一&身份验证&数据库通讯
前端·数据库·网络安全·php·渗透·红队
!win !4 小时前
免费的个人网站托管-Cloudflare
服务器·前端·开发工具