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

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

转载作者：行者123 更新时间：2023-11-30 17:34:33

我想要做的就是让复制文本在 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/