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

【问题标题】：How to get highlighted text from webpage with JavaScript如何使用 JavaScript 从网页中获取突出显示的文本
【发布时间】：2020-04-20 21:51:09
【问题描述】：

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

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

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

这些是我的文件：

manifest.json

{
"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"
}


}

popup.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>

popup.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)

content.js

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

【问题讨论】：

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

【解决方案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,
  });
});

【讨论】：

是的，这实际上是实现我想要的更好的方法，谢谢！

【解决方案2】：

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

popup.js

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

【讨论】：

我想这样做，但不知道如何去做。我应该在哪里创建这个变量来跟踪选定的文本？
例如，在您的popup.js 文件中，作为全局变量。