在自定义上下文菜单中实施“粘贴” [英] Implementing 'Paste' in custom context menu

问题描述

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

here is the problem I am trying to solve - I am not sure it is possible at all. I have a web app and I need to enable data copy/paste from the app and to the app, and I have a problem with paste. If I past with CTRL + V shortcut I can get the data from the clipboard using

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

在'paste'事件处理程序中运行正常。我需要启用的是自定义上下文菜单中的粘贴，而我的第一个尝试是像这样手动分发粘贴事件

in 'paste' eventhandler and it works fine. What I need to enable is 'Paste' from custom context menu and my first try was to dispatch paste event manually like this

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

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

and it actually hit paste eventhandler, but I couldn't get access to clipboard data like in the previous case. I understand that this is forbidden because of security issues - if this was allowed any page would be able to access data from the clipboard. My question is how to implement this - we are able to copy data from excel to e.g. google drive document and paste it there using a custom context menu (http://pokit.org/get/?1b5f6f4f0ef4b80bb8637649121bcd75.jpg), so I believe it is possible. Thank u all!

推荐答案

因此，在我的Web应用程序中，我有一个自定义上下文菜单，该菜单具有粘贴操作（ '< li>'标记）。当用户单击粘贴时，我会调用此函数

So, in my web application I have a custom context menu which has 'Paste' action (bunch of '<li>' tags in a popup). And when the user click on 'Paste' I call this function

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文件

In my extension I have i paste.js file I have

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" ],

我使用此功能检查是否添加了扩展名

I use this function to check if extension is added

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

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

And this is working great. Now the problem is how to port this to Edge. What is equivalent to 'chrome.runtime.sendMessage' in Edge? Thanks for your help.

这篇关于在自定义上下文菜单中实施“粘贴”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！