Come ricaricare automaticamente un'estensione di Chrome che sto sviluppando?

Vorrei che la mia estensione di Chrome si ricaricasse ogni volta che salvo un file nella cartella delle estensioni, senza dover fare esplicito clic su "ricaricare" in chrome: // extensions /. È possibile?

Modifica: sono consapevole di poter aggiornare l'intervallo in cui Chrome ricarica le estensioni, che è una soluzione a metà strada, ma preferirei fare in modo che il mio editor (emacs o textmate) si attivi al salvataggio di una ricarica o chiedendo a Chrome di monitorare la directory per le modifiche.

Puoi utilizzare " Extensions Reloader " per Chrome:

Ricarica tutte le estensioni decompresse utilizzando il pulsante della barra degli strumenti dell'estensione o selezionando " http: //reload.extensions "

Se hai mai sviluppato un'estensione di Chrome, potresti aver voluto automatizzare il processo di ricarica dell'estensione non compressa senza dover passare attraverso la pagina delle estensioni.

"Extensions Reloader" ti consente di ricaricare tutte le estensioni decompresse in 2 modi:

1 - Pulsante della barra degli strumenti dell'estensione.

2 - Navigazione verso " http: //reload.extensions ".

L'icona della barra degli strumenti ricaricherà le estensioni decompresse con un solo clic.

"Ricaricare tramite la navigazione" ha lo scopo di automatizzare il processo di ricarica utilizzando gli script "post build": basta aggiungere una navigazione a " http: //reload.extensions " utilizzando Chrome per lo script e si avrà una finestra di Chrome aggiornata.

Aggiornamento: a partire dal 14 gennaio 2015, l'estensione è open source e disponibile su GitHub .

Aggiornamento : ho aggiunto una pagina delle opzioni, in modo da non dover più trovare e modificare manualmente l'ID dell'estensione. CRX e codice sorgente sono disponibili su: https://github.com/Rob--W/Chrome-Extension-Reloader
Update 2: aggiunta scorciatoia (vedi il mio repository su Github).
_{Il codice originale, che include le funzionalità di base, è mostrato di seguito .}

Crea un'estensione e usa il metodo Azione browser insieme chrome.extension.managementall'API per ricaricare l'estensione decompressa.

Il codice seguente aggiunge un pulsante a Chrome, che ricaricherà un'estensione al clic.

manifest.json

{
    "name": "Chrome Extension Reloader",
    "version": "1.0",
    "manifest_version": 2,
    "background": {"scripts": ["bg.js"] },
    "browser_action": {
        "default_icon": "icon48.png",
        "default_title": "Reload extension"
    },
    "permissions": ["management"]
}

bg.js

var id = "<extension_id here>";
function reloadExtension(id) {
    chrome.management.setEnabled(id, false, function() {
        chrome.management.setEnabled(id, true);
    });
}
chrome.browserAction.onClicked.addListener(function(tab) {
    reloadExtension(id);
});

icon48.png: Scegli una bella icona 48x48, ad esempio:

in qualsiasi funzione o evento

chrome.runtime.reload();

ricaricherà la tua estensione ( documenti ). È inoltre necessario modificare il file manifest.json , aggiungendo:

...
"permissions": [ "management" , ...]
...

Ho realizzato un semplice script incorporabile eseguendo hot ricaric:

https://github.com/xpl/crx-hotreload

Controlla le modifiche ai file nella directory di un'estensione. Quando viene rilevata una modifica, ricarica l'estensione e aggiorna la scheda attiva (per riattivare gli script di contenuto aggiornati).

• Funziona controllando i timestamp dei file
• Supporta directory nidificate
• Si disabilita automaticamente nella configurazione di produzione

Un'altra soluzione sarebbe quella di creare uno script livereload personalizzato (extension-reload.js):

// Reload client for Chrome Apps & Extensions.
// The reload client has a compatibility with livereload.
// WARNING: only supports reload command.

var LIVERELOAD_HOST = 'localhost:';
var LIVERELOAD_PORT = 35729;
var connection = new WebSocket('ws://' + LIVERELOAD_HOST + LIVERELOAD_PORT + '/livereload');

connection.onerror = function (error) {
  console.log('reload connection got error:', error);
};

connection.onmessage = function (e) {
  if (e.data) {
    var data = JSON.parse(e.data);
    if (data && data.command === 'reload') {
      chrome.runtime.reload();
    }
  }
};

Questo script si collega al server livereload tramite websocket. Quindi, emetterà una chiamata chrome.runtime.reload () al momento del ricaricamento del messaggio da livereload. Il prossimo passo sarebbe quello di aggiungere questo script da eseguire come script di sfondo in manifest.json e voilà!

Nota: questa non è la mia soluzione. Lo sto solo postando. L'ho trovato nel codice generato del generatore di estensioni di Chrome (ottimo strumento!). Sto pubblicando questo qui perché potrebbe essere d'aiuto.

Le estensioni di Chrome hanno un sistema di autorizzazioni che non lo consentirebbe (alcune persone in SO avevano lo stesso problema di te ), quindi richiedere loro di "aggiungere questa funzione" non funzionerà IMO. C'è una mail di Google Gruppi con estensioni di Chromium con una soluzione proposta (teoria) che utilizza chrome.extension.getViews(), ma non è garantito che funzioni neanche.

Se fosse possibile aggiungere ad manifest.jsonalcune pagine interne di Chrome come chrome://extensions/, sarebbe possibile creare un plug-in che interagirebbe con l' Reloadancora e, utilizzando un programma esterno come XRefresh (un plug-in di Firefox - c'è una versione di Chrome che utilizza Ruby e WebSocket ), otterrai esattamente ciò di cui hai bisogno:

XRefresh è un plug-in del browser che aggiornerà la pagina Web corrente a causa della modifica dei file nelle cartelle selezionate. Ciò rende possibile eseguire la modifica di pagine live con il tuo editor HTML / CSS preferito.

Non è possibile farlo, ma penso che tu possa usare questo stesso concetto in modo diverso.

Potresti provare a trovare soluzioni di terze parti invece che, dopo aver visto le modifiche in un file (non conosco emacs né Textmate, ma in Emacs sarebbe possibile associare una chiamata all'app in un'azione "salva file"), solo clic in una coordinata specifica di un'applicazione specifica: in questo caso è l' Reloadancoraggio dalla tua estensione in fase di sviluppo (lasci una finestra di Chrome aperta solo per questo ricaricare).

(Pazzesco ma può funzionare)

Ecco una funzione che puoi utilizzare per guardare i file per le modifiche e ricaricare se vengono rilevate modifiche. Funziona eseguendo il polling tramite AJAX e ricaricandolo tramite window.location.reload (). Suppongo che non dovresti usarlo in un pacchetto di distribuzione.

function reloadOnChange(url, checkIntervalMS) {
    if (!window.__watchedFiles) {
        window.__watchedFiles = {};
    }

    (function() {
        var self = arguments.callee;
        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (__watchedFiles[url] &&
                    __watchedFiles[url] != xhr.responseText) {
                    window.location.reload();
                } else {
                    __watchedFiles[url] = xhr.responseText
                    window.setTimeout(self, checkIntervalMS || 1000);
                }
            }
        };

        xhr.open("GET", url, true);
        xhr.send();
    })();
}

reloadOnChange(chrome.extension.getURL('/myscript.js'));

Forse sono un po 'in ritardo alla festa, ma l'ho risolto per me creando https://chrome.google.com/webstore/detail/chrome-unpacked-extension/fddfkmklefkhanofhlohnkemejcbamln

Funziona ricaricando la chrome://extensionspagina, ogni volta che gli file.changeeventi arrivano tramite socket Web.

Un esempio basato su Gulp su come emettere file.changeeventi in caso di modifiche ai file in una cartella di estensione è disponibile qui: https://github.com/robin-drexler/chrome-extension-auto-reload-watcher

Perché ricaricare l'intera scheda invece di usare semplicemente l'API di gestione delle estensioni per ricaricare / riattivare le estensioni? Attualmente la disabilitazione e l'abilitazione delle estensioni causa la chiusura di qualsiasi finestra di ispezione aperta (registro della console, ecc.), Che ho trovato troppo fastidioso durante lo sviluppo attivo.

C'è un plug-in di ricarica automatico se stai sviluppando usando il webpack: https://github.com/rubenspgcavalcante/webpack-chrome-extension-reloader

const ChromeExtensionReloader = require('webpack-chrome-extension-reloader');

plugins: [
    new ChromeExtensionReloader()
]

Inoltre viene fornito con uno strumento CLI se non si desidera modificare webpack.config.js:

npx wcer

Nota: è necessario uno script (vuoto) in background anche se non è necessario perché è qui che inietta il codice di ricarica.

I tuoi file di contenuto come html e file manifest non sono modificabili senza l'installazione dell'estensione, ma credo che i file JavaScript vengano caricati dinamicamente fino a quando l'estensione non è stata compresso.

Lo so a causa di un progetto in corso su cui sto lavorando tramite l'API delle estensioni di Chrome e sembra caricarsi ogni volta che aggiorno una pagina.

Forse una risposta un po 'in ritardo, ma penso che crxreload potrebbe funzionare per te. È il mio risultato del tentativo di avere un flusso di lavoro ricarica su salvataggio durante lo sviluppo.

Sto usando una scorciatoia per ricaricare. Non voglio ricaricare continuamente quando salvo un file

Quindi il mio approccio è leggero e puoi lasciare attiva la funzione di ricarica

manifest.json

{
    ...
    "background": {
        "scripts": [
            "src/bg/background.js"
        ],
        "persistent": true
    },
    "commands": {
        "Ctrl+M": {
            "suggested_key": {
                "default": "Ctrl+M",
                "mac": "Command+M"
            },
            "description": "Ctrl+M."
        }
    },
    ...
}

src / bg / background.js

chrome.commands.onCommand.addListener((shortcut) => {
    console.log('lets reload');
    console.log(shortcut);
    if(shortcut.includes("+M")) {
        chrome.runtime.reload();
    }
})

Ora premi Ctrl + M nel browser Chrome per ricaricare

Utilizzare quindi npm initper creare un package.json nella directory root, quindi

npm install --save-dev gulp-open && npm install -g gulp

quindi crea un gulpfile.js

che assomiglia a:

/* File: gulpfile.js */

// grab our gulp packages
var gulp  = require('gulp'),
    open = require('gulp-open');

// create a default task and just log a message
gulp.task('default', ['watch']);

// configure which files to watch and what tasks to use on file changes
gulp.task('watch', function() {
  gulp.watch('extensionData/userCode/**/*.js', ['uri']);
});

gulp.task('uri', function(){
  gulp.src(__filename)
  .pipe(open({uri: "http://reload.extensions"}));
});

Questo funziona per me sviluppando con CrossRider, potresti guardare per cambiare il percorso in cui guardi i file, anche supponendo che tu abbia npm e nodo installati.

Disclaimer: ho sviluppato questa estensione da solo.

Clerc - per Chrome Live Extension Reloading Client

Connettiti a un server compatibile con LiveReload per ricaricare automaticamente l'estensione ogni volta che salvi.

Bonus: con un po 'di lavoro extra da parte tua, puoi anche ricaricare automaticamente le pagine web che la tua estensione altera.

La maggior parte degli sviluppatori di pagine Web utilizza un sistema di compilazione con una sorta di watcher che crea automaticamente i propri file, riavvia il server e ricarica il sito Web.

Lo sviluppo di estensioni non dovrebbe essere diverso. Clerc porta questa stessa automazione agli sviluppatori Chrome. Imposta un sistema di compilazione con un server LiveReload e Clerc ascolterà gli eventi di ricarica per aggiornare l'estensione.

L'unico grande gotcha sono le modifiche a manifest.json. Eventuali piccoli errori di battitura nel manifest probabilmente causeranno ulteriori tentativi di ricarica e rimarrai bloccato disinstallando / reinstallando l'estensione per riavere il caricamento delle modifiche.

Clerc inoltra il messaggio di ricaricamento completo alla tua estensione dopo che è stato ricaricato, quindi puoi facoltativamente utilizzare il messaggio fornito per attivare ulteriori passaggi di aggiornamento.

I bravi ragazzi di Mozilla hanno appena rilasciato un nuovo https://github.com/mozilla/web-ext che puoi usare per lanciareweb-ext run --target chromium

Grazie a @GmonC e @Arik e un po 'di tempo libero, riesco a farlo funzionare. Ho dovuto cambiare due file per farlo funzionare.

(1) Installa LiveReload e l'estensione Chrome per quell'applicazione. Questo chiamerà alcuni script al cambio di file.

(2) Apri <LiveReloadInstallDir>\Bundled\backend\res\livereload.js

(3) cambia riga #509in

this.window.location.href = "http://reload.extensions";

(4) Ora installa un'altra estensione Extensions Reloaderche ha un utile gestore di link che ricarica tutte le estensioni di sviluppo durante la navigazione"http://reload.extensions"

(5) Ora cambia l'estensione background.min.jsin questo modo

if((d.installType=="development")&&(d.enabled==true)&&(d.name!="Extensions Reloader"))

sostituirlo con

if((d.installType=="development")&&(d.enabled==true)&&(d.name!="Extensions Reloader")&&(d.name!="LiveReload"))

Apri l'applicazione LiveReload, nascondi il pulsante Extension Reloader e attiva l'estensione LiveReload facendo clic sul pulsante nella barra degli strumenti, ora ricaricherai la pagina e le estensioni su ogni modifica del file mentre utilizzi tutte le altre chicche da LiveReload (ricarica css, ricarica immagine ecc.)

L'unica cosa negativa di questo è che dovrai ripetere la procedura di modifica degli script su ogni aggiornamento di estensione. Per evitare aggiornamenti, aggiungi l'estensione come decompressa.

Quando avrò più tempo per scherzare con questo, probabilmente creerò un'estensione che elimina la necessità di entrambe.

Fino ad allora, sto lavorando sulla mia estensione Projext Axeman

Ho appena trovato un nuovo progetto basato su grugniti che fornisce bootstrap, impalcature, alcune facoltà automatiche di pre-elaborazione, nonché il ricaricamento automatico (nessuna interazione necessaria).

Bootstrap l'estensione di Chrome da Websecurify

Se hai un Mac, il modo più semplice è con l'app Alfred!

Ottieni l' app Alfred con Powerpack , quindi aggiungi il flusso di lavoro fornito nel link seguente e personalizza il tasto di scelta rapida desiderato (mi piace usare ⌘ + ⌥ + R). È tutto.

Ora, ogni volta che si utilizza il tasto di scelta rapida, Google Chrome verrà ricaricato, indipendentemente dall'applicazione in quel momento.

Se si desidera utilizzare un altro browser, aprire AppleScript in Flussi di lavoro Preferenze Alfred e sostituire "Google Chrome" con "Firefox", "Safari", ...

Mostrerò anche qui il contenuto dello script / usr / bin / osascript utilizzato nel file ReloadChrome.alfredworkflow in modo da poter vedere cosa sta facendo.

tell application "Google Chrome"
  activate
  delay 0.5
  tell application "System Events" to keystroke "r" using command down
  delay 0.5
  tell application "System Events" to keystroke tab using command down
end tell

Il file del flusso di lavoro è ReloadChrome.alfredworkflow .

Voglio ricaricare (aggiornare) le mie estensioni durante la notte, questo è quello che uso in background.js:

var d = new Date();
var n = d.getHours();
var untilnight = (n == 0) ? 24*3600000 : (24-n)*3600000; 
// refresh after 24 hours if hour = 0 else
// refresh after 24-n hours (that will always be somewhere between 0 and 1 AM)
setTimeout(function() {
    location.reload();
}, untilnight);

Saluti, Peter

Ho biforcuto LiveJS per consentire il ricaricamento in tempo reale delle app in pacchetto. Includi semplicemente il file nella tua app e ogni volta che salvi un file l'app si ricaricherà automaticamente.

Come menzionato nei documenti: la seguente riga di comando ricaricherà un'app

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --load-and-launch-app=[path to the app ]

così ho appena creato uno script di shell e ho chiamato quel file da gulp. Super semplice:

var exec = require('child_process').exec;



gulp.task('reload-chrome-build',function(cb){

console.log("reload");

var cmd="./reloadchrome.sh"

exec(cmd,function (err, stdout, stderr) {
    console.log("done: "+stdout);

    cb(err);
    }
);});

eseguire i comandi di controllo necessari sugli script e chiamare l'attività di ricarica quando si desidera. Pulito, semplice

È qui che brillano software come AutoIt o alternative. La chiave sta scrivendo uno script che emula l'attuale fase di test. Abituati ad usarne almeno una, poiché molte tecnologie non prevedono percorsi di lavoro / test chiari.

Run("c:\Program Files (x86)\Google\Chrome\Application\chrome.exe")
WinWaitActive("New Tab - Google Chrome")
Send("^l")
Send("chrome://extensions{ENTER}")
WinWaitActive("Extensions - Google Chrome")
Send("{TAB}{TAB}{TAB}{TAB}{TAB}{TAB}")
Send("{ENTER}")
WinWaitActive("Extensions - Google Chrome")
Send("{TAB}{TAB}")
Send("{ENTER}")
WinWaitActive("Developer Tools")
Send("^`")

Ovviamente si modifica il codice in base alle proprie esigenze di test / iterazione. Assicurati che i clic sulla scheda siano fedeli alla posizione del tag anchor nel sito chrome: // extensions. È inoltre possibile utilizzare in relazione ai movimenti del mouse della finestra e altre macro simili.

Vorrei aggiungere lo script a Vim in un modo simile a questo:

map <leader>A :w<CR>:!{input autoit loader exe here} "{input script location here}"<CR>

Ciò significa che quando sono in Vim premo il pulsante sopra ENTER (di solito responsabile di: | e \) noto come pulsante leader e lo seguo con una 'A' maiuscola e salva e inizia il mio script della fase di test.

Assicurati di compilare le sezioni {input ...} nello script Vim / hotkey sopra in modo appropriato.

Molti editor ti permetteranno di fare qualcosa di simile con i tasti di scelta rapida.

Le alternative ad AutoIt possono essere trovate qui .

Per Windows: AutoHotkey

Per Linux: xdotool, xbindkeys

Per Mac: Automator

Sviluppo principalmente in Firefox, dove web-ext runricarica automaticamente l'estensione dopo la modifica dei file. Quindi, una volta pronto, eseguo un round finale di test in Chrome per assicurarmi che non ci siano problemi che non sono stati visualizzati in Firefox.

Se si desidera sviluppare principalmente in Chrome, tuttavia, e non si desidera installare estensioni di terze parti, un'altra opzione è quella di creare un test.htmlfile nella cartella dell'estensione e aggiungere un sacco di SSCCE ad esso. Tale file utilizza quindi un normale <script>tag per iniettare lo script di estensione.

È possibile utilizzarlo per il 95% dei test, quindi ricaricare manualmente l'estensione quando si desidera testarlo su siti live.

Ciò non riproduce in modo identico l'ambiente in cui è in esecuzione un'estensione, ma è abbastanza buono per molte cose semplici.

L'autore ha raccomandato la versione successiva di quel plug-in webpack: https://github.com/rubenspgcavalcante/webpack-extension-reloader . Funziona molto bene per me.

Sì, puoi farlo indirettamente! Ecco la mia soluzione

In manifest.json

{
    "name": "",
    "version": "1.0.0",
    "description": "",
    "content_scripts":[{
        "run_at":"document_end",
        "matches":["http://*/*"],
        "js":["/scripts/inject.js"]
    }]
}

In inject.js

(function() {
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.async = true;
    script.src = 'Your_Scripts';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(script, s);
})();

Il tuo script iniettato può iniettare altri script da qualsiasi posizione.

Un altro vantaggio di questa tecnica è che puoi semplicemente ignorare la limitazione del mondo isolato . vedere l' ambiente di esecuzione degli script di contenuto

BROWSER-SYNC

Utilizzando l'incredibile Browser-Sync

• aggiorna i browser (qualsiasi) quando cambia il codice sorgente (HTML, CSS, immagini, ecc.)
• supporta Windows, MacOS e Linux
• potresti persino guardare i tuoi aggiornamenti di codice (live) usando i tuoi dispositivi mobili

Installazione su MacOS (visualizza il loro aiuto per l'installazione su altri sistemi operativi)

Installa NVM, così puoi provare qualsiasi versione di Nodo

brew install nvm             # install a Node version manager
nvm ls-remote                # list available Node versions
nvm install v10.13.0         # install one of them
npm install -g browser-sync  # install Browser-Sync

Come utilizzare la sincronizzazione del browser per i siti statici

Vediamo due esempi:

browser-sync start --server --files . --host YOUR_IP_HERE --port 9000

browser-sync start --server --files $(ack --type-add=web:ext:htm,html,xhtml,js,css --web -f | tr \\n \ ) --host $(ipconfig getifaddr en0) --port 9000

L' --serveropzione ti consente di eseguire un server locale ovunque ti trovi nel tuo terminale e --filesti consente di specificare quali file verranno tracciati per le modifiche. Preferisco essere più specifico per i file tracciati, quindi nel secondo esempio uso ackper elencare estensioni di file specifiche (è importante che quei file non abbiano nomi di file con spazi) e anche ipconfigper trovare il mio IP attuale su MacOS.

Come utilizzare la sincronizzazione del browser per i siti dinamici

Nel caso in cui si utilizzi PHP, Rails, ecc., Si dispone già di un server in esecuzione, ma non si aggiorna automaticamente quando si apportano modifiche al codice. Quindi è necessario utilizzare l' --proxyinterruttore per far sapere alla sincronizzazione del browser dove si trova l'host per quel server.

browser-sync start --files $(ack --type-add=rails:ext:rb,erb,js,css,sass,scss,coffee --rails -f | tr \\n \ ) --proxy 192.168.33.12:3000 --host $(ipconfig getifaddr en0) --port 9000 --no-notify --no-open

Nell'esempio sopra, ho già un'app Rails in esecuzione sul mio browser 192.168.33.12:3000. Funziona davvero su una VM usando un box Vagrant, ma potrei accedere alla macchina virtuale usando la porta 3000 su quell'host. Mi piace --no-notifyinterrompere la sincronizzazione del browser inviandomi un avviso di notifica sul browser ogni volta che modifico il mio codice e --no-openinterrompere il comportamento di sincronizzazione del browser che carica immediatamente una scheda del browser all'avvio del server.

IMPORTANTE: nel caso in cui tu stia usando Rails, evita di usare Turbolink durante lo sviluppo, altrimenti non sarai in grado di fare clic sui tuoi link mentre usi l' --proxyopzione.

Spero che sarebbe utile a qualcuno. Ho provato molti trucchi per aggiornare il browser (anche un vecchio post che ho inviato su questa domanda StackOverflow usando AlfredApp tempo fa), ma questa è davvero la strada da percorrere; niente più hack, scorre e basta.

CREDITO: avvia un server web di ricarica live locale con un solo comando

Non può essere fatto direttamente. Scusate.

Se desideri vederlo come funzionalità, puoi richiederlo su http://crbug.com/new