将 chrome 扩展从清单版本 2 升级到 v3，需要在 background.js 中获取剪贴板文本

Question

您好，我正在将 Google Chrome 扩展从清单版本 2 转换为版本 3

面临下面提到的 2 个问题，但在此之前我将解释预期的扩展。

单击网页上的特定按钮时，我调用控制台应用程序，该应用程序正在剪贴板中复制 JSON 字符串，然后在 chrome 扩展程序 background.js 中，我获取剪贴板数据并将其传递给 content.js，后者在 web 页面中显示它。

错误/挑战：
1- 需要将剪贴板文本放入 background.js 中的变量中。 我可以在 content.js 中获取它，但我需要它才能在 background.js 中获取它

2- 我在 background.js 控制台中收到这 2 个错误，但扩展正在运行

 Unchecked runtime.lastError: Native host has exited. Unchecked runtime.lastError: The message port closed before a response was received.

我的 Background.js 看起来像这样

 var port = null; var tabId = null; chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { tabId=sender.tab.id; var hostName = "my.console.app"; port = chrome.runtime.connectNative(hostName); port.onDisconnect.addListener(onDisconnected); sendResponse({status: 'ok'}); return true; }); function onDisconnected() { port = null; SendResponse(); } //this funciton need to upgrade to manifest version 3 because in v3 `chrome.extension.getBackgroundPage` is not compatible function SendResponse() { bg = chrome.extension.getBackgroundPage(); bg.document.body.innerHTML = ""; // clear the background page var helper = null; if (helper == null) { helper = bg.document.createElement("textarea"); helper.style.position = "absolute"; helper.style.border = "none"; document.body.appendChild(helper); } //Focus the textarea helper.select(); // perform a Paste in the selected control, here the textarea bg.document.execCommand("Paste"); // Send data back to content_script chrome.tabs.sendMessage(tabId, { action: "MY_CUSTOM_EVENT", response: helper.value }); }

内容.js

 document.addEventListener("MY_CUSTOM_EVENT", function (data) { chrome.runtime.sendMessage({ runConsoleApp: true }, response => { }); }); async function copyToTheClipboard(textToCopy){ navigator.clipboard.readText().then(text => { //console.log('Pasted content: ', text); $('.simulateEidResponse').html(text).trigger('click'); }).catch(err => { console.error('Failed to read clipboard contents: ', err); }); }

Answer 1

由于crbug.com/1404835 ，目前无法在后台脚本中执行此操作。
将来的解决方法是 execCommand + offscreen API 。

无论选项卡是否聚焦，唯一可靠的解决方案是在内容脚本中使用 document.execCommand("Paste")。

// 背景.js

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.runConsoleApp) {
    chrome.runtime.connectNative('my.console.app')
      .onDisconnect.addListener(() => sendResponse(true));
    return true;
  }
});

// 内容.js

document.addEventListener('MY_CUSTOM_EVENT', async e => {
  await chrome.runtime.sendMessage({ runConsoleApp: true });
  document.querySelector('.simulateEidResponse').focus();
  document.execCommand('selectAll');
  document.execCommand('paste');
});