为什么document.execCommand('paste'）在我的扩展中不起作用

Why document.execCommand('paste') is not working in my extension

本文关键字：我的 扩展 不起作用 execCommand document 为什么 paste      更新时间：2023-09-26

我正在创建一个可以读取剪贴板内容的谷歌浏览器扩展程序。
但是我无法获得这方面的文档。我想像在IE的剪贴板API中一样获取剪贴板内容。
在清单文件中，我授予了权限 

clipboardRead and clipboardWrite.

我在后台页面中创建了一个函数，如下所示 

 chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
 if (request.method == "getClipData")
   sendResponse({data: document.execCommand('paste')});
 else
   sendResponse({}); // snub them.
 });

在内容脚本中，我像这样调用函数 

 chrome.extension.sendRequest({method: "getClipData"}, function(response) {
    alert(response.data);
 });

但这让我返回未定义...

document.execCommand('paste'( 返回成功或失败，而不是剪贴板的内容。

该命令触发粘贴操作到后台页的焦点元素中。您必须在后台页面中创建一个 TEXTAREA 或 DIV contentEditable=true 并聚焦它以接收粘贴内容。

你可以在我的BBCodePaste扩展中看到一个如何使它工作的示例：

https://github.com/jeske/BBCodePaste

下面是如何在背景页中阅读剪贴板文本的一个示例：

bg = chrome.extension.getBackgroundPage();        // get the background page
bg.document.body.innerHTML= "";                   // clear the background page
// add a DIV, contentEditable=true, to accept the paste action
var helperdiv = bg.document.createElement("div");
document.body.appendChild(helperdiv);
helperdiv.contentEditable = true;
// focus the helper div's content
var range = document.createRange();
range.selectNode(helperdiv);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
helperdiv.focus();    
// trigger the paste action
bg.document.execCommand("Paste");
// read the clipboard contents from the helperdiv
var clipboardContents = helperdiv.innerHTML;

如果你想要纯文本而不是 HTML，你可以使用 helperdiv.innerText，或者你可以切换到使用 textarea。如果你想以某种方式解析 HTML，你可以在 DIV 中浏览 HTML dom(再次，请参阅我的 BBCodePaste 扩展(

var str = document.execCommand('paste');

您还需要添加clipboardRead权限。

我们不能从javascript访问剪贴板，而是IE的chrome和其他浏览器。

这样做的技巧非常简单：创建自己的自定义剪贴板，将文本存储在剪切上，并从我们直接粘贴它的位置粘贴

function copy(){
if (!window.x) {
    x = {};
}
x.Selector = {};
x.Selector.getSelected = function() {
    var t = '';
    if (window.getSelection) {
        t = window.getSelection();
    } else if (document.getSelection) {
        t = document.getSelection();
    } else if (document.selection) {
        t = document.selection.createRange().text;
    }
    return t;
}
var mytext = x.Selector.getSelected();
document.getElementById("book").innerHTML =mytext;
}
function cut(){
if (!window.x) {
    x = {};
}
x.Selector = {};
x.Selector.getSelected = function() {
    var t = '';
    if (window.getSelection) {
        t = window.getSelection();
    } else if (document.getSelection) {
        t = document.getSelection();
    } else if (document.selection) {
        t = document.selection.createRange().text;
    }
    return t;
}
var mytext = x.Selector.getSelected();
document.getElementById("book").innerHTML =mytext;
x.Selector.setSelected()="";
}
function paste()
{
    var firstDivContent = document.getElementById('book');
var secondDivContent = document.getElementById('rte');
secondDivContent.innerHTML += firstDivContent.innerHTML;
rte.focus();
}
function clear()
{
document.getElementById('rte').innerHTML="";
rte.focus();
}
 <button id="cut"onclick="cut();">Cut</button>
 <button id="copy"onclick="copy();">Copy</button>
 <button id="paste"onclick="paste();">Paste</button>
 Working Div
 <div id="rte" contenteditable="true" style="overflow:auto;padding:10px;height:80vh;border:2px solid black;" unselectable="off" ></div>
 Own Clipboard(hack)
    <div id="book" contenteditable="true"style="background-color:#555;color:white;"> </div>

相关文章：