Gli script di contenuto vengono eseguiti in un ambiente "mondo isolato" . Devi iniettare il tuo state()metodo nella pagina stessa.
Quando si desidera utilizzare una delle chrome.*API nello script, è necessario implementare un gestore eventi speciale, come descritto in questa risposta: Estensione di Chrome : recupero del messaggio originale di Gmail .
Altrimenti, se non devi usare le chrome.*API, ti consiglio vivamente di iniettare tutto il tuo codice JS nella pagina aggiungendo un <script>tag:
Sommario
- Metodo 1: iniettare un altro file
- Metodo 2: iniettare codice incorporato
- Metodo 2b: utilizzo di una funzione
- Metodo 3: utilizzo di un evento inline
- Valori dinamici nel codice iniettato
Metodo 1: iniettare un altro file
Questo è il metodo più semplice / migliore quando hai un sacco di codice. Includi il tuo codice JS effettivo in un file all'interno della tua estensione, per esempio script.js. Quindi lascia che il tuo script dei contenuti sia il seguente (spiegato qui: Javascript personalizzato "Collegamento applicazione" di Google Chome ):
var s = document.createElement('script');
// TODO: add "script.js" to web_accessible_resources in manifest.json
s.src = chrome.runtime.getURL('script.js');
s.onload = function() {
this.remove();
};
(document.head || document.documentElement).appendChild(s);
Nota: se si utilizza questo metodo, il script.jsfile iniettato deve essere aggiunto alla "web_accessible_resources"sezione ( esempio ). In caso contrario, Chrome rifiuterà di caricare lo script e visualizzerà il seguente errore nella console:
Negare il carico dell'estensione chrome: // [EXTENSIONID] /script.js. Le risorse devono essere elencate nella chiave manifest web_accessible_resources per essere caricate da pagine esterne all'estensione.
Metodo 2: iniettare codice incorporato
Questo metodo è utile quando si desidera eseguire rapidamente un piccolo pezzo di codice. (Vedi anche: Come disabilitare i tasti di scelta rapida di Facebook con l'estensione di Chrome? ).
var actualCode = `// Code here.
// If you want to use a variable, use $ and curly braces.
// For example, to use a fixed random number:
var someFixedRandomValue = ${ Math.random() };
// NOTE: Do not insert unsafe variables in this way, see below
// at "Dynamic values in the injected code"
`;
var script = document.createElement('script');
script.textContent = actualCode;
(document.head||document.documentElement).appendChild(script);
script.remove();
Nota: i letterali dei modelli sono supportati solo in Chrome 41 e versioni successive. Se vuoi che l'estensione funzioni in Chrome 40-, usa:
var actualCode = ['/* Code here. Example: */' + 'alert(0);',
'// Beware! This array have to be joined',
'// using a newline. Otherwise, missing semicolons',
'// or single-line comments (//) will mess up your',
'// code ----->'].join('\n');
Metodo 2b: utilizzo di una funzione
Per un grosso pezzo di codice, quotare la stringa non è fattibile. Invece di utilizzare un array, è possibile utilizzare una funzione e stringere:
var actualCode = '(' + function() {
// All code is executed in a local scope.
// For example, the following does NOT overwrite the global `alert` method
var alert = null;
// To overwrite a global variable, prefix `window`:
window.alert = null;
} + ')();';
var script = document.createElement('script');
script.textContent = actualCode;
(document.head||document.documentElement).appendChild(script);
script.remove();
Questo metodo funziona perché l' +operatore su stringhe e una funzione converte tutti gli oggetti in una stringa. Se si intende utilizzare il codice più di una volta, è consigliabile creare una funzione per evitare la ripetizione del codice. Un'implementazione potrebbe apparire come:
function injectScript(func) {
var actualCode = '(' + func + ')();'
...
}
injectScript(function() {
alert("Injected script");
});
Nota: poiché la funzione è serializzata, l'ambito originale e tutte le proprietà associate vengono perse!
var scriptToInject = function() {
console.log(typeof scriptToInject);
};
injectScript(scriptToInject);
// Console output: "undefined"
Metodo 3: utilizzo di un evento inline
A volte, si desidera eseguire immediatamente un codice, ad esempio per eseguire un codice prima di <head>creare l' elemento. Questo può essere fatto inserendo un <script>tag con textContent(vedi metodo 2 / 2b).
Un'alternativa, ma non è consigliata, è utilizzare gli eventi in linea. Non è consigliabile perché se la pagina definisce una politica di sicurezza dei contenuti che proibisce gli script incorporati, i listener di eventi incorporati vengono bloccati. Gli script incorporati iniettati dall'estensione, invece, continuano a essere eseguiti. Se desideri comunque utilizzare eventi inline, ecco come:
var actualCode = '// Some code example \n' +
'console.log(document.documentElement.outerHTML);';
document.documentElement.setAttribute('onreset', actualCode);
document.documentElement.dispatchEvent(new CustomEvent('reset'));
document.documentElement.removeAttribute('onreset');
Nota: questo metodo presuppone che non vi siano altri listener di eventi globali che gestiscono l' resetevento. Se c'è, puoi anche scegliere uno degli altri eventi globali. Basta aprire la console JavaScript (F12), digitare document.documentElement.one selezionare gli eventi disponibili.
Valori dinamici nel codice iniettato
Occasionalmente, è necessario passare una variabile arbitraria alla funzione iniettata. Per esempio:
var GREETING = "Hi, I'm ";
var NAME = "Rob";
var scriptToInject = function() {
alert(GREETING + NAME);
};
Per iniettare questo codice, è necessario passare le variabili come argomenti alla funzione anonima. Assicurati di implementarlo correttamente! Quanto segue non funzionerà:
var scriptToInject = function (GREETING, NAME) { ... };
var actualCode = '(' + scriptToInject + ')(' + GREETING + ',' + NAME + ')';
// The previous will work for numbers and booleans, but not strings.
// To see why, have a look at the resulting string:
var actualCode = "(function(GREETING, NAME) {...})(Hi, I'm ,Rob)";
// ^^^^^^^^ ^^^ No string literals!
La soluzione è usare JSON.stringifyprima di passare l'argomento. Esempio:
var actualCode = '(' + function(greeting, name) { ...
} + ')(' + JSON.stringify(GREETING) + ',' + JSON.stringify(NAME) + ')';
Se hai molte variabili, vale la pena usarle JSON.stringifyuna volta, per migliorare la leggibilità, come segue:
...
} + ')(' + JSON.stringify([arg1, arg2, arg3, arg4]) + ')';
player.addEventListener("onStateChange", state);