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

时间:2011-12-14 11:29:05

标签: javascript google-chrome-extension

我正在创建一个可以读取剪贴板内容的Google Chrome扩展程序 但我无法获得此文档。我想在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);
 });

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

3 个答案:

答案 0 :(得分:1)

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

您还需要添加clipboardRead permission

答案 1 :(得分:1)

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

该命令触发粘贴操作到后台页面中的focus元素。您必须在后台页面中创建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扩展名)

答案 2 :(得分:0)

我们无法从javascript访问剪贴板而不是Chrome浏览器和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>
&#13;
&#13;
&#13;