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(() => {
  //
});

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

相关推荐
盛夏绽放1 小时前
jQuery 知识点复习总览
前端·javascript·jquery
胡gh3 小时前
依旧性能优化,如何在浅比较上做文章,memo 满天飞,谁在裸奔?
前端·react.js·面试
大怪v3 小时前
超赞👍!优秀前端佬的电子布洛芬技术网站!
前端·javascript·vue.js
胡gh3 小时前
你一般用哪些状态管理库?别担心,Zustand和Redux就能说个10分钟
前端·面试·node.js
项目題供诗4 小时前
React学习(十二)
javascript·学习·react.js
无羡仙4 小时前
Webpack 背后做了什么?
javascript·webpack
老华带你飞5 小时前
校园交友|基于SprinBoot+vue的校园交友网站(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·校园交友网站
roamingcode5 小时前
Claude Code NPM 包发布命令
前端·npm·node.js·claude·自定义指令·claude code
码哥DFS5 小时前
NPM模块化总结
前端·javascript
灵感__idea5 小时前
JavaScript高级程序设计(第5版):代码整洁之道
前端·javascript·程序员