Cum să vizualizați codul sursă al unei extensii Chrome

Come visualizzare il codice sorgente di un’estensione di Chrome

⌛ Reading Time: 5 minutes

Le estensioni che installi nel browser Chrome sul tuo computer non sono altro che un gruppo di file di codice sorgente che svolgono le attività predefinite. Alcune menti curiose là fuori potrebbero voler vedere il codice esatto che crea queste estensioni. Mentre visualizzare il codice sorgente di una pagina web in Chrome è facile come fare clic con il pulsante destro del mouse sulla pagina e selezionare un’opzione, accedere al codice sorgente di un’estensione di Chrome non è così facile.

Tuttavia, ciò non dovrebbe impedirti di visualizzare il codice sorgente di un’estensione. Utilizzando i due metodi seguenti, dovresti essere in grado di visualizzare il codice sorgente di un’estensione di Chrome sul tuo computer.

I seguenti metodi vengono dimostrati utilizzando un Mac.

Visualizza il codice sorgente di un’estensione di Chrome in Esplora file

Sebbene i file per le estensioni che installi in Chrome vengano salvati sul tuo computer, non sono molto facili da trovare poiché i nomi delle loro cartelle sono qualcosa di scientifico. Tuttavia, con il metodo seguente dovresti essere in grado di rivelare quelle cartelle in cui si trovano i file di origine dell’estensione.

1. Apri Chrome sul tuo computer e digita chrome://extensions nella barra degli indirizzi e premere Invio. Si aprirà l’elenco delle estensioni nel browser.

2. Quando si apre la pagina delle estensioni, selezionare la casella denominata “Modalità sviluppatore” nell’angolo in alto a destra. Dovrebbe consentirti di vedere maggiori dettagli sulle estensioni nella pagina.

extsource-sviluppatore

3. Ora dovresti essere in grado di vedere gli ID delle estensioni mostrate sullo schermo. Quello che devi fare qui è annotare l’ID dell’estensione di cui desideri vedere i file del codice sorgente.

Nell’esempio seguente ho evidenziato l’ID per l’estensione “Adblock for Youtube”. Rivelerò il codice sorgente di questa estensione nei seguenti passaggi.

extsource-id

4. Ora che hai l’ID per l’estensione, digita chrome://version nella barra degli indirizzi del browser e premere Invio. Dovrebbe aiutarti a individuare la cartella in cui esistono i file di estensione.

extsource-version

5. Nella pagina della versione di Chrome, evidenziare e copiare il valore di “Profile Path” negli appunti. È mostrato nella seguente schermata.

extsource-profilo

6. Apri Finder (o il File Manager del tuo sistema operativo). Fai clic su “Vai” in alto e seleziona “Vai alla cartella …” Ti consentirà di accedere alla cartella delle estensioni sul tuo Mac.

extsource-goto

7. Incolla il percorso del profilo che hai copiato negli appunti nel pannello Vai alla cartella e fai clic su “Vai” per aprire la cartella in una finestra del Finder.

extsource-path

8. Fare doppio clic sulla cartella “Estensioni” nella schermata seguente per aprire la cartella in cui sono disponibili tutte le estensioni.

Quello che vedrai qui è una serie di cartelle con alcuni nomi confusi. Sebbene queste cartelle siano per le estensioni che hai installato in Chrome, non hanno lo stesso nome del nome dell’estensione e quindi è difficile trovare la cartella per la tua estensione.

Ora cerca la cartella che ha lo stesso nome dell’ID dell’estensione che hai annotato in uno dei passaggi precedenti. Questa è la cartella per la tua estensione.

extsource-cartella

9. Tutti i file di estensione dovrebbero essere presenti nella cartella e puoi aprirli con il tuo editor preferito per vedere i loro codici.

È così che puoi visualizzare il codice sorgente di un’estensione di Chrome senza utilizzare uno strumento di terze parti. Se non ti dispiace installare un’estensione, la sezione seguente è per te.

Visualizza il codice sorgente di un’estensione di Chrome utilizzando un’estensione

1. Apri Chrome sul tuo computer, vai al Visualizzatore sorgente estensione Chrome pagina sul Chrome Web Store e fai clic su “Aggiungi a Chrome”.

extsource-add

2. Fare clic su “Aggiungi estensione” nella schermata seguente.

extsource-prompt

3. Dopo che l’estensione è stata aggiunta al browser, apri la pagina di un’estensione sul Chrome Web Store, ad esempio la pagina dell’estensione Anteprima Markdown.

Quando la pagina viene caricata, fai clic sull’icona CRX nella barra delle estensioni in Chrome e seleziona “Visualizza sorgente”.

extsource-crx

4. Dovresti essere in grado di vedere il codice sorgente dell’estensione selezionata nella finestra di Chrome.

extsource-code

Conclusione

Se sei curioso di vedere i codici sorgente delle estensioni che installi nel tuo browser, la guida sopra dovrebbe aiutarti a farlo utilizzando due semplici modi.

Credito immagine: Codice sorgente Clef