Comment recharger automatiquement une extension Chrome que je développe?
J'aimerais que mon extension chrome se recharge chaque fois que j'enregistre un fichier dans le dossier des extensions, sans avoir à cliquer explicitement sur "recharger" dans chrome: // extensions /. Est-ce possible?
Edit: Je sais que je peux mettre à jour l’intervalle auquel Chrome recharge les extensions, ce qui est une solution intermédiaire, mais je préférerais que mon éditeur (emacs ou textmate) se déclenche lors de l’enregistrement d’un rechargement ou demandant à Chrome de surveiller le répertoire des modifications.
Vous pouvez utiliser " Extensions Reloader " pour Chrome:
Recharge toutes les extensions décompressées à l'aide du bouton de la barre d'outils de l'extension ou en naviguant jusqu'à " http: //reload.extensions "
Si vous avez déjà développé une extension Chrome, vous auriez peut-être eu envie de automatiser le processus de rechargement de votre extension décompressée sans le besoin de passer par la page des extensions.
"Extensions Reloader" vous permet de recharger toutes les extensions décompressées en utilisant 2 façons:
1 - Le bouton de la barre d'outils de l'extension.
2 - Navigation sur " http: //reload.extensions ".
L'icône de la barre d'outils rechargera les extensions décompressées en un seul clic.
Le "rechargement par navigation" est destiné à automatiser le processus de rechargement en utilisant des scripts "post-build" - ajoutez simplement une navigation à " http: //reload.extensions " en utilisant Chrome pour votre script, et vous aurez avoir une fenêtre Chrome rafraîchie.
Mise à jour: Depuis le 14 janvier 2015, l'extension est en source libre et disponible sur GitHub .
Update: j'ai ajouté une page d'options, de sorte que vous n'avez plus besoin de rechercher et d'éditer manuellement l'ID de l'extension. CRX et le code source se trouvent à: https://github.com/Rob--W/Chrome-Extension-Reloader
Update 2: Ajout du raccourci (voir mon référentiel sur Github).
Le code d'origine, qui inclut la fonctionnalité de base, est présenté ci-dessous}.
Créez une extension et utilisez la méthode Browser Action en conjonction avec l'API chrome.extension.management pour recharger votre extension décompressée.
Le code ci-dessous ajoute un bouton à Chrome, qui rechargera une extension en cas de 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: choisissez une icône Nice 48x48, par exemple:
Google Chrome http://icons.iconarchive.com/icons/google/chrome/48/Google-Chrome-icon.png 
dans n'importe quelle fonction ou événement
chrome.runtime.reload();
rechargera votre extension ( docs ). Vous devez également modifier le fichier manifest.json, en ajoutant:
...
"permissions": [ "management" , ...]
...
J'ai fait un script simple intégrable faisant un rechargement à chaud:
https://github.com/xpl/crx-hotreload
Il surveille les modifications de fichiers dans le répertoire d'une extension. Lorsqu'un changement est détecté, il recharge l'extension et actualise l'onglet actif (pour réactiver les scripts de contenu mis à jour).
- Fonctionne en vérifiant les horodatages des fichiers
- Prend en charge les répertoires imbriqués
- Se désactive automatiquement dans la configuration de production
Une autre solution serait de créer un script livereload personnalisé (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();
}
}
};
Ce script se connecte au serveur livereload à l’aide de websockets. Ensuite, il lancera un appel chrome.runtime.reload () lors du rechargement du message envoyé par livereload. La prochaine étape consisterait à ajouter ce script à exécuter en tant que script d'arrière-plan dans votre fichier manifest.json, et le tour est joué!
Note: ce n'est pas ma solution. Je viens de le poster. Je l'ai trouvé dans le code généré de Générateur Chrome Extension (Excellent outil!). Je poste ceci ici parce que cela pourrait aider.
Les extensions Chrome ont un système permission qu'il ne leur permettait pas (certaines personnes de SO avaient le même problème que vous ), leur demande donc "d'ajouter cette fonctionnalité" ne va pas travailler OMI. Il existe un courrier de Google Groupes avec Chromium Extensions avec une solution proposée (théorie) utilisant chrome.extension.getViews(), mais son fonctionnement n’est pas garanti non plus.
S'il était possible d'ajouter à manifest.json des pages internes de Chrome telles que chrome://extensions/, il serait possible de créer un plug-in qui interagirait avec l'ancre Reload et utilisant un programme externe comme XRefresh (un plugin Firefox - il y a une version Chrome utilisant Ruby et WebSocket), vous obtiendrez exactement ce dont vous avez besoin:
XRefresh est un plugin de navigateur qui actualisera la page Web actuelle en raison de changement de fichier dans les dossiers sélectionnés. Ce permet de faire de la page en direct l'édition avec votre HTML/CSS préféré éditeur.
Ce n'est pas possible de le faire, mais je pense que vous pouvez utiliser ce même concept d'une manière différente.
Vous pouvez essayer de trouver des solutions tierces au lieu de cela, après avoir vu des modifications dans un fichier (je ne connais ni emacs ni Textmate, mais dans Emacs, il serait possible de lier un appel d'application au sein d'une action "save file"), clique dans une coordonnée spécifique d'une application spécifique: dans ce cas, il s'agit de l'ancre Reload de votre extension en développement (vous laissez une fenêtre Chrome ouverte uniquement pour ce rechargement).
(Fou comme l'enfer mais ça peut marcher)
Voici une fonction que vous pouvez utiliser pour surveiller les fichiers des modifications et les recharger si des modifications sont détectées. Cela fonctionne en les interrogeant via AJAX et en les rechargeant via window.location.reload (). Je suppose que vous ne devriez pas utiliser cela dans un paquet de distribution.
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'));
Je suis peut-être un peu en retard à la fête, mais je l’ai résolue en créant https://chrome.google.com/webstore/detail/chrome-unpacked-extension/fddfkmkleofkhanofhlohnkemejcbamln
Cela fonctionne en rechargeant la page chrome://extensions, chaque fois que des événements file.change sont entrants via des websockets.
Vous trouverez un exemple basé sur Gulp sur la manière d'émettre un événement file.change lors de modifications de fichier dans un dossier d'extension: https://github.com/robin-drexler/chrome-extension-auto-reload-watcher
Pourquoi recharger l'intégralité de l'onglet au lieu d'utiliser simplement l'API de gestion des extensions pour recharger/réactiver des extensions? Actuellement, la désactivation et l'activation d'extensions entraînent la fermeture de toute fenêtre d'inspection ouverte (journal de la console, etc.), ce qui m'a semblé trop gênant pendant le développement actif.
Peut-être un peu tard, mais je pense que crxreload pourrait fonctionner pour vous. C'est mon résultat d'essayer d'avoir un flux de travail de rechargement sur sauvegarde pendant le développement.
Vos fichiers de contenu tels que HTML et les fichiers manifest ne sont pas modifiables sans l’installation de l’extension, mais j’estime que les fichiers JavaScript sont chargés de manière dynamique jusqu’à ce que l’extension soit compactée.
Je le sais à cause d'un projet en cours sur lequel je travaille via l'API de Chrome Extensions et qui semble se charger à chaque fois que je rafraîchit une page.
Utilisez npm init pour créer un package.json dans la racine du répertoire, puis
npm install --save-dev gulp-open && npm install -g gulp
puis créez un gulpfile.js
qui ressemble à:
/* 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"}));
});
Cela fonctionne pour mon développement avec CrossRider, vous pouvez regarder pour changer le chemin où vous regardez les fichiers, en supposant que npm et le noeud soient installés.
Il existe un plugin de rechargement automatique si vous développez avec webpack: https://github.com/rubenspgcavalcante/webpack-chrome-extension-reloader
const ChromeExtensionReloader = require('webpack-chrome-extension-reloader');
plugins: [
new ChromeExtensionReloader()
]
Fournit également un outil CLI si vous ne souhaitez pas modifier webpack.config.js:
npx wcer
Remarque: un script d'arrière-plan (vide) est requis même si vous n'en avez pas besoin, car il injecte du code de rechargement.
Je viens de trouver un projet newish grunt qui fournit un amorçage, un échafaudage, des outils de prétraitement automatisés et un rechargement automatique (aucune interaction requise).
Démarrez votre extension Chrome à partir de Websecurify
Je veux recharger (mettre à jour) mes extensions du jour au lendemain, voici ce que j'utilise dans 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);
Cordialement, Peter
Disclaimer: J'ai développé cette extension moi-même.
Clerc - pour le client de rechargement de Chrome Live Extension
Connectez-vous à un serveur compatible LiveReload pour recharger automatiquement votre extension à chaque fois que vous enregistrez.
Bonus: avec un peu de travail supplémentaire de votre part, vous pouvez également recharger automatiquement les pages Web modifiées par votre extension.
La plupart des développeurs de pages Web utilisent un système de construction avec une sorte d’observateur qui crée automatiquement leurs fichiers, redémarre leur serveur et recharge le site Web.
Développer des extensions ne devrait pas être si différent. Clerc apporte cette même automatisation aux développeurs Chrome. Configurez un système de construction avec un serveur LiveReload. Clerc écoutera les événements de rechargement pour actualiser votre extension.
Le seul gros problème concerne les modifications apportées au fichier manifest.json. Toute erreur de frappe dans le manifeste entraînera probablement de nouvelles tentatives de rechargement et vous serez bloqué lors de la désinstallation/réinstallation de votre extension pour que vos modifications soient à nouveau chargées.
Clerc transmet le message de rechargement complet à votre poste une fois rechargé. Vous pouvez donc éventuellement utiliser le message fourni pour déclencher d'autres étapes de rafraîchissement.
Si vous avez un Mac, ¡le moyen le plus simple est d'utiliser Alfred App!
Obtenez juste Alfred App avec Powerpack, puis ajoutez le flux de travail fourni dans le lien ci-dessous et personnalisez le raccourci clavier souhaité (j'aime utiliser + ⌥ + R). C'est tout.
Maintenant, chaque fois que vous utilisez le raccourci clavier, Google Chrome _ sera rechargé, quelle que soit l'application à laquelle vous vous trouvez.
Si vous souhaitez utiliser un autre navigateur, ouvrez le script AppleScript dans Alfred Preferences Workflows et remplacez "Google Chrome" par "Firefox", "Safari", ...
Je vais également montrer ici le contenu du script / usr/bin/osascript utilisé dans le fichier ReloadChrome.alfredworkflow} afin que vous puissiez voir ce qu’il fait.
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
Le fichier de flux de travail est ReloadChrome.alfredworkflow .
Comme mentionné dans la documentation: la ligne de commande suivante rechargera une application
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --load-and-launch-app=[path to the app ]
donc je viens de créer un script shell et ai appelé ce fichier de gulp. Super simple:
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);
}
);});
exécutez les commandes de surveillance nécessaires sur les scripts et appelez la tâche de rechargement lorsque vous le souhaitez. Propre, simple.
J'utilise un raccourci pour recharger. Je ne veux pas recharger tout le temps quand je sauvegarde un fichier
Donc, mon approche est légère, et vous pouvez laisser la fonction de rechargement dans
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();
}
})
Maintenant, appuyez sur Ctrl + M dans le navigateur Chrome pour recharger
L'auteur a recommandé la prochaine version de ce plugin webpack: https://github.com/rubenspgcavalcante/webpack-extension-reloader . Cela fonctionne très bien pour moi.
Grâce à @GmonC et @Arik et à un peu de temps libre, j'ai réussi à faire en sorte que cela fonctionne. J'ai dû changer deux fichiers pour que cela fonctionne.
(1) Installez LiveReload et Chrome Extension pour cette application. Cela appellera un script sur le changement de fichier.
(2) Ouvrir <LiveReloadInstallDir>\Bundled\backend\res\livereload.js
(3) changer la ligne #509 en
this.window.location.href = "http://reload.extensions";
(4) Maintenant, installez une autre extension Extensions Reloader qui contient un gestionnaire de liens utile qui recharge toutes les extensions de développement lors de la navigation vers "http://reload.extensions"
(5) Maintenant changez le background.min.js de cette extension de cette façon
if((d.installType=="development")&&(d.enabled==true)&&(d.name!="Extensions Reloader"))
remplacer par
if((d.installType=="development")&&(d.enabled==true)&&(d.name!="Extensions Reloader")&&(d.name!="LiveReload"))
Ouvrez l’application LiveReload, masquez le bouton Extension Reloader et activez l’extension LiveReload en cliquant sur le bouton dans la barre d’outils, vous rechargerez la page et les extensions à chaque changement de fichier tout en utilisant tous les autres goodies de LiveReload (css reload, rechargement d’image, etc.).
Le seul inconvénient, c’est que vous devrez répéter la procédure de modification des scripts à chaque mise à jour d’extension. Pour éviter les mises à jour, ajoutez l'extension telle que décompressée.
Lorsque j'aurai plus de temps pour régler ce problème, je créerai probablement une extension qui éliminera le besoin de ces deux extensions.
Jusque-là, je travaille sur mon extension Axeman Projext
J'ai ajouté LiveJS pour permettre le rechargement en temps réel d'applications packagées. Incluez simplement le fichier dans votre application et à chaque fois que vous enregistrez un fichier, l'application se recharge automatiquement.
C’est là que brillent des logiciels tels que AutoIt ou des alternatives. La clé est d'écrire un script qui émule votre phase de test actuelle. Habituez-vous à en utiliser au moins une, car de nombreuses technologies ne sont pas accompagnées de chemins de flux de travail/tests clairs.
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("^`")
Évidemment, vous modifiez le code en fonction de vos besoins en matière de test/itération. Assurez-vous que les clics sur les onglets correspondent à la position de la balise d'ancrage dans le site chrome: // extensions. Vous pouvez également utiliser relatif aux mouvements de la souris dans les fenêtres et autres macros.
J'ajouterais le script à Vim de la manière suivante:
map <leader>A :w<CR>:!{input autoit loader exe here} "{input script location here}"<CR>
Cela signifie que lorsque je suis dans Vim, appuyez sur le bouton situé au-dessus de ENTER (généralement responsable de: | et \), appelé bouton du leader, et suivez-le avec un 'A' majuscule. Il enregistre et commence mon script de phase de test.
Assurez-vous de bien renseigner les sections {input ...} du script Vim/hotkey ci-dessus.
De nombreux éditeurs vous permettront de faire quelque chose de similaire avec les raccourcis clavier.
Alternatives à AutoIt peut être trouvé ici .
Pour Windows: AutoHotkey
Pour Linux: xdotool, xbindkeys
Pour Mac: Automator
Je développe principalement dans Firefox, où web-ext run recharge automatiquement l'extension après la modification des fichiers. Puis, une fois prêt, je fais une dernière série de tests dans Chrome pour vérifier qu’il n’y avait aucun problème qui n’apparaissait pas dans Firefox.
Toutefois, si vous souhaitez développer principalement dans Chrome et ne souhaitez installer aucune extension tierce, vous pouvez également créer un fichier test.html dans le dossier de l'extension et y ajouter un ensemble de SSCCE . Ce fichier utilise ensuite une balise <script> normale pour injecter le script d'extension.
Vous pouvez l'utiliser pour 95% des tests, puis recharger manuellement l'extension lorsque vous souhaitez la tester sur des sites en direct.
Cela ne reproduit pas de manière identique l'environnement dans lequel une extension est exécutée, mais cela suffit pour de nombreuses choses simples.