将 Chrome 扩展移植到 Edge

Question

我创建了一个 chrome 扩展来启用剪贴板数据访问。该解决方案在此处 Implementing 'Paste' in custom context menu. Now the problem is how to port this extension to Edge. There is a tool for that I know I used it, and maybe it is working, but my problem is how to "consume" this extension, what is equivalent to chrome.runtime.sendMessage in Edge? In Chrome I used this https://developer.chrome.com/apps/messaging#external-webpage - 'Sending messages from webpages' 部分进行了详细说明，但在 Edge 中我找不到任何类似的东西。感谢您的时间和帮助。

Answer 1

Edge也有runtime.sendMessage()

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/runtime/sendMessage

要记住的是 runtime 对象是在 browser 对象上定义的，而不是 chrome。

Sends a single message to event listeners within your extension or a different extension.

If sending to your extension, omit the extensionId argument. The runtime.onMessage event will be fired in each page in your extension, except for the frame that called runtime.sendMessage.

If sending to a different extension, include the extensionId argument set to the other extension's ID. runtime.onMessageExternal will be fired in the other extension.

Extensions cannot send messages to content scripts using this method. To send messages to content scripts, use tabs.sendMessage.

This is an asynchronous function that returns a Promise.

Answer 2

我设法解决了这个问题。没有办法（至少我找不到）从网页与扩展后台脚本进行通信（只有后台脚本可以从剪贴板获取数据并定义了 'browser' 对象）。所以我所做的是，我与内容脚本进行通信，内容脚本与后台脚本进行通信。这是代码。

页面代码：

contextMenuPaste: function () {
    if (getBrowserName() == 'EDGE') {
         window.postMessage({
            direction: "from-page-script"
         }, "*");
    }
},

window.addEventListener("message", function (event) {
    if (event.source == window &&
        event.data.direction &&
        event.data.direction == "from-content-script") {
        console.log('Data in page script', event.data.message);
    }
});

内容脚本代码

window.addEventListener("message", (event) => {
  // If message came from page-script send request to background script to get clipboard data
  if (event.source == window &&
    event.data &&
    event.data.direction == "from-page-script") {
    browser.runtime.sendMessage({
        message: "getClipboardData"
      },
      function(clipboardData) {
        messagePageScript(clipboardData);
      }
    );
  }
});

// Send clipboard data to page script
function messagePageScript(clipboardData) {
  window.postMessage({
    direction: "from-content-script",
    message: clipboardData
  }, "*");
}

背景脚本代码

browser.runtime.onMessage.addListener(
  function(req, sender, callback) {
    if (req) {
      if (req.message) {
         if (req.message == "installed") {
           console.log('Checking is extension is installed!');
           callback(true);
         }
         else if(req.message = "getClipboardData") {
           console.log('Get clipboard data');
           callback(getDataFromClipboard());
         }
       }
    }
    return true;
  }
);

function getDataFromClipboard() {
  var bg = browser.extension.getBackgroundPage();
  var helperTextArea = bg.document.getElementById('sandbox');
  if (helperTextArea == null) {
    helperTextArea = bg.document.createElement("textarea");
    document.body.appendChild(helperTextArea);
  }
  helperTextArea.value = '';
  helperTextArea.select();

  // Clipboard data
  var clipboardData = '';

  bg.document.execCommand("Paste");
  clipboardData = helperTextArea.value;
  helperTextArea.value = '';

  return clipboardData;
}

但是有一个小问题。如果我在行

上设置了断点，则此代码有效

bg.document.execCommand("Paste");

如果我没有那个断点，它就不会。我认为这是一个微调问题，增加了暂停，延迟执行但没有任何帮助。我将为该问题提出一个新问题，并将在此处复制解决方案（如果我找到的话）。

将 Chrome 扩展移植到 Edge

Porting Chrome extension to Edge

javascript

jquery

google-chrome

google-chrome-extension

microsoft-edge-extension