导入解析

Plasmo框架自带了一个专门用于扩展开发的代码/资源打包器。它支持原始/转换后的内联包、资源镜像、环境注入等功能。

支持的文件类型

以下文件可以导入到源代码模块中，并将相应地进行转换：

路径

Plasmo内置支持大多数常见的导入路径，例如相对导入、node_module包导入和ESM exports导入。它还通过波浪号和绝对路径提供项目相关的路径。要进一步自定义导入路径，请查看别名导入部分。

波浪号 (~/)

波浪号导入路径是"源代码模块目录"的一个便捷快捷方式。Plasmo仅将以下扩展名的文件视为"源代码模块"：

export const relevantExtensionList = [
  ".ts",
  ".tsx",
  ".svelte",
  ".vue",
  ".json"
] as const

当在源代码模块外部或与资产scheme（如data-base64、data-text或url）一起使用时，波浪号（~）始终解析为包含package.json的项目的根目录。因此：

• 在manifest override inside package.json中使用的~rulesets/test.json解析为/rulesets/test.json
• data-base64:~assets/image.png解析为/assets/image.png
• url:~src/code.js解析为/src/code.js.

假设波浪号单独使用且没有scheme，并且是从另一个源代码模块导入源代码模块，则其行为取决于是否使用默认设置或src目录设置：

• 在默认设置下，~指向项目根目录。
• 在src目录设置下，~指向src目录。因此~core/code-module.tsx解析为/src/core/code-module.tsx。

绝对路径 (/)

与波浪号不同，绝对导入路径始终解析为项目根目录（包含package.json的位置），无论是否有src目录。如果喜欢完全一致性，请使用绝对导入路径。

相对路径 (./, ../)

使用./前缀根据当前文件的相对路径导入文件。例如，从与现有文件相同的目录导入文件，使用./file-name。从子目录导入文件，使用./subdirectory/file-name。从父目录导入文件，使用../file-name。

Scheme

Plasmo引入了几种_import schemes_，开发者可以使用这些方案将资产文件导入扩展包中。Schemes遵循<scheme>:<file path>模式。例如，data-base64:~/assets/image.png是一个有效的导入路径。

raw

raw scheme 指示 Plasmo 执行以下操作：

1. 将文件复制到扩展包的根级别
2. 分配内容哈希以区分具有相似名称的其他文件

运行时导入的变量是一个绝对URL，指向该文件：

import imageUrl from "raw:~/assets/image.png"
 
console.log(imageUrl) // chrome-extension://<extension-id>/image.<hashA>.png

raw-env

raw-env scheme 类似于 raw scheme，但添加了环境变量。例如，如果你有一个文件 ~/assets/config.json，其内容如下：

{
  "url": "$PLASMO_PUBLIC_URL"
}

并且你声明了一个环境变量 PLASMO_PUBLIC_URL，其值为 https://www.plasmo.com，那么生成的文件将是：

{
  "url": "https://www.plasmo.com"
}

url

url scheme 指示 Plasmo 执行以下操作：

1. 转换/打包/优化文件以供浏览器使用 (html/js/css/images)
2. 将结果+依赖项复制到扩展包的根级别
3. 分配内容哈希以区分具有相似名称的其他文件
4. （仅限内容脚本）将文件添加到web_accessible_resources条目中

运行时导入的变量是一个绝对URL，指向该文件：

import styleAUrl from "url:~/a/style.scss"
import styleBUrl from "url:~/b/style.scss"
import codeUrl from "url:~/c/index.ts"
 
console.log(styleAUrl) // chrome-extension://<extension-id>/style.<hashA>.css
console.log(styleBUrl) // chrome-extension://<extension-id>/style.<hashB>.css
console.log(codeUrl) // chrome-extension://<extension-id>/file.<hashB>.js

data-text

data-text scheme 指示 Plasmo 执行以下操作：

1. 读取文件内容
2. 转换/打包/优化文件以供浏览器使用 (html/js/css/images)
3. 将内容作为单个字符串内联

import styleText from "data-text:~/assets/style.scss"
 
console.log(styleText)
// {
//   "color": "red",
// }

data-text-env

data-text scheme 指示 Plasmo 执行以下操作：

1. 读取文件内容
2. 注入公共环境变量
3. 转换/打包/优化文件以供浏览器使用 (html/js/css/images)
4. 将内容作为string内联

.env

PLASMO_PUBLIC_URL=https://itero.plasmo.com

code.json

{
  "url": "$PLASMO_PUBLIC_URL"
}

content.tsx

import codeText from "data-text-env:~/assets/code.json"
 
console.log(codeText) // 要将其用作JSON，请使用JSON.parse(codeText)
// "{
//   "url": "https://itero.plasmo.com",
// }"

data-base64

data-base64 scheme 指示 Plasmo 执行以下操作：

1. 读取文件内容
2. 转换/打包/优化文件以供浏览器使用 (html/js/css/images)
3. 将结果转换为base64字符串并内联到代码中

import iconBase64 from "data-base64:~/assets/icon.png"
 
console.log(iconBase64) // data:image/png;base64,etc...

data-env

data-env scheme 指示 Plasmo 执行以下操作：

1. 读取文件内容
2. 注入公共环境变量
3. 转换/打包/优化文件以供浏览器使用 (html/js/css/images)
4. 返回适当的运行时资产结果

import data from "data-env:~/assets/data.json"
 
// 数据将是一个JSON对象，无需JSON.parse!
console.log(data) // { url: "https://itero.plasmo.com" }

react:*.svg

react scheme 将任何svg资产转换为React组件（通过SVGR和SVGO）：

import Logo from "react:~/assets/logo.svg"
 
const Hello = () => <Logo />