让网页可以读取扩展中的文件

​

文件被读取的三种方式，以及哪一种需要声明

​

Manifest 片段

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "web_accessible_resources": [
    {
      "resources": ["images/logo.png", "fonts/*.woff2"],
      "matches": ["https://example.com/*"],
      "use_dynamic_url": false
    }
  ],
  "content_scripts": [
    {
      "matches": ["https://example.com/*"],
      "js": ["content_scripts/content.js"]
    }
  ]
}

• resources 列出相对于扩展根目录的路径。相对路径从存放 manifest.json 的文件夹开始解析。
• matches 限定哪些页面来源可以读取这些文件。在功能允许的范围内把它写得尽量窄。
• use_dynamic_url 要求浏览器给出一个按会话轮换的 URL，让页面无法通过固定 id 给你的扩展打指纹。请把它当作 Chromium 字段。

​

在运行时构建 URL

const logoUrl = chrome.runtime.getURL("/images/logo.png");
document.body.appendChild(Object.assign(new Image(), { src: logoUrl }));

​

各浏览器差异

​

你会看到的控制台报错

​

Extension.js 的做法

• 当运行时需要页面读取这些资源时，content script 导入的资源、content script 的 CSS 产物以及产出的字体会被自动加入。
• 路径会为产物规范化。Extension.js 会去掉 public/ 前缀和开头的斜杠，因此条目指向文件真正落地的位置。
• glob 保持原样，带端口或端口通配符的匹配模式（例如 http://localhost:3000/*）会被接受而不是被拒绝。
• 在开发中，Extension.js 会给条目集合打补丁，让重载与热模块替换所需的资源保持可达。该补丁仅用于开发。参见 重载与 HMR。

• 把 matches 限定在确实需要该文件的域名上。
• 优先使用明确的资源列表，而不是宽泛的 glob。
• 让敏感文件留在白名单之外，改从扩展页面提供它们。
• 每次新增 content script 导入、字体或新的静态资源后，重新审阅这份列表。

npx extension@latest create my-extension --template=content-custom-font

​

参见

• Content script
• 在运行时注入脚本
• CSS
• 懒加载
• 特殊文件夹