Javascript Chrome扩展-如何将DOM消息从内容脚本发送到背景页面？_Javascript_Jquery_Google Chrome

Javascript Chrome扩展-如何将DOM消息从内容脚本发送到背景页面？

javascript jquery google-chrome

Javascript Chrome扩展-如何将DOM消息从内容脚本发送到背景页面？,javascript,jquery,google-chrome,Javascript,Jquery,Google Chrome,我想做的就是在chrome扩展中复制文本。我找到了这个答案，它给出了这个copy（）函数： function copy(str) { var sandbox = $('#sandbox').val(str).select(); document.execCommand('copy'); sandbox.val(''); } 问题是，如果我把它放在后台页面并调用它，它就不起作用了，因为后台页面没有访问DOM元素的权限（并且不能访问$（“#sandbox”）。那么，如何将D

我想做的就是在chrome扩展中复制文本。我找到了这个答案，它给出了这个copy（）函数：

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

问题是，如果我把它放在后台页面并调用它，它就不起作用了，因为后台页面没有访问DOM元素的权限（并且不能访问$（“#sandbox”）。那么，如何将DOM元素$（'#sandbox'）从content.js（可以访问DOM）脚本发送到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（）函数？我不明白如何实际发送一个元素，只是文本

对不起，如果这真的很简单，我已经被困在这两天了。谢谢

花了几个小时的时间在一个简单的chrome剪贴板API调用上，我找到了一个解决方案。我认为没有人真的需要它，但我还是会把它贴在这里，因为我花了太多时间在上面寻找解决方案

我在chrome应用商店上下载了“plus for trello”，并查看了它的代码。基本上，所有的复制功能都是在background.html（后台页面）和background.js（后台页面包含的脚本）上完成的

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

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

"permissions":["clipboardWrite"],

然后，在background.html页面中，您需要包含background.js脚本，还需要包含一个div，该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>

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

编辑：而且，如果您更喜欢较短的copy（）函数，您可以在background.html页面中包含jquery.js，包括


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;
    }

}