Chrome扩展Manifest V2转V3：background.js获剪贴板及错误问题求助

核心问题梳理 #

你的扩展需求：点击网页特定按钮调用原生控制台应用，将JSON字符串复制到剪贴板，由background读取剪贴板数据后传递给content.js在网页展示。升级到V3后遇到两个关键问题：

1. background无法在V3环境下读取剪贴板（原方法依赖V2的chrome.extension.getBackgroundPage，V3已废弃）
2. background控制台出现未捕获的runtime错误

问题1：Background读取剪贴板的V3兼容方案 #

V3的background是Service Worker，无DOM环境，不能使用document.execCommand或chrome.extension.getBackgroundPage。需改用Chrome官方提供的chrome.clipboard API，步骤如下：

1. 更新Manifest权限 #

在manifest.json中添加剪贴板读取与标签页权限：

{
  "permissions": ["clipboardRead", "tabs"]
}

2. 重写剪贴板读取逻辑 #

替换原依赖DOM的SendResponse函数，改用异步API直接读取剪贴板：

async function SendResponse() {
  try {
    // 直接读取剪贴板文本
    const clipboardText = await chrome.clipboard.readText();
    // 发送数据到对应标签页的content.js
    if (tabId) {
      await chrome.tabs.sendMessage(tabId, { 
        action: "MY_CUSTOM_EVENT", 
        response: clipboardText 
      });
    }
  } catch (err) {
    console.error("读取剪贴板失败:", err);
  }
}

问题2：修复Runtime错误 #

错误1：Unchecked runtime.lastError: Native host has exited. #

原生应用退出时会触发port.onDisconnect，此时chrome.runtime.lastError会包含退出原因，需主动捕获避免未检查错误：

function onDisconnected() {
  // 捕获并处理原生应用退出的错误信息
  if (chrome.runtime.lastError) {
    console.log("原生应用退出:", chrome.runtime.lastError.message);
  }
  port = null;
  SendResponse();
}

错误2：Unchecked runtime.lastError: The message port closed before a response was received. #

原代码中chrome.runtime.onMessage返回true表示需要异步响应，但实际已同步调用sendResponse，导致端口关闭后仍等待响应。只需移除return true即可：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { 
  tabId = sender.tab.id;
  const hostName = "my.console.app";
  port = chrome.runtime.connectNative(hostName);
  port.onDisconnect.addListener(onDisconnected);
  // 同步发送响应，无需返回true
  sendResponse({status: 'ok'});
});

Content.js代码修正 #

原代码用document.addEventListener监听自定义DOM事件是错误的，需改为监听background发送的消息：

// 替换原DOM事件监听，改为接收background的消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === "MY_CUSTOM_EVENT") {
    // 将剪贴板数据展示到网页指定元素
    $('.simulateEidResponse').html(message.response).trigger('click');
  }
});

// 绑定网页特定按钮的点击事件，触发原生应用调用
document.querySelector("你的按钮选择器").addEventListener("click", () => {
  chrome.runtime.sendMessage({ runConsoleApp: true });
});

完整Background.js代码 #

let port = null;
let tabId = null;

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { 
  tabId = sender.tab.id;
  const hostName = "my.console.app";
  port = chrome.runtime.connectNative(hostName);
  port.onDisconnect.addListener(onDisconnected);
  sendResponse({status: 'ok'});
});

function onDisconnected() {
  if (chrome.runtime.lastError) {
    console.log("原生应用退出信息:", chrome.runtime.lastError.message);
  }
  port = null;
  SendResponse();
}

async function SendResponse() {
  try {
    const clipboardText = await chrome.clipboard.readText();
    if (tabId) {
      await chrome.tabs.sendMessage(tabId, { 
        action: "MY_CUSTOM_EVENT", 
        response: clipboardText 
      });
    }
  } catch (err) {
    console.error("读取剪贴板失败:", err);
  }
}

关键注意事项 #

• V3的Service Worker是无状态的，全局变量tabId可能被多标签页操作覆盖，建议在调用原生应用时将tabId绑定到port对象或通过消息参数传递。
• 确保原生应用正确完成剪贴板写入操作，退出时无异常。

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