WXT浏览器插件开发中文教程(15)----资源加载详解

前言

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

资源加载 ​

加载/assets 目录中的资源

在 <srcDir>/assets/ 目录中导入或引用的任何资源都将由 WXT 的打包器处理。

以下是访问它们的方法：

在 JS/TS 中访问 /assets 目录下的文件的方法

import imageUrl from '~/assets/image.png';
const img = document.createElement('img');
img.src = imageUrl;

在 HTML 中访问 /assets 目录下的文件的方法

<!-- 在 HTML 标签中，必须使用相对路径 -->
<img src="../assets/image.png" />

在 CSS 中访问 /assets 目录下的文件的方法

.bg-image {
  background-image: url(~/assets/image.png);
}

在 Vue 中访问 /assets 目录下的文件的方法

<script>
import image from '~/assets/image.png';
</script>
<template>
  <img :src="image" />
</template>

在 JSX 中访问 /assets 目录下的文件的方法

import image from '~/assets/image.png';
<img src={image} />;

/public 目录 [​](#/public 目录 "#public-directory")

<rootDir>/public/ 目录中的文件将被原样复制到输出目录中，不会被 WXT 的打包器处理。

以下是访问它们的方法：

在 JS/TS 中访问 /public 目录下的文件的方法

import imageUrl from '/image.png';
const img = document.createElement('img');
img.src = imageUrl;

在 HTML 中访问 /public 目录下的文件的方法

<img src="/image.png" />

在 CSS 中访问 /public 目录下的文件的方法

.bg-image {
  background-image: url(/image.png);
}

在 Vue 中访问 /public 目录下的文件的方法

<template>
  <img src="/image.png" />
</template>

在 JSX 中访问 /public 目录下的文件的方法

<img src="/image.png" />

警告

默认情况下，public/ 目录中的资源 无法 在内容脚本中访问。要在内容脚本中使用公共资源，必须将其添加到清单的 web_accessible_resources 数组 中。

在内容脚本中加载资源 ​

内容脚本中的资源稍有不同。默认情况下，当你导入一个资源时，它只返回资源的路径。这是因为 Vite 假设你正在从相同的主机名加载资源。

但是，在内容脚本中，主机名是当前标签页设置的主机名。因此，如果你尝试手动加载资源，或者将其作为 <img> 的 src 属性加载，它将从标签页的网站加载，而不是从你的扩展程序加载。

要解决这个问题，你需要使用 browser.runtime.getURL 将图片转换为完整的 URL：

entrypoints/content.ts

import iconUrl from '/icon/128.png';
export default defineContentScript({
  matches: ['*://*.google.com/*'],
  main() {
    console.log(iconUrl); // "/icon/128.png"
    console.log(browser.runtime.getURL(iconUrl)); // "chrome-extension://<id>/icon/128.png"
  },
});

加载WASM文件 ​

.wasm 文件的加载方式因包而异，但大多数遵循基本设置：使用 JS API 加载并执行 .wasm 文件。

对于扩展程序来说，这意味着两件事：

1. .wasm 文件需要存在于输出目录中，以便可以加载它。
2. 你需要导入加载和初始化 .wasm 文件的 JS API，通常由 NPM 包提供。

以一个例子来说，假设你的内容脚本需要将 TS 代码解析为 AST。我们将使用 @oxc-parser/wasm 来完成它！

首先，我们需要将 .wasm 文件复制到输出目录中。我们将通过一个 WXT 模块 来完成：

// modules/oxc-parser-wasm.ts
import { resolve } from 'node:path';
export default defineWxtModule((wxt) => {
  wxt.hook('build:publicAssets', (_, assets) => {
    assets.push({
      absoluteSrc: resolve(
        'node_modules/@oxc-parser/wasm/web/oxc_parser_wasm_bg.wasm',
      ),
      relativeDest: 'oxc_parser_wasm_bg.wasm',
    });
  });
});

运行 wxt build，你应该会看到 WASM 文件被复制到你的 .output/chrome-mv3 文件夹中！

接下来，由于这是在内容脚本中，并且我们将通过网络加载 WASM 文件，因此需要将文件添加到 web_accessible_resources 中：

wxt.config.ts

export default defineConfig({
  manifest: {
    web_accessible_resources: [
      {
        // 我们将在内容脚本中使用此匹配规则
        matches: ['*://*.github.com/*'],
        // 使用与 WXT 模块中 `relativeDest` 相同的路径
        resources: ['/oxc_parser_wasm_bg.wasm'],
      },
    ],
  },
});

最后，我们需要在内容脚本中加载并初始化 .wasm 文件以使用它：

entrypoints/content.ts

import initWasm, { parseSync } from '@oxc-parser/wasm';
export default defineContentScript({
  matches: '*://*.github.com/*',
  async main(ctx) {
    if (!location.pathname.endsWith('.ts')) return;
    // 从 GitHub 获取文本
    const code = document.getElementById(
      'read-only-cursor-text-area',
    )?.textContent;
    if (!code) return;
    const sourceFilename = document.getElementById('file-name-id')?.textContent;
    if (!sourceFilename) return;
    // 加载 WASM 文件：
    await initWasm({
      module_or_path: browser.runtime.getURL('/oxc_parser_wasm_bg.wasm'),
    });
    // 加载完成后，我们可以使用 `parseSync`！
    const ast = parseSync(code, { sourceFilename });
    console.log(ast);
  },
});

此代码直接取自 @oxc-parser/wasm 文档，唯一的区别是我们手动传递了一个文件路径。在标准的 NodeJS 或 Web 项目中，默认路径完全可以正常工作，因此你不需要传递任何内容。然而，扩展程序是不同的。你应该始终明确传递输出目录中 WASM 文件的完整 URL，这就是 browser.runtime.getURL 返回的内容。

运行你的扩展程序，你应该会看到 OXC 解析了 TS 文件！

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