获取包括HTML的页面选择？

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.有可能你可以遍历共同祖先的孩子,并删除那些不在选择中的东西,但这将涉及更多,并且根据你想要做的事情可能没有必要.

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