如何在不注入页面脚本的情况下获取本地图片的Blob/DataURL？

首先明确核心限制：浏览器的安全策略禁止扩展的背景脚本（包括Chrome MV3的Service Worker）直接访问file://协议的资源——扩展运行在chrome-extension://或moz-extension://域下，与本地文件系统属于不同源，因此直接使用fetch、XMLHttpRequest或Image对象都会触发跨域安全错误，且Chrome MV3的Service Worker环境中甚至不存在DOM相关的Image构造函数。

目前是否存在无需注入页面脚本的方案？ #

很遗憾，没有通用的无注入方案。原因在于：只有加载了本地图片的页面上下文本身，拥有访问该file://资源的权限（页面与本地图片属于同一file://域），而扩展的隔离执行环境（背景/Service Worker）被浏览器严格限制，无法突破同源策略直接读取本地文件内容。

为什么注入页面脚本是当前最优解？ #

注入脚本到页面上下文是兼容性最好、实现最直接的方案——利用页面已有的权限读取图片内容，再通过脚本执行结果回传给扩展背景。可以通过优化注入方式提升效率，比如Chrome MV3中使用scripting.executeScript替代旧的tabs.executeScript，示例如下：

Chrome MV3 Service Worker 示例代码

chrome.contextMenus.onClicked.addListener(async (info, tab) => {
  // 仅处理本地图片的上下文菜单点击
  if (info.menuItemId === "capture-local-image" && info.srcUrl?.startsWith("file://")) {
    try {
      // 注入脚本到目标页面，获取图片的dataURL
      const [executionResult] = await chrome.scripting.executeScript({
        target: { tabId: tab.id },
        func: (imageSrc) => {
          return new Promise((resolve, reject) => {
            const img = new Image();
            // 本地图片无需跨域验证，但添加该属性避免潜在报错
            img.crossOrigin = "anonymous";
            img.onload = () => {
              const canvas = document.createElement("canvas");
              canvas.width = img.width;
              canvas.height = img.height;
              canvas.getContext("2d").drawImage(img, 0, 0);
              // 将canvas转为Blob后再转base64 dataURL
              canvas.toBlob((blob) => {
                const reader = new FileReader();
                reader.onload = () => resolve(reader.result);
                reader.onerror = reject;
                reader.readAsDataURL(blob);
              });
            };
            img.onerror = reject;
            img.src = imageSrc;
          });
        },
        args: [info.srcUrl]
      });

      // 将dataURL转回Blob（如果需要）
      const imageDataUrl = executionResult.result;
      const imageBlob = await fetch(imageDataUrl).then(res => res.blob());
      // 后续处理Blob/dataURL
      console.log("获取到本地图片Blob:", imageBlob);
    } catch (error) {
      console.error("获取本地图片失败:", error);
    }
  }
});

注意事项 #

• 权限声明：Chrome MV3中需在manifest.json里添加"scripting"和"activeTab"权限（或对应页面的URL权限）；Firefox MV2/MV3则需声明"tabs"权限。
• 兼容性：该方案同时支持Chrome和Firefox的扩展MV2/MV3版本。
• 性能优化：如果仅需图片的base64格式，可直接使用canvas.toDataURL()替代toBlob+FileReader，减少一步转换。

内容的提问来源于stack exchange，提问作者erosman