Question

我正在编写Chrome扩展程序，我想知道是否可以获取特定选项卡的选定文本，包括基础HTML？因此，如果我选择一个链接，它也应该返回<a>标记。

我尝试查看上下文菜单事件对象（是的，我正在使用上下文菜单），这就是回调附带的所有内容：

editable : false
menuItemId : 1
pageUrl : <the URL>
selectionText : <the selected text in plaintext formatting, not HTML>

它还返回一个Tab对象，但其中没有任何内容非常有用。

所以我在这里不知所措。这甚至可能吗？如果是这样，你可能会有任何想法。谢谢！：）

Answer 1

获取页面的选定文本非常简单，您可以执行类似

的操作

var text = window.getSelection().toString();

您将获得当前所选文本的文本表示，您可以将其从内容脚本传递到后台页面或弹出窗口。

获取HTML内容要困难得多，主要是因为文档中的选择并不总是处于干净的HTML边界（如果您只选择长链接的一小部分，或者选择表的几个单元格，那该怎么办？例）。获取与选择关联的所有html的最直接方法是引用commonAncestorContainer，它是选择范围上的属性，对应于包含选择的开始和结束的最深节点。为此，您可以执行以下操作：

var selection = window.getSelection();
// Only works with a single range - add extra logic to 
// iterate over more ranges if needed
var range = selection.getRangeAt(0);
var container = range.commonAncestorContainer;
var html = container.innerHTML

当然，这可能包含大量未实际选择的HTML。有可能你可以遍历共同祖先的孩子，并删除那些不在选择中的东西，但这将涉及更多，可能没有必要，这取决于你想要做什么。 / p>

为了展示如何将这一切包装到扩展中，我写了一个简短的示例，您可以参考： http://github.com/kurrik/chrome-extensions/tree/master/contentscript-selection/

Answer 2

如果您不想要所有兄弟姐妹，只需要选择的HTML，请使用.cloneContents()的其他方法，例如.extractContents()（复制）或function getSelectedHTML() { var range = window.getSelection().getRangeAt(0); // Get the selected range var div = document.createElement("div"); div.appendChild(range.cloneContents()); // Get the document fragment from selected range return div.innerHTML; // Return the actual HTML }（剪切）。

我在这里使用range：

SELECT *
  FROM (SELECT *
          FROM USER
         WHERE LastName = 'Dupont')
 WHERE FirstName = 'Robert'

Answer 3

看起来this和this扩展可以满足您的需求。

获取包括HTML的页面选择？

3 个答案: