Question

我想要做的就是复制文本在Chrome扩展程序中工作。我找到了这个答案the proper use of execcommand("paste") in a chrome extension，它给出了这个copy（）函数：

function copy(str) {
    var sandbox = $('#sandbox').val(str).select();
    document.execCommand('copy');
    sandbox.val('');
}

问题是，如果我把它放在后台页面并调用它，因为后台页面无法访问DOM元素（并且无法访问$（'＃sandbox'）），它不起作用。那么如何从我的content.js（可以访问DOM）脚本中将DOM元素$（'＃sandbox'）发送到我的background.js脚本？

我想出了如何从我的content.js脚本向我的background.js脚本发送消息，并通过以下方式收到回复：

content.js：

$('#copybutton').click(function(){
       chrome.runtime.sendMessage({callCopyFunc: "callstart"}, function(response) {
          console.log(response.callCopyFunc);
        });
});

background.js：

chrome.runtime.onMessage.addListener(function(request,sender,sendResponse){
    if(request.callCopyFunc == "callstart"){
        sendResponse({callCopyFunc: "callfinished"});
    }
});

这很棒！当我单击我的网页上的“copybutton”元素（只是一个按钮）时，content.js将“callstart”发送到background.js，background.js发送回“callfinished”，然后显示在控制台日志中。

我的问题是：如何将DOM元素$（'＃sandbox'）发送到content.js中的background.js文件，这样我就可以在背景页面上使用copy（）函数了？我不了解如何实际发送元素，只有文本。

很抱歉，如果这很简单，我已经坚持了两天。谢谢！

Answer 1

经过几个小时的时间花在应该是一个简单的chrome剪贴板API调用上，我找到了一个解决方案。我不认为任何人真的需要它，但无论如何我都会在这里发布，因为我花了太多时间寻找解决方案。

我下载＆＃34;加上trello＆＃34;在Chrome应用程序商店中查看它的代码。基本上，所有复制功能都在background.html（背景页面）和background.js（背景页面中包含的脚本）上完成。

在你的清单中，你需要这两件事：

"background": {
        "page": "background.html",
        "persistent": true
    },

"permissions":["clipboardWrite"],

然后在您的background.html页面中，您需要包含background.js脚本，并且还包含一个div，其中包含您将在background.js脚本中使用的ID：

<html>
<head>
    <title></title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="background.js"></script>
</head>
<body>
    <div id="selectionPlaceholder"></div>
</body>
</html>

然后，在你的background.js脚本（你在background.html中包含）中，你需要这个功能（我从＆＃34;加上trello＆＃34;扩展名得到了这个）：

function handleCopyClipboard(html) {
    if (window.getSelection && document.createRange) {
        var elemReplace = document.getElementById("selectionPlaceholder");
        elemReplace.innerHTML = html; //This is what it will copy
        var sel = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(elemReplace);
        sel.removeAllRanges();
        sel.addRange(range);
        document.execCommand("Copy");
        elemReplace.innerHTML = ""; //blank it when done
        return;
    }

}

你需要传递这个功能一些文字。我使用我在原始帖子中描述的runetime.onMessage消息传递系统从我的content.js脚本传递了文本。可以从background.js直接调用它，因为此脚本可以访问您的background.html页面（包含在其中）。

编辑：而且，如果你更喜欢较短的copy（）函数，你可以在background.html页面上包含jquery.js，在background.html页面上包含<textarea id="sandbox></textarea>，然后只需调用copy（）来自你的background.js文件。

Chrome扩展程序 - 如何将DOM从内容脚本发送到后台页面？

1 个答案: