【问题标题】：How to get selected text in chrome extension development?如何在 chrome 扩展开发中获取选定的文本？
【发布时间】：2016-03-14 04:59:31
【问题描述】：

我正在开发一个 chrome 扩展，其中涉及获取当前选项卡的选定文本。这是我使用的 html 文件：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            chrome.tabs.executeScript( {
                code: "window.getSelection().toString();"
            }, function(selection) {
                document.getElementById("output").value = selection[0];
            });
        </script>
    </head>
    <body>
        <div id="output"></div>
    </body>
</html>

它不起作用，为什么？以下是来自Chrome App & Extension Developer Tool的错误信息，其中一些错误信息被省略了，抱歉我还没弄清楚如何在这里查看完整的错误信息，查看详细信息只给我堆栈跟踪，而不是完整的错误消息。

【问题讨论】：

您不能在扩展页面中包含内联脚本，请参阅documentation。将您的代码移动到一个单独的脚本文件（例如“popup.js”）并使用脚本标签从您的 popup.html 中引用它。此外，这并不重要，但 DIV 没有 value 属性。请改用 textarea 元素。
Chrome extension Content Security Policy directive error的可能重复
指出的重复是正确的作为第一步，但是，这里没有足够的详细信息 - 您显示的是扩展程序的哪一部分？弹出窗口？背景页面？
确实如此。我确实考虑过，但假设代码取自this post using a popup。

标签： javascript google-chrome google-chrome-extension

【解决方案1】：

正如@Xan 建议的那样，前面提到的方法（你可以找到它here）过于复杂。要让它发挥作用，只需要做两件事：

在document.getElementById("output").value 中将value 更改为innerHTML
在manifest.json文件中添加activeTab权限

这里是完整的源代码，一共三个文件。

manifest.json

{
    "manifest_version": 2,
    "name": "sample",
    "description": "A sample extension to get the selected text",
    "version": "1.0",
    "icons": { 
        "16": "img/icon16.png",
        "48": "img/icon48.png",
        "128": "img/icon128.png" 
    },
    "browser_action": {
        "default_popup": "popup.html"
    },
    "permissions": [
        "activeTab"
    ]
}

popup.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="popup.js"></script>
        <title></title>
    </head>
    <body>
        <div id="output"></div>
    </body>
</html>

popup.js

chrome.tabs.executeScript( {
    code: "window.getSelection().toString();"
}, function(selection) {
    document.getElementById("output").innerHTML = selection[0];
});

【讨论】：

我会赞成这个很好的解释，但是你把事情复杂化了。
嗯。不，我收回了。你可怕地把事情复杂化了。
@Xan 谢谢你的建议，我已经更新了我的答案。

【解决方案2】：

您最初的方法是正确的（可能取自this question）。

它有两个问题：

内联脚本 (<script>...</script>) are not allowed;可以通过将代码放入单独的文件（例如 popup.js）来解决此问题。
您需要权限才能访问页面以进行内容脚本注入；在您的特定情况下，有一个特定的权限"activeTab"，它以透明且轻松的方式进行，没有安全警告。当您的扩展程序被调用（通过单击按钮）时，您可以访问当前选项卡。

这些固定后，您的“直接”方法就可以工作了。

对了，以后要调试此类问题，需要inspect the popup page。

至于你自己的答案，你把事情复杂化了很多。

在这种特殊情况下，您不需要活动页面；您的弹出窗口可以调用executeScript 并收听消息。在某些情况下你确实需要它，特别是当你不能保证内容脚本发送消息时弹出窗口是打开的；但在这里你可以保证。

假设您需要事件页面，请考虑不使用getBackgroundPage 调用其中的方法 - 它紧密耦合代码；您可以改为发送消息。 sendResponse 可用于将结果传回，even asynchronously。

最后，您的架构与content.js 混淆了。它只有一个副本在附加到目标页面的特殊上下文中执行（而不是在扩展上下文中）。

【讨论】：