ich meinen benutzerdefinierten Elemente Sidebar Bereich wie folgt zu erstellen:Wie kann benutzerdefinierte DevTools Elements Sidebar-Fenster mit Panel kommunizieren?
chrome.devtools.panels.elements.createSidebarPane(
"MyPane",
function (sidebar) {
sidebar.setPage('my-pane.html');
}
);
my-pane.html:
<html>
<head>
<script src="my-pane.js"></script>
</head>
<body>
<!-- custom UI -->
</body>
</html>
Inside my-pane.js ich bin aktuell ausgewähltes Element zu beobachten:
Bis zu dem Punkt oben funktioniert alles gut: Ich kann eine Auswahl und erstellen Sie eine benutzerdefinierte HTML-Benutzeroberfläche um es in einem Bereich. Weiter geht es, ich möchte etwas detailliertere UI in einem anderen Panel anzeigen. Dies ist, was ich versuche, (unmittelbar nach der Scheibe Schöpfung):
chrome.devtools.panels.create(
'My details',
'icon.png',
'my-panel.html',
function (panel) {
panel.onShown.addListener(function (window) {
chrome.extension.sendMessage({}, function (response) {
console.log(response);
});
});
}
);
Und diese Zeilen nicht mit (in) berühmt:
Port error: Could not establish connection. Receiving end does not exist.
Ist nachrichts/onMessage Muster eine korrekte Art und Weise zwischen Scheibe zu kommunizieren und Panel, beide dargestellt als .html-Seiten?
EDIT
Versuchte DevTools Logistik zusammen und Zugriffsseiten über DOM (beide my-pane.html und my-panel.html zu sein scheinen in <iframe/> s innerhalb einer einzigen übergeordneten Seite zu vermeiden):
..
panel.onShown.addListener(function (window) {
console.log(["PANEL",
window
.top
.frames[0] // Assume this is my-pane.html
.document
.getElementsByTagName('ol')
]);
});
..
Das hat nicht funktioniert:
Unsafe JavaScript attempt to access frame with URL chrome-extension://<..>/devtools.html from frame with URL chrome-extension://<..>/devtools.html. Domains, protocols and ports must match.
BEARBEITEN 2
Dumm mich! Natürlich ist die obige Annahme, dass die erste <iframe/> die richtige ist, völlig falsch. Die folgende produziert mehr sinnvolles Ergebnis:
panel.onShown.addListener(function (window) {
for (var i = 0; i < window.top.frames.length; i++) {
try {
console.log(["PANEL",
window.top.frames[i].document.getElementsByTagName('ol')
]);
break;
} catch (e) {
console.log('BAD!', e);
}
}
});
EDIT 3 (Lösung, nicht aber die Antwort)
chrome.devtools.panels.create(
'My Panel',
'icon.png',
'my-panel.html', // Must define function callbackInMyPanelPage(doc) { .. }
function (panel) {
panel.onShown.addListener(function (window) {
for (var i = 0; i < window.top.frames.length; i++) {
try {
// Use any unique marker to identify our pane document,
// at worst case a security exception will be thrown..
var $el = window.top.frames[i].document.getElementById('myPane');
if ($el) {
try {
// pass pane's document to panel page
window.callbackInMyPanelPage(window.top.frames[i].document);
} catch(ex) {} // Don't interfere with a handler below
break;
}
} catch (e) {
console.warn('Cannot access <iframe/>', e);
}
}
});
}
);
Bonus: eine Visualisierung, welche Art von Kommunikation (grüner Pfeil) war ich versuchen zu erreichen
Ihrem Code fehlt eine Definition eines OnMessage-Ereignis-Listeners. –
@RobW Danke für die Erinnerung: Ich habe versucht generische ** chrome.extension.onMessage.addListener (..) ** an zwei Stellen: 1. Inside _my-pane.js_, direkt nach dem Abonnement onSelectionChanged 2. Innerhalb _devtools.js_, zwischen der Erstellung von Fenstern und Panels. Soweit ich verstehe, heißt dies [Einfache einmalige Anfragen] (http://developer.chrome.com/extensions/messaging.html) – esteewhy
Sind Sie sicher, dass kein Fehler aufgetreten ist, der die Ereignisbindung fehlgeschlagen verursacht? Sie können eine andere Devtools-Instanz innerhalb einer Devtools-Instanz öffnen, um nach Fehlern zu suchen (ich hatte nicht die Zeit, den Codefluss gründlich zu verfolgen; Sie könnten mehrere 'console.log's oder den Quick n dirty' alert ('somenumber'), um dies selbst zu überprüfen). –