Get page selection einschließlich HTML?

Question

Ich schreibe eine Chrome-Erweiterung und frage mich, ob es möglich ist, den ausgewählten Text eines bestimmten Tabs einschließlich des zugrunde liegenden HTML zu erhalten? Wenn ich also einen Link auswähle, sollte er auch das <a> Tag zurückgeben.

Ich habe versucht, auf das Kontextmenü Ereignisobjekte suchen (ja, ich bin für diese ein Kontextmenü), und das ist alles, was mit dem Rückruf kommt:

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

Es gibt auch ein Tab-Objekt , aber nichts darin war auch sehr nützlich.

So bin ich irgendwie ratlos hier. Ist das überhaupt möglich? Wenn ja, wäre jede Idee, die Sie haben, großartig. Vielen Dank! :)

Answer 1

Sieht aus wie this und this Erweiterungen tun, was Sie brauchen.

Answer 2

den ausgewählten Text einer Seite zu bekommen ist ziemlich einfach, können Sie so etwas wie

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

tun und Sie erhalten eine Textdarstellung des aktuell ausgewählten Text, die Sie von einem Content-Skript zu einem passieren kann Hintergrundseite oder ein Popup.

Das Holen von HTML-Inhalt ist sehr viel schwieriger, vor allem weil die Auswahl nicht immer an einer sauberen HTML-Grenze im Dokument liegt (was ist, wenn Sie nur einen kleinen Teil einer langen Verknüpfung oder einige Zellen einer Tabelle auswählen beispielsweise). Der direkteste Weg, um das gesamte mit einer Auswahl verknüpfte HTML zu erhalten, ist der Verweis auf commonAncestorContainer, eine Eigenschaft in einem Auswahlbereich, der dem tiefsten Knoten entspricht, der sowohl den Anfang als auch das Ende der Auswahl enthält. Um dies zu erhalten, würden Sie so etwas wie:

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 

Natürlich wird diese enthalten wahrscheinlich eine Menge von HTML, die nicht tatsächlich gewählt wurde. Es ist möglich, dass Sie durch die Kinder des gemeinsamen Vorfahrens iterieren und alles entfernen können, was nicht in der Auswahl war, aber das wird etwas komplizierter und ist möglicherweise nicht notwendig, abhängig davon, was Sie versuchen zu tun.

Um zu zeigen, wie diese in eine Erweiterung alle bis wickeln, ich habe eine kurze Probe geschrieben, die Sie verweisen können: http://github.com/kurrik/chrome-extensions/tree/master/contentscript-selection/

Answer 3

Wenn Sie nicht wollen, alle die Geschwister, nur die ausgewählte HTML, Verwenden Sie range 's andere Methoden wie .cloneContents() (zu kopieren) oder .extractContents() (zu schneiden).

Hier verwende ich .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 
}