Chrome 扩展 - 如何使用 manifest v3 访问本地 file:// 解决方法：文件系统 API，Chrome 88-90解决方案 1. 扩展框架，Chrome 91+解决方案 2. 扩展窗口/选项卡，Chrome 91+注意事项

如何解决Chrome 扩展 - 如何使用 manifest v3 访问本地 file:// 解决方法：文件系统 API，Chrome 88-90解决方案 1. 扩展框架，Chrome 91+解决方案 2. 扩展窗口/选项卡，Chrome 91+注意事项

我有一个 Chrome 扩展程序，它可以（如果您允许访问文件 URL）抓取您在 chrome 中打开的本地 pdf 文件，并将其发送到我们的 API 进行处理。这是通过从后台脚本中获取带有 XMLHttpRequest 到 file:///Users/user/whatever/testfile.pdf 的 pdf 来完成的。

当为 Chrome 扩展程序迁移到 manifest v3 时，后台脚本将成为服务工作者。在 Service Worker 中，只有 fetch 可用，而不是 XMLHttpRequest。问题是，fetch 只支持 http 和 https，不支持 file:// url。那么，我如何才能实现让 Chrome 扩展程序获取/获取本地文件的相同功能？

编辑：我也尝试过的事情：

按照回答的建议从注入的 iframe 中创建 XMLHttpRequest。发出请求时会出现错误 net:ERR_UNKNOWN_URL_SCHEME
从注入的内容脚本生成 XMLHttpRequest。这给出了错误 Access to XMLHttpRequest at 'file:///.../testfile1.docx.pdf' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http,data,chrome,chrome-extension,chrome-untrusted,https.

据我从大量研究中了解到，对 file:// 的访问通常被阻止，Chrome 扩展程序后台脚本曾经是一个例外。在我看来，内容脚本或操作弹出窗口从未允许这样做。

我的 manifest.json 供参考：

{
  "manifest_version": 3,"name": "..","version": "0.1","icons": {
    "16": "assets/icon-16x16.png","48": "assets/icon-48x48.png","128": "assets/icon-128x128.png"
  },"action": {
    "default_title": ".."
  },"background": {
    "service_worker": "background.js"
  },"permissions": [
    "webRequest","activeTab","scripting","storage","unlimitedStorage","identity","pageCapture"
  ],"host_permissions": [
    "<all_urls>"
  ],"web_accessible_resources": [{
    "resources": ["iframe.html"],"matches": [],"extension_ids": []
  }]
}

以编程方式注入内容脚本（使用 webextension-polyfill 进行 promise 支持）

browser.action.onClicked.addListener(async (tab: Tab) => {
  await browser.scripting.executeScript({files: [ "inject.js" ],target: {tabId: tab.id}});
});

解决方法

由于您已经提到的原因，您无法在后台 Service Worker 中执行此操作。还有一个 bug 阻止在正常可见的 chrome-extension:// 页面或 iframe 中执行此操作。它已在 Chrome 91 中修复。

解决方法：文件系统 API，Chrome 88-90

ManifestV3 扩展可以使用新的 File System API 来读取文件的内容，例如在通过 web_accessible_resources 公开的 iframe 内。

解决方案 1. 扩展框架，Chrome 91+

使用在带有该 pdf 的选项卡中运行的内容脚本：

matches 应该包含 <all_urls> 或 file://*/* 并且文件访问应该由用户在 chrome://extensions 扩展程序的 UI。或者你可以使用 activeTab 权限和 programmatic injection 当用户单击您的扩展程序的图标或通过上下文菜单调用它。
内容脚本添加了一个不可见的 iframe，指向 web_accessible_resources 中公开的 iframe.html 文件
iframe.html 加载 iframe.js，它照常使用 XMLHttpRequest。由于 iframe 具有 chrome-extension:// URL，因此它的环境与旧的后台脚本相同，因此您可以执行所有操作你之前在那里做过。

解决方案 2. 扩展窗口/选项卡，Chrome 91+

另一种解决方案是使用您的任何其他可见页面扩展程序，如 action 弹出窗口或选项页面或任何其他 chrome-extension:// 属于您的扩展程序的页面，因为它们可以只需访问 file:// 网址就像您之前在后台脚本中所做的那样。

注意事项

应该在 chrome://extensions 页面中为此扩展程序启用文件访问。