aggiunta di funzionalità personalizzate nella console di Chrome

Question

È possibile avere funzioni personalizzate in google-chrome che saranno sempre disponibili nella console (indipendentemente dalla pagina caricata)? Per esempio, mi piacerebbe avere una funzione chiamata echo che sarebbe solo un wrapper attorno a console.log. Ciò consente di risparmiare un po 'di digitazione, ma in seguito potrei voler creare alcune utili funzionalità di debug.

Answer 1

Beh, è ​​piuttosto facile da realizzare. Quello di cui hai bisogno è creare un content script. Questo script verrebbe iniettato in qualsiasi pagina e creerà alcune funzioni globali necessarie che usereste nella vostra console. La parte più difficile è come rendere tali funzioni di contenuto personalizzato come parte del tuo attuale oggetto window, perché normalmente non puoi accedere a funzioni o variabili definite nel tuo script di contenuto dal resto del codice javascript che non è contenuto script. Gli script di contenuto vengono eseguiti nel cosiddetto ambiente isolato.

Gli script di contenuto vengono eseguiti in un ambiente speciale chiamato un mondo isolato. Hanno accesso al DOM della pagina in cui sono inseriti, ma non a nessuna variabile o funzione JavaScript creata dalla pagina. Osserva ogni script di contenuto come se non ci fosse nessun altro JavaScript in esecuzione sulla pagina su cui è in esecuzione. Lo stesso è vero al contrario: JavaScript in esecuzione sulla pagina non può chiamare alcuna funzione o accedere a qualsiasi variabile definita dagli script di contenuto.

Ma ci sono fantasiose soluzioni.
si definisce il file manifesto nel modo seguente:

manifest.json

{ 
    "name": "Content script", 
    "version": "0.1", 
    "manifest_version": 2, 
    "content_scripts": [{ 
     "matches": ["http://*/*"], 
     "js": ["console.js"] 
    }] 
} 

E lo script contenuti:

console.js

function customConsole() { 
    window.myNewFunction = function() { 
     console.log("Hello I'm available from console."); 
    }; 
} 

var script = document.createElement('script'), 
    code = document.createTextNode('(' + customConsole + ')();'); 
script.appendChild(code); 
(document.body || document.head || document.documentElement).appendChild(script); 

Quindi si specifica le tue nuove funzioni come funzioni globali così t Puoi usarli in console.
Dai un'occhiata anche a questo post