javascript - 在谷歌浏览器扩展中获取网页的选定文本

Question

我正在开发一个谷歌浏览器扩展。单击弹出窗口时，我希望 popup.html 文件中的输入框包含当前网页的选定文本。

示例文本框：

<input id="searchBox" type="text" />

在网页中选择文本时，文本框应包含所选单词。我试过了，chrome.extension.getBackgroundPage().getSelection()但它不起作用。

Answer 1

谷歌群组上有一个关于此的主题：如何从选择中获取 HTML 代码？

var selection = window.getSelection(); 
var range = selection.getRangeAt(0); 
if (range) { 
  var div = document.createElement('div'); 
  div.appendChild(range.cloneContents()); 
  alert(div.innerHTML); 
}

无论哪种方式，您都可以在控制台或插件中使用它。

Answer 2

由于 Chrome 的极端安全预防措施，您尝试执行的操作需要大量编码。

chrome.extension.getBackgroundPage().getSelection()将不起作用，因为“BackgroundPage”不是当前网页。你需要类似的东西：

chrome.tabs.executeScript(null, {code:"alert(window.getSelection().toString());"})
//alerts the selected text

但是，将该文本传输回弹出窗口是一个漫长且导致偏头痛的过程。如果您准备好迎接挑战，请阅读 Contentscripts 和 Extension Messaging 。

Answer 3

这是另一个以字符串形式获取选定文本的简单解决方案，您可以轻松使用此字符串将 div 元素子元素附加到代码中：

              var text = '';
              if(window.getSelection){
                text = window.getSelection();
              }else if(document.getSelection){
                text = document.getSelection();
              }else if(document.selection){
                text = document.selection.createRange().text;
              }
              text=text.toString();