Google Chrome / Firefox non visualizza l’output dell’estensione nella console

Sto provando a testare codice di esempio per l’estensione web per i browser. Ma non funziona. Ho controllato la console per Google Chrome e anche per Firefox. Non stampa nulla. Quello che segue è il mio codice:

manifest.json :

{ "description": "Demonstrating webRequests", "manifest_version": 2, "name": "webRequest-demo", "version": "1.0", "permissions": [ "webRequest" ], "background": { "scripts": ["background.js"] } } 

background.js :

 function logURL(requestDetails) { console.log("Loading: " + requestDetails.url); } chrome.webRequest.onBeforeRequest.addListener( logURL, {urls: [""]} ); console.log("Hell o extension background script executed"); 

Mi sto perdendo qualcosa?

Firefox

In Firefox, il tuo codice funziona (uscite per console), come è scritto nella domanda.

Se non lo vedi nella console, probabilmente stai guardando la console sbagliata.

Mozilla descrive quale output di estensione può essere visto in quale console nella sua pagina di debug .

Console del browser

Dovresti utilizzare la Console del browser . Puoi accedervi da Tools➜Web Developer➜Browser Console (scorciatoia da tastiera CtrlShiftJ , o CmdShiftJ su Mac).

Browser Toolbox

Se lo hai abilitato, puoi anche utilizzare la console di Browser Toolbox . Puoi accedervi da Tools➜Web Developer➜Browser Toolbox (scorciatoia da tastiera CtrlAltShiftI ; Su un Mac: CmdAltShiftI ).

Add-on Debugger

Per eseguire il debug del componente aggiuntivo è ansible utilizzare il Debugger aggiuntivo. Puoi accedervi per quanto about:debugging ➞Debug.

Console Web

Probabilmente stai guardando la console Web (scorciatoia da tastiera F12 ) associata a una sola scheda. Questo è quello che vuoi quando esegui il debug di una pagina web, ma non un componente aggiuntivo. Per uno script di contenuto che viene inserito in quella scheda, l’output di console.log() verrà visualizzato in questa console. Tuttavia, non vedrai l’output da qualsiasi altra parte del tuo componente aggiuntivo (ad esempio, non script di contenuto in altre tabs, non script in background, ecc.).

Google Chrome

La visualizzazione della console corretta per la tua estensione è un po ‘più complessa in Chrome. L’output della console verrà visualizzato solo in una delle molteplici posizioni possibili, a seconda del contesto in cui è stato eseguito console.log() . Ognuno dei seguenti strumenti DevTool è indipendente l’uno dall’altro e viene visualizzato in windows o tabs separate. La visualizzazione nella scheda associata (in basso o in basso) è l’impostazione predefinita per DevTools associata alle pagine Web e agli script di contenuto, poiché sono specifici per la scheda. Per la pagina Web / script DevTools, hai la possibilità di visualizzarlo in una finestra separata, o ancorata nella scheda (laterale o inferiore).

Per la tua pagina di sfondo

Come spiegato da Srujan Reddy , devi passare attraverso selezioni multiple in un menu a discesa, per accedere alla pagina chrome://extensions (oppure puoi digitarla manualmente come URL o utilizzare un segnalibro) quindi selezionare entrambi una casella di controllo (“Modalità sviluppatore”) e quindi fare clic sul collegamento “pagina di sfondo”. Quindi, devi selezionare la scheda “Console” nella finestra che si apre.

È molto più facile mostrare cosa devi fare:
Mostra console per l'estensione su Google Chrome

Per i tuoi script di contenuto

L’output verrà mostrato nella normale console Web (negli Strumenti per sviluppatori Web). È ansible aprirlo premendo F12 (o altri collegamenti) nella pagina Web in cui è stato iniettato lo script di contenuto. Ogni console Web mostrerà solo l’output degli script inseriti in quella scheda.

Facendo quanto sopra, mostra l’output della console.* Dall’estensione, ma la riga di comando, il debugger, ecc. Della console della console risulterà nel contesto della pagina, non nello script del contenuto.

Se si desidera utilizzare la riga di comando JavaScript della console nel contesto degli script di contenuto immessi in una pagina Web, è necessario selezionare il contesto dello script del contenuto dell’estensione dal menu a discesa nella parte superiore sinistra della finestra della console. Questo menu a discesa inizierà normalmente con il valore “top”. L’elenco a discesa avrà selezioni per ciascuno dei contesti dello script di contenuto (uno per estensione con script iniettati).

Per il tuo Popup

browserAction clic con il pulsante destro del mouse sul pulsante del browserAction e seleziona “Ispeziona browserAction “. In alternativa, fare clic con il tasto destro del mouse all’interno del popup e selezionare “Ispeziona”. O aprirà DevTools per la pagina popup. Il popup verrà mantenuto aperto in più condizioni di quanto normalmente farebbe, ma resterà comunque chiuso se cambi scheda, ecc.

Per la tua pagina Opzioni

Fai clic con il pulsante destro del mouse sul contenuto principale del popup Opzioni (non sulla barra del titolo) e seleziona “Ispeziona”. Questo aprirà DevTools per la pagina delle opzioni.

Per il pannello o una pagina all’interno dell’estensione caricata in una scheda

Quando il pannello o la scheda è a fuoco, puoi aprire DevTools premendo F12 (o altre scorciatoie), o aprendo il menu di scelta rapida (tasto destro) e selezionando “Ispeziona”.

Quale console stai visualizzando per i log?

Se stai visualizzando la console su una scheda, allora quella è la posizione sbagliata.

Apri impostazioni / estensioni o in un nuovo tipo di scheda

 chrome://extensions 

Sotto la tua estensione clicca sul link “Pagina di sfondo” che è dove puoi guardare i registri

** Assicurati che la modalità Sviluppatore sia selezionata

Sì per Chrome devi fare clic sul link della pagina di sfondo menzionato, ma non sarà lì a meno che non lo imposti come persistente:

 "background": { "persistent": true, "scripts": ["background.js"] }