Получить выбор страницы, включая 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/

Answer 2

Если вы не хотите, чтобы все братья и сестры, только выделенный HTML, использовали диапазон другие методы, такие как .cloneContents() (для копирования) или .extractContents() (для вырезания).

Здесь я использую .cloneContents():

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
}

Answer 3

Похоже, это и это расширение делает то, что вам нужно.