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

前言

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

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

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

ts 复制代码

import { browser } from 'wxt/browser';
browser.action.onClicked.addListener(() => {
  // ...
});

提示：启用自动导入后，甚至无需从 wxt/browser 导入此变量！

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

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) {
  // ...
}

如果你想在导入 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(() => {
  //
});

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