Comment recharger automatiquement une extension Chrome que je développe?

Je voudrais que mon extension chrome se recharge à chaque fois que j'enregistre un fichier dans le dossier d'extension, sans avoir à cliquer explicitement sur "recharger" dans chrome: // extensions /. Est-ce possible?

Modifier: je sais que je peux mettre à jour l'intervalle auquel Chrome recharge les extensions, ce qui est une solution à mi-chemin, mais je préfère faire déclencher mon éditeur (emacs ou textmate) lors de l'enregistrement d'une recharge ou demander à 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 accédant à " http: //reload.extensions "

Si vous avez déjà développé une extension Chrome, vous souhaiterez peut-être automatiser le processus de rechargement de votre extension décompressée sans avoir à parcourir la page des extensions.

"Extensions Reloader" vous permet de recharger toutes les extensions décompressées de 2 manières:

1 - Le bouton de la barre d'outils de l'extension.

2 - Navigation vers " 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 à l'aide de scripts "post-construction" - il suffit d'ajouter une navigation à " http: //reload.extensions " en utilisant Chrome à votre script, et vous aurez une fenêtre Chrome actualisée.

Mise à jour: Depuis le 14 janvier 2015, l'extension est open source et disponible sur GitHub .

Mise à jour : j'ai ajouté une page d'options, afin que vous n'ayez plus à rechercher et modifier manuellement l'ID de l'extension. CRX et code source sont à: https://github.com/Rob--W/Chrome-Extension-Reloader
Update 2: Ajout d'un raccourci (voir mon référentiel sur Github).
_{Le code d'origine, qui inclut les fonctionnalités de base, est illustré ci-dessous .}

Créez une extension et utilisez la méthode d' action du navigateur conjointement avec l' chrome.extension.managementAPI pour recharger votre extension décompressée.

Le code ci-dessous ajoute un bouton à Chrome, qui rechargera une extension au 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 jolie icône 48x48, par exemple:

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 créé un script intégrable simple faisant un rechargement à chaud:

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

Il surveille les changements 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 relancer 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 de chargement de foie 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 émettra un appel chrome.runtime.reload () lors du rechargement du message de livereload. La prochaine étape serait d'ajouter ce script à exécuter en tant que script d'arrière-plan dans votre manifest.json, et le tour est joué!

Remarque: ce n'est pas ma solution. Je le poste juste. Je l'ai trouvé dans le code généré du générateur d'extension Chrome (excellent outil!). Je poste ceci ici car cela pourrait aider.

Les extensions Chrome ont un système d'autorisation qu'il ne permettrait pas (certaines personnes en SO ont eu le même problème que vous ), donc leur demander d'ajouter cette fonctionnalité ne fonctionnera pas IMO. Il y a un e-mail de Chromium Extensions Google Groups avec une solution proposée (théorie) utilisant chrome.extension.getViews(), mais il n'est pas garanti de fonctionner non plus.

S'il était possible d'ajouter aux manifest.jsonquelques pages internes de Chrome commechrome://extensions/ , il serait possible de créer un plugin qui interagirait avec l' Reloadancre, et, en utilisant un programme externe comme XRefresh (un plugin Firefox - il existe une version Chrome utilisant Ruby et WebSocket ), vous obtiendriez exactement ce dont vous avez besoin:

XRefresh est un plugin de navigateur qui actualisera la page Web actuelle en raison du changement de fichier dans les dossiers sélectionnés. Cela permet de faire de l'édition de page en direct avec votre éditeur HTML / CSS préféré.

Ce n'est pas possible, 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 dans une action "enregistrer le fichier"), juste clique dans une coordonnée spécifique d'une application spécifique: dans ce cas, c'est l' Reloadancre de votre extension en développement (vous laissez une fenêtre Chrome ouverte juste pour ce rechargement).

(Fou comme l'enfer mais ça peut marcher)

Voici une fonction que vous pouvez utiliser pour surveiller les fichiers pour les modifications et recharger si des modifications sont détectées. Il 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 package 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ésolu pour moi en créant https://chrome.google.com/webstore/detail/chrome-unpacked-extension/fddfkmklefkhanofhlohnkemejcbamln

Il fonctionne en rechargeant la chrome://extensionspage, chaque fois que des file.changeévénements arrivent via des sockets Web.

Un exemple basé sur Gulp sur la façon d'émettre un file.changeévénement lors de modifications de fichier dans un dossier d'extension peut être trouvé ici: https://github.com/robin-drexler/chrome-extension-auto-reload-watcher

Pourquoi recharger tout l'onglet au lieu d'utiliser simplement l'API de gestion des extensions pour recharger / réactiver les extensions? Actuellement, la désactivation et l'activation des extensions entraînent la fermeture de toute fenêtre d'inspection ouverte (journal de la console, etc.), ce que j'ai trouvé trop ennuyeux pendant le développement actif.

Il y a un plugin de rechargement automatique si vous développez en utilisant 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 c'est là qu'il injecte du code de rechargement.

Vos fichiers de contenu tels que html et les fichiers manifestes ne sont pas modifiables sans l'installation de l'extension, mais je crois que les fichiers JavaScript sont chargés dynamiquement jusqu'à ce que l'extension soit compressée.

Je le sais en raison d'un projet en cours sur lequel je travaille via l'API Chrome Extensions, et semble se charger à chaque fois que je rafraîchis une page.

Peut-être une réponse un peu tardive mais je pense que crxreload pourrait fonctionner pour vous. C'est mon résultat d'avoir essayé d'avoir un flux de travail de rechargement lors de la création.

J'utilise un raccourci pour recharger. Je ne veux pas recharger tout le temps quand j'enregistre un fichier

Mon approche est donc 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

Utilisez npm initpour créer un package.json dans le répertoire racine, 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 moi en développant avec CrossRider, vous pouvez regarder pour changer le chemin dans lequel vous regardez les fichiers, en supposant également que npm et le nœud soient installés.

Avertissement: j'ai développé cette extension moi-même.

Clerc - pour Chrome Live Extension Reloading Client

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 que votre extension modifie.

La plupart des développeurs de pages Web utilisent un système de construction avec une sorte de surveillant qui crée automatiquement leurs fichiers et redémarre leur serveur et recharge le site Web.

Le développement d'extensions ne devrait pas être si différent. Clerc apporte cette même automatisation aux développeurs Chrome. Configurez un système de build avec un serveur LiveReload et Clerc écoutera les événements de rechargement pour actualiser votre extension.

Le seul gros problème est la modification du manifeste.json. Toute petite faute de frappe dans le manifeste entraînera probablement l'échec de nouvelles tentatives de rechargement, et vous serez bloqué en désinstallant / réinstallant votre extension pour que vos modifications se chargent à nouveau.

Clerc transmet le message de rechargement complet à votre extension après son rechargement, vous pouvez donc éventuellement utiliser le message fourni pour déclencher d'autres étapes de rafraîchissement.

Les grands gars de mozilla viennent de publier un nouveau https://github.com/mozilla/web-ext que vous pouvez utiliser pour lancerweb-ext run --target chromium

Grâce à @GmonC et @Arik et à du temps libre, je gère pour que cela fonctionne. J'ai dû changer deux fichiers pour que cela fonctionne.

(1) Installez LiveReload et l'extension Chrome pour cette application. Cela appellera un script lors du changement de fichier.

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

(3) changer la ligne #509en

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

(4) Maintenant, installez une autre extension Extensions Reloader qui a un gestionnaire de liens utile qui recharge toutes les extensions de développement lors de la navigation vers"http://reload.extensions"

(5) Maintenant, changez cette extension de background.min.jscette 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, cachez le bouton Extension Reloader et activez l'extension LiveReload en cliquant sur le bouton dans la barre d'outils, vous rechargerez maintenant la page et les extensions à chaque changement de fichier tout en utilisant tous les autres goodies de LiveReload (rechargement css, rechargement d'image, etc.)

La seule mauvaise chose à ce sujet est que vous devrez répéter la procédure de changement de scripts à chaque mise à jour d'extension. Pour éviter les mises à jour, ajoutez l'extension comme décompressée.

Lorsque j'aurai plus de temps pour jouer avec cela, je créerai probablement une extension qui élimine le besoin de ces deux extensions.

Jusque-là, je travaille sur mon extension Projext Axeman

Je viens de trouver un nouveau grognement projet basé sur le qui fournit le bootstrap, l'échafaudage, une faculté de pré-traitement automatisé, ainsi que le rechargement automatique (aucune interaction nécessaire).

Démarrez votre extension Chrome à partir de Websecurify

Si vous avez un Mac, le plus simple est avec Alfred App!

Obtenez simplement Alfred App avec Powerpack , puis ajoutez le flux de travail fourni dans le lien ci-dessous et personnalisez le raccourci clavier que vous souhaitez (j'aime utiliser ⌘ + ⌥ + R). C'est tout.

Désormais, chaque fois que vous utilisez le raccourci clavier, Google Chrome se recharge, quelle que soit l'application que vous utilisez à ce moment-là.

Si vous souhaitez utiliser un autre navigateur, ouvrez l'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 workflow est ReloadChrome.alfredworkflow .

Je veux recharger (mettre à jour) mes extensions du jour au lendemain, c'est ce que j'utilise en 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

J'ai créé LiveJS pour permettre le rechargement en direct des applications packagées. Il vous suffit d'inclure le fichier dans votre application et chaque fois que vous enregistrez un fichier, l'application se recharge automatiquement.

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 j'ai appelé ce fichier depuis 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 vos commandes de surveillance nécessaires sur les scripts et appelez la tâche de rechargement lorsque vous le souhaitez. Propre, simple.

C'est là que les logiciels comme AutoIt ou les alternatives brillent. La clé est d'écrire un script qui émule votre phase de test actuelle. Habituez-vous à utiliser au moins l'une d'entre elles, car de nombreuses technologies ne sont pas accompagnées de flux de travail / chemins de test 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("^`")

De toute évidence, vous modifiez le code en fonction de vos besoins de test / itération. Assurez-vous que les clics sur les onglets correspondent à l'emplacement de la balise d'ancrage dans le site des extensions chrome: //. Vous pouvez également utiliser les mouvements de la souris relatifs à la fenêtre et d'autres macros de ce type.

J'ajouterais le script à Vim d'une manière similaire à ceci:

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

Cela signifie que lorsque je suis dans Vim, j'appuie sur le bouton ci-dessus ENTRÉE (généralement responsable de: | et \) connu sous le nom de bouton leader et le suit avec un «A» majuscule et il enregistre et commence mon script de phase de test.

Veuillez vous assurer de remplir correctement les sections {input ...} du script Vim / raccourci clavier ci-dessus.

De nombreux éditeurs vous permettront de faire quelque chose de similaire avec les raccourcis clavier.

Des alternatives à AutoIt peuvent être trouvées ici .

Pour Windows: AutoHotkey

Pour Linux: xdotool, xbindkeys

Pour Mac: Automator

Je développe principalement dans Firefox, où web-ext runrecharge automatiquement l'extension après le changement de fichiers. Ensuite, une fois que c'est prêt, je fais une dernière série de tests dans Chrome pour m'assurer qu'il n'y a pas de problèmes qui n'apparaissent pas dans Firefox.

Si vous souhaitez développer principalement dans Chrome et que vous ne souhaitez pas installer d'extensions tierces, une autre option consiste à créer un test.htmlfichier dans le dossier de l'extension et à y ajouter un tas de SSCCE . Ce fichier utilise ensuite un normal<script> balise 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 à l'identique l'environnement dans lequel une extension s'exécute, mais c'est assez bon pour de nombreuses choses simples.

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.

Oui, vous pouvez le faire indirectement! Voici ma solution.

Dans 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);
})();

Votre script injecté peut injecter un autre script depuis n'importe quel emplacement.

Un autre avantage de cette technique est que vous pouvez simplement ignorer la limitation du monde isolé . voir l' environnement d'exécution du script de contenu

BROWSER-SYNC

Utilisation de l'incroyable Browser-Sync

• mettre à jour les navigateurs (n'importe lequel) lorsque le code source change (HTML, CSS, images, etc.)
• prend en charge Windows, MacOS et Linux
• vous pouvez même regarder vos mises à jour de code (en direct) à l'aide de vos appareils mobiles

Instalation sur MacOS (voir leur aide à installer sur d'autres OS)

Installez NVM pour pouvoir essayer n'importe quelle version de Node

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

Comment utiliser la synchronisation du navigateur pour les sites statiques

Voyons deux exemples:

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' --serveroption vous permet d'exécuter un serveur local où que vous soyez dans votre terminal et --filesvous permet de spécifier quels fichiers seront suivis pour les modifications. Je préfère être plus spécifique pour les fichiers suivis, donc dans le deuxième exemple, j'utilise ackpour répertorier les extensions de fichiers spécifiques (il est important que ces fichiers n'aient pas de noms de fichiers avec des espaces) et j'utilise égalementipconfig pour trouver mon IP actuelle sur MacOS.

Comment utiliser la synchronisation du navigateur pour les sites dynamiques

Dans le cas où vous utilisez PHP, Rails, etc., vous avez déjà un serveur en cours d'exécution, mais il ne s'actualise pas automatiquement lorsque vous apportez des modifications à votre code. Vous devez donc utiliser le --proxycommutateur pour permettre à la synchronisation du navigateur de savoir où se trouve l'hôte de ce serveur.

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

Dans l'exemple ci-dessus, j'ai déjà une application Rails en cours d'exécution sur mon navigateur 192.168.33.12:3000. Il fonctionne vraiment sur une machine virtuelle à l'aide d'une boîte Vagrant, mais je pouvais accéder à la machine virtuelle en utilisant le port 3000 sur cet hôte. J'aime --no-notifyarrêter la synchronisation du navigateur en m'envoyant une alerte de notification sur le navigateur chaque fois que je change de code et--no-open arrêter le comportement de synchronisation du navigateur qui charge immédiatement un onglet du navigateur au démarrage du serveur.

IMPORTANT: Juste au cas où vous utilisez Rails, évitez d'utiliser Turbolinks sur le développement, sinon vous ne pourrez pas cliquer sur vos liens lorsque vous utilisez le--proxy option.

J'espère que cela serait utile à quelqu'un. J'ai essayé de nombreuses astuces pour actualiser le navigateur (même un ancien post que j'ai soumis sur cette question StackOverflow en utilisant AlfredApp il y a longtemps), mais c'est vraiment la voie à suivre; plus de hacks, ça coule juste.

CRÉDIT: démarrer un serveur Web de rechargement en direct local avec une seule commande

Cela ne peut pas être fait directement. Désolé.

Si vous souhaitez le voir comme une fonctionnalité, vous pouvez le demander sur http://crbug.com/new