将Chrome扩展程序移植到Edge

时间:2018-01-19 13:30:24

标签: javascript jquery google-chrome google-chrome-extension microsoft-edge-extension

我创建了一个chrome扩展来启用剪贴板数据访问。这里将详细解释解决方案Implementing 'Paste' in custom context menu。现在问题是如何将此扩展移植到Edge。有一个工具,我知道我使用它,也许它工作,但我的问题是如何消费"这个扩展名,相当于Edge中的chrome.runtime.sendMessage?在Chrome中我使用了这个https://developer.chrome.com/apps/messaging#external-webpage - 部分'从网页发送消息'但是在Edge I中我找不到类似的内容。感谢您的时间和帮助。

2 个答案:

答案 0 :(得分:0)

Edge也有runtime.sendMessage()

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

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

  

向您的扩展程序或其他扩展程序中的事件侦听器发送一条消息。

     

如果发送到您的分机,请省略extensionId参数。 runtime.onMessage事件将在您的扩展中的每个页面中触发,但调用runtime.sendMessage的帧除外。

     

如果发送到其他分机,请将extensionId参数设置为其他分机的ID。 runtime.onMessageExternal将在另一个扩展名中触发。

     

扩展程序无法使用此方法向内容脚本发送消息。要将消息发送到内容脚本,请使用tabs.sendMessage。

     

这是一个返回Promise的异步函数。

答案 1 :(得分:0)

我设法解决了这个问题。没有办法(至少我无法找到它)从具有扩展后台脚本的网页进行通信(并且只有后台脚本可以从剪贴板获取数据并且定义了'浏览器'对象)。所以我做了什么,我与内容脚本和内容脚本沟通与后台脚本沟通。这是代码。

PAGE CODE:

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");

如果我没有那个断点,那就没有了。我认为这是一个修剪问题,增加了停顿,延迟执行,但没有任何帮助。我将针对这些问题启动一个新问题,并在此处复制解决方案(如果我找到一个)。