在自定义上下文菜单中实现“粘贴”答案

【问题标题】：Implementing 'Paste' in custom context menu在自定义上下文菜单中实现“粘贴”
【发布时间】：2018-01-09 23:44:01
【问题描述】：

这是我要解决的问题 - 我不确定这是否可能。我有一个 Web 应用程序，我需要启用从应用程序到应用程序的数据复制/粘贴，但我遇到了粘贴问题。如果我使用 CTRL + V 快捷键过去，我可以使用

从剪贴板获取数据

e.originalEvent.clipboardData.getData('text')

在“粘贴”事件处理程序中，它工作正常。我需要启用的是自定义上下文菜单中的“粘贴”，我的第一次尝试是像这样手动发送粘贴事件

var event = new KeyboardEvent('paste', {
    view: window,
    bubbles: true,
    cancelable: true
});
document.dispatchEvent(event);

它实际上命中了粘贴事件处理程序，但我无法像前一种情况那样访问剪贴板数据。我知道这是因为安全问题而被禁止的——如果允许，任何页面都可以访问剪贴板中的数据。我的问题是如何实现这一点 - 我们能够将数据从 excel 复制到例如谷歌驱动器文档并使用自定义上下文菜单（http://pokit.org/get/?1b5f6f4f0ef4b80bb8637649121bcd75.jpg）将其粘贴到那里，所以我相信这是可能的。谢谢大家！

【问题讨论】：

我认为this is exhausting answer 是您的问题，包括粘贴到 Google 文档中的谜团..
您的回答对我有帮助，所以我会将其标记为正确的。我设法做到了，将在一两天内发布代码。创建一个辅助扩展是一种解决方法。 Edge 有什么可以帮助的吗？
您不能将 cmets 标记为正确。我使用评论只是因为我只找到了可能答案的链接。如果您想奖励某人，只需在那里投票有帮助的答案

标签： javascript clipboard paste

【解决方案1】：

因此，在我的 Web 应用程序中，我有一个自定义上下文菜单，其中包含“粘贴”操作（弹出窗口中的一组 '<li>' 标记）。当用户点击“粘贴”时，我调用了这个函数

if (browser === 'CHROME') {
                var extensionId = 'some_id';
                chrome.runtime.sendMessage(extensionId, { message: "getClipboardData" },
                    function (clipboardData) {
                        console.log('Clipboard data: ', clipboardData);
                        var txt = $('.helper_textarea');
                        $(txt).val(clipboardData);
                        // Call 'paste' function we have clipboard data
                    }
                );
            }

在我的扩展中，我有我的 paste.js 文件

function getDataFromClipboard() {
  var bg = chrome.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;
}

chrome.runtime.onMessageExternal.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;
  }
);

在清单文件中

   "background" : {
     "scripts" : [ "paste.js" ]
   },
   "externally_connectable": {
     "matches": ["*://localhost:*/*"]
   },

当然

  "permissions": ["clipboardRead" ],

我用这个函数来检查是否添加了扩展

   isExtensionInstalled: function (extensionId, callback) {
        chrome.runtime.sendMessage(extensionId, { message: "installed" },
            function (reply) {
                if (reply) {
                    callback(true);
                } else {
                    callback(false);
                }
            });
    },

这很好用。现在的问题是如何将其移植到 Edge。 Edge 中的 'chrome.runtime.sendMessage' 等价于什么？感谢您的帮助。

【讨论】：