Tre diversi contesti
Come uno sviluppatore di estensioni di Chrome, puoi distinguere tre diversi ambienti.
- codice di estensione, viene eseguito nel processo della vostra estensione Chrome
- Content scripts, in esecuzione nel processo della scheda.
- Codice non interno in esecuzione nel processo della scheda (injected by content scripts).
noti che quando una pagina non estensione incorpora <iframe src="chrome-extension://EXTENSIONID/page.htm">, quindi page.htm non è visto come una parte della proroga, in quanto tutti i fotogrammi in una quota di scheda lo stesso processo, in questo caso un processo non estensione Chrome is a multi-process application.
Accesso all'oggetto window all'interno di un processo di estensione
Poiché tutto il codice di estensione viene eseguito nello stesso processo, possono accedere reciprocamente window oggetto globale. Questa funzione non è ben nota, ma consente di manipolare direttamente oggetti JavaScript e DOM all'interno della stessa procedura di estensione. In genere è preferibile non utilizzare questo metodo, ma utilizzare le API message passing.
// To access the `window` of a background page, use
var bgWindowObject = chrome.extension.getBackgroundPage() ;
// To access the `window` of an event or background page, use:
chrome.runtime.getBackgroundPage (function(bgWindowObject) {
// Do something with `bgWindow` if you want
});
// To access the `window` of the badge's popup page (only if it's open!!!), use
var popupWindowObject = chrome.extension.getViews({type:'popup'})[0] ;
// To access the `window` of the options page (called /options.html), use
var allWindowObjects = chrome.extension.getViews({type:'tab'}) ;
var popupWindowObjects = allWindowObjects.filter(function(windowObject) {
return windowObject.location.pathname == '/options.html';
});
// Example: Get the `window` object of the first options page:
var popupWindowObject = popupWindowObjects[0];
Per mantenere questo breve tratto, ho volutamente limitato l'esempio di codice per una dimostrazione di accedere ad altre window oggetti globali. È possibile utilizzare questi metodi per definire un metodo globale, impostare una variabile globale, chiamare una funzione globale, ecc.
... a condizione che la pagina sia aperta. Qualcuno thought che il popup del window sia sempre disponibile. Questo non è vero, quando il popup è chiuso, l'oggetto globale è eliminato!
Un canale di messaggio ha sempre due estremità: Il mittente e un ricevitore.
Per diventare un ricevitore, associare un listener di eventi utilizzando il metodo chrome.runtime.onMessage.addListener. Questo può essere fatto dal codice di estensione e dagli script di contenuto.
Per passare i messaggi all'interno dell'estensione, utilizzare chrome.runtime.sendMessage. Se si desidera inviare un messaggio a un'altra scheda, chiamare chrome.tabs.sendMessage. La scheda obiettivo viene specificata includendo un numero intero (tabId) come primo argomento. Si noti che una pagina di sfondo può solo inviare un messaggio a una scheda. Per raggiungere tutte le schede, è necessario chiamare il metodo per ogni scheda. Per esempio:
chrome.tabs.query ({}, function(tabs) {
for (var i=0; i<tabs.length; i++) {
chrome.tabs.sendMessage (tabs[i].id, "some message");
}
});
script contenuti possono chiamare solo chrome.runtime.sendMessage per inviare un messaggio a codice di estensione. Se si desidera inviare un messaggio da uno script di contenuto a un altro script di contenuto, è necessaria una pagina di sfondo/evento, che accetta un messaggio e lo invia alla scheda desiderata.Vedere this answer per un esempio.
I metodi sendMessage accettano una funzione opzionale, che viene ricevuta come terzo argomento per l'evento onMessage.
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
if (message === 'message') sendResponse('the response');
});
chrome.runtime.sendMessage('message', function(response) {
console('sendResponse was called with: ' + response);
});
L'esempio precedente mostra un comportamento evidente. Le cose diventano più complicate quando si desidera inviare una risposta in modo asincrono, ad esempio se si desidera eseguire una richiesta AJAX per recuperare alcuni dati. Quando la funzione onMessage ritorna senza aver chiamato sendResponse, Chrome invierà immediatamente sendResponse. Dal momento che sendResponse può essere chiamato solo una volta, verrà visualizzato il seguente errore:
Could not send response: The chrome.runtime.onMessage listener must return true if you want to send a response after the listener returns (message was sent by extension EXTENSION ID HERE)
Do come l'errore suggerisce, aggiunge return true; all'interno del vostro onMessage listener di eventi:
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
setTimeout(function() { // Example: asynchronous invocation of sendResponse
sendResponse('async response');
}, 200);
return true;
});
ho spiegato l'applicazione pratica di un semplice messaggio di una volta che passa in questa sezione. Se vuoi saperne di più sui canali dei messaggi a lunga durata o sulla messaggistica inter-estesa, leggi lo tutorial from the official documentation.
L'API di passaggio del messaggio ha subito diverse modifiche al nome. Tienilo a mente se leggi vecchi esempi. La storia e le note di compatibilità possono essere trovate here.
comunicazione tra uno script contenuti e la pagina
E 'possibile comunicare con la pagina. Apsillers ha creato una risposta eccellente che spiega come impostare un canale di comunicazione tra una pagina (non di estensione) e uno script di contenuto. Leggi la sua risposta allo Can a site invoke a browser extension?.
Il vantaggio del metodo di apsiller su one from the documentation è che viene utilizzato un evento personalizzato. La documentazione utilizza window.postMessage per inviare un messaggio alla pagina, ma ciò potrebbe causare conflitti con pagine mal codificate che non si aspettano eventi del messaggio.
Correlati: [Spiega la comunicazione in background con Google Chrome Extensions] (http://stackoverflow.com/questions/4743540/please-explain-background-communication-with-google-chrome-extensions) –