Chrome扩展读取本地图片生成Base64失败，求技术解决方案

你遇到的错误是Chrome安全限制导致的：扩展的后台脚本（background.js）处于隔离沙箱环境，直接用fetch访问file://协议的本地资源会被浏览器拦截，这是为了防止恶意扩展随意读取用户本地文件。

下面是两种可行的解决思路：

思路一：通过内容脚本处理本地图片页面 #

如果用户是在Chrome中直接打开本地图片（比如file:///C:/xxx.png），可以让内容脚本在页面上下文里处理图片转Base64，避开后台脚本的权限限制：

1. 配置manifest.json
   添加内容脚本匹配规则和必要权限：

{
  "manifest_version": 3,
  "name": "图片转Base64",
  "permissions": ["contextMenus", "scripting"],
  "content_scripts": [
    {
      "matches": ["file://*/*"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  }
}

2. 编写content.js
   在内容脚本里监听来自后台的消息，获取页面中的图片并转Base64：

chrome.runtime.onMessage.addListener(async (msg, sender, sendResponse) => {
  if (msg.action === "getImageBase64") {
    const img = document.querySelector("img");
    if (!img) return sendResponse(null);
    
    // 用Canvas转换图片为Base64
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    canvas.width = img.naturalWidth;
    canvas.height = img.naturalHeight;
    ctx.drawImage(img, 0, 0);
    const base64 = canvas.toDataURL(img.src.split(".").pop());
    sendResponse(base64);
  }
});

3. 修改background.js的右键菜单逻辑
   点击右键菜单时，向当前标签页的内容脚本发送消息：

chrome.contextMenus.create({
  id: "getBase64",
  title: "获取图片Base64",
  contexts: ["image"]
});

chrome.contextMenus.onClicked.addListener(async (info, tab) => {
  if (info.menuItemId === "getBase64") {
    // 向内容脚本发消息
    const response = await chrome.tabs.sendMessage(tab.id, { action: "getImageBase64" });
    if (response) {
      console.log("Base64编码:", response);
      // 这里可以做复制到剪贴板等操作
      await navigator.clipboard.writeText(response);
    }
  }
});

思路二：使用原生消息传递（Native Messaging） #

如果需要处理非图片页面右键点击本地图片路径的场景（比如页面里的图片链接指向本地文件），可以通过Chrome的原生消息传递功能，调用本地程序读取文件并返回Base64：

1. 编写本地原生程序（以Node.js为例）
   创建一个file-reader.js文件，负责读取指定路径的文件并转Base64：

const fs = require("fs");
const readline = require("readline");

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
  terminal: false
});

rl.on("line", (input) => {
  const data = JSON.parse(input);
  if (data.action === "readFile" && data.path) {
    try {
      const buffer = fs.readFileSync(data.path);
      const base64 = buffer.toString("base64");
      const mimeType = "image/" + data.path.split(".").pop();
      const result = `data:${mimeType};base64,${base64}`;
      console.log(JSON.stringify({ result }));
    } catch (err) {
      console.log(JSON.stringify({ error: err.message }));
    }
  }
});

2. 注册原生宿主manifest
   创建一个com.example.imagereader.json文件（路径要符合Chrome的要求，不同系统路径不同）：

{
  "name": "com.example.imagereader",
  "description": "读取本地图片转Base64",
  "path": "node.exe",
  "command_line": ["node.exe", "C:\\path\\to\\file-reader.js"],
  "type": "stdio",
  "allowed_origins": ["chrome-extension://YOUR_EXTENSION_ID/"]
}

注意替换YOUR_EXTENSION_ID为你的扩展ID，不同系统的注册路径：

• Windows：HKEY_CURRENT_USER\Software\Google\Chrome\NativeMessagingHosts\com.example.imagereader
• macOS：~/Library/Application Support/Google/Chrome/NativeMessagingHosts/com.example.imagereader.json
• Linux：~/.config/google-chrome/NativeMessagingHosts/com.example.imagereader.json

3. 修改扩展的background.js
   添加原生消息调用逻辑：

chrome.contextMenus.onClicked.addListener(async (info, tab) => {
  if (info.menuItemId === "getBase64") {
    // 提取本地文件路径（info.srcUrl是file://开头的URL）
    const filePath = decodeURIComponent(info.srcUrl.replace("file:///", ""));
    // 发送消息给原生程序
    chrome.runtime.sendNativeMessage(
      "com.example.imagereader",
      { action: "readFile", path: filePath },
      (response) => {
        if (response && response.result) {
          console.log("Base64编码:", response.result);
          navigator.clipboard.writeText(response.result);
        } else {
          console.error("读取失败:", response?.error);
        }
      }
    );
  }
});

同时在manifest.json里添加nativeMessaging权限：

"permissions": ["contextMenus", "nativeMessaging"]

注意事项 #

• 思路一仅适用于用户直接在Chrome中打开的本地图片页面；思路二更通用，但需要用户安装本地程序并配置宿主，门槛稍高。
• 扩展使用Manifest V3的话，后台脚本是service worker，注意API的兼容性（比如navigator.clipboard需要在secure context，本地页面属于secure context）。

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