我想要做的就是让复制文本在 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')) .那么如何将 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);
});
});
背景.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(后台页面中包含的脚本)上完成的。
在你的 list 中你需要这两件事:
"background": {
"page": "background.html",
"persistent": true
},
"permissions":["clipboardWrite"],
然后在您的 background.html 页面中，您需要包含 background.js 脚本，还包含一个带有您将在 background.js 脚本中使用的 id 的 div:
<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 中)中，您需要此功能(我从“plus for trello”扩展中获得此功能):
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，包含一个 <textarea id="sandbox></textarea>。在您的 background.html 页面上，只需从您的 background.js 文件中调用 copy() 。
关于javascript - Chrome 扩展程序 - 如何将 DOM 从内容脚本发送到后台页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22309414/