如何使用 JavaScript 从网页中获取突出显示的文本

Question

我正在尝试为 chrome 制作一个简单的测试扩展。 这是应该发生的事情：

1. 用户突出显示一些文本
2. 用户按下扩展并按下弹出窗口中的按钮
3. 有一个警报显示突出显示的文本

问题是当按下扩展按钮时文本被取消选择，因此警报什么也不显示。 我已经阅读了许多与此问题相关的 StackOverflow 答案，但我是 JS 新手，无法弄清楚。

这些是我的文件：

清单文件

{
"name": "Test",
"version": "1.0",
"manifest_version": 2,
"content_scripts": [
    {
        "matches": ["<all_urls>"],
        "js":["content.js"],
    }
],
"browser_action":{
    "default_popup": "popup.html",
    "default_title": "Text Finder"
}


}

弹出窗口.html

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

    <button>Show Text</button>
    <script src="popup.js" charset="ut-8"></script>


</body>
</html>

弹出窗口.js

function getSelectionText() {
var text = "";
if (window.getSelection) {
    text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
    text = document.selection.createRange().text;
}

return text
}

document.addEventListener('DOMContentLoaded', function () {
 document.querySelector('button').addEventListener('click', onclick, false)
 function onclick () {
    chrome.tabs.query({currentWindow: true, active: true},
    function (tabs) {
        chrome.tabs.sendMessage(tabs[0].id, getSelectionText())
    }
    )
 }
  }, false)

内容.js

chrome.runtime.onMessage.addListener(function (request){
alert(request)
})

Answer 1

一个更好的方法是在上下文菜单中添加一个项目。 为此，用户将选择某些内容，然后右键单击，然后选择您的菜单项以将选择发送到您的扩展程序。

chrome.contextMenus.create(
  id : 'selectionGetter',
  title : 'send selected text',
  contexts : ['selection'],
);

chrome.contextMenus.onClicked.addListener(function (info,tab) {
  //showing alert would require you to send a message to the active tab,
  //handle it in the contentscript and send alert from there

  //alternate lazy usage example:
  new Notification('My extension',{
    body : 'you selected: '+info.selectionText,
  });
});

Answer 2

将最后选择的文本保存在一个变量中，例如selected和selectedBefore ，然后在使用它们时检查它们，是否有一个为空，并使用适当的一个。 使用它们后，您可能应该将它们设置为 null

弹出窗口.js

let lastSelected = null
let beforeLastSelected = null
...
// then set your variables, lets say in onClick event
beforeLastSelected = lastSelected
lastSelected = getSelectionText()