Получить выбор страницы, включая HTML?

Я пишу расширение для Chrome, и мне было интересно, можно ли получить выделенный текст определенной вкладки, включая базовый HTML? Поэтому, если я выбираю ссылку, она также должна возвращать тег <a>.

Я попытался просмотреть объекты событий контекстного меню (да, я использую для этого контекстное меню), и это все, что приходит с обратным вызовом:

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

Он также возвращает объект Tab, но в нем тоже нет ничего полезного.

Так что тут я как-то растерялся. Это вообще возможно? Если это так, любые идеи, которые у вас могут быть, были бы замечательными. Спасибо! :)


google-chrome google-chrome-extension
person qJake    schedule 11.08.2010    source источник
comment
Можете ли вы предоставить правильное решение?   -  person Rafique Mohammed    schedule 25.05.2015
comment
Это было 5 лет назад, я не верю, что у меня больше нет расширения, извините.   -  person qJake    schedule 26.05.2015

Ответы (2)


arrow_upward
11
arrow_downward

Получить выделенный текст страницы довольно просто, вы можете сделать что-то вроде

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

person Arne Roomann-Kurrik    schedule 17.08.2010
comment
Я использовал объект Range, но я получил решение из исходного кода расширения, опубликованного другим парнем, извините. Тем не менее, вы все равно получаете голосование за правильную информацию. :) - person qJake; 19.08.2010

arrow_upward
3
arrow_downward

Если вам не нужны все братья и сестры, а только выбранный HTML, используйте range, такие как .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
}
person Zach Saucier    schedule 17.10.2016