Ich habe meine Recherchen gemacht und habe eine Weile damit zu kämpfen gehabt, aber ich brauche deine Hilfe.
Ich erstelle eine Chrome DevTools-Erweiterung. Es sollte das aktuell ausgewählte Element aus dem Bereich "Elemente" als Referenz an ein JS-Objekt übergeben, das in einem Inhaltsskript definiert wurde.
Es ist wichtig, dass ich die Referenz an das ausgewählte Element weitergebe oder eine andere Möglichkeit, das Element aus dem Inhaltsskript zu identifizieren.
Ich verstehe den Workflow mit "isolierten Welten" in Chrome DevTools. Ich verstehe auch Messaging zwischen Erweiterungsseiten, Hintergrundseiten und Inhaltsskripten. Dies geschieht nur mit JSON-Primitiven, daher wird kein JS-Bereich übergeben.
Wie kann ich das Element, das im Elementfenster von devtools ausgewählt wurde, an das Inhaltsskript weitergeben, das auf der überprüften Seite existiert?
Bearbeiten
Folgendes weiß ich bisher:
Eine Referenz auf das ausgewählte Element erhalten:
%Vor%Dieser Funktionsausdruck wird im Kontext der inspizierten Seite ausgeführt, nicht im Kontext der Erweiterung "devtools" und nicht im Kontext der "isolierten Welt" des Inhaltsskripts. Ich glaube nicht, dass es möglich ist, einen Verweis auf einen anderen Kontext unter Verwendung von Schließungen zu geben.
Der Verweis auf das ausgewählte DOM-Element chrome.devtools
Der Namensraum chrome.devtools.inspectedWindow
Workaround
Als Workaround wählte ich das gemeinsam genutzte DOM, um das ausgewählte Element mit einem Datenattribut zu markieren und es im Kontext des Inhaltsskripts erneut auszuwählen. Messaging wird verwendet, um den Datenattributmarker herumzuführen.
Hier ist eine vereinfachte Version des Codes:
Auf der devtools-Erweiterung Seite:
%Vor%Im Inhaltsskript :
%Vor%Es ist keine saubere Lösung, aber ich kann es für meine Bedürfnisse verwenden.
Gibt es einen einfacheren Weg, um das gleiche Ergebnis zu erzielen? Identifizieren Sie aus einem Inhaltsskript das Element, das in den Devtools-Elementen ausgewählt wurde?
Die API für chrome.devtools.inspectedWindow wurde aktualisiert zur Unterstützung der Ausführung von Skripts im Rahmen der das Inhaltsskript.
Dieses Update in der offiziellen Chrome-API macht unsere oben beschriebenen Hacks überflüssig. Wir können jetzt mit:
das erwartete Ergebnis erzielen %Vor% Die %code% Parameter wird das Element in der Elemente Feld ausgewählt verweisen.
meine Art, es zu tun, ist auch irgendwie ein Hack. Anstatt ein in Ihrer Erweiterung definiertes Inhaltsskript einzufügen, können Sie ein Skript-Tag einfügen, das online auf Ihre Dateien verweist (oder lokal, relativ zu inspiziertem HTML):
%Vor%Online-Datei definiert eine globale:
%Vor%und devtools können es aufrufen und das ausgewählte Element übergeben:
%Vor%Ich habe jedoch keine Möglichkeit gefunden, eine Referenz zurück vom inspizierten Fenster zur Devtools-Erweiterung mit diesem Setup zu senden.
Tags und Links javascript google-chrome-extension google-chrome-devtools