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

263

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.

Andrey Fedorov
la source
2
Il semble être plus rapide lorsque le rechargement est déclenché à partir de l'interface utilisateur activée sur chrome: // flags / # enable-apps-devtool-app
Eric
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.
Oz Ramos
Où est votre fork LiveJS, @Oz Ramos?
Josh
Ah, je vois: votre lien "LiveJS" est en fait un lien vers votre fork, pas vers LiveJS.
Josh
6
Cela ne répond pas à la question posée, mais je tiens à mentionner que j'ai cessé de vouloir cela (ou toute autre extension d'assistance de chargement d'extension) après avoir réalisé que je peux facilement recharger une extension en appuyant sur ctrl-R ou cmd-R ( en fonction du système d'exploitation) dans la fenêtre d'arrière-plan de l'extension. Je trouve que cela s'intègre mieux dans mon flux de travail que tout ce que j'ai essayé, et cela évite également le problème du rechargement automatique lorsque les fichiers sont dans un état incohérent.
Don Hatch

Réponses:

162

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 .

Arik
la source
3
C'est la meilleure solution jusqu'à présent, mais cela ne facilite toujours pas la mise à jour de l'extension à chaque fois que je modifie un fichier qu'il utilise, ce que je recherchais idéalement.
Andrey Fedorov
2
Merci. Je voulais mentionner que j'utilise PhpStorm et que j'ai ajouté un bouton de barre d'outils qui appelle chrome.exe avec l'url "reload.extensions". Chaque fois que je veux tester le code, j'appuie sur ce bouton et Chrome s'affiche avec l'addon mis à jour.
Arik
30
Woaw, j'ai juste réussi à faire fonctionner gruntjs avec ce plugin en utilisant grunt-open pour l'ouvrir http://reload.extensionslorsqu'un fichier est modifié. Il agit maintenant exactement comme livereload, mais avec une fenêtre chromée ennuyante qui s'ouvre à chaque fois que je modifie l'un des fichiers de plugin spécifiés: P. Merci!
GabLeRoux
1
@GabLeRoux Je suis venu ici juste pour voir si quelqu'un l'a déjà fait. Il fonctionne comme un charme.
polkovnikov.ph
1
@AlexanderMills malheureusement je n'ai pas pu le faire sans ouvrir un nouvel onglet à chaque fois. Si vous trouvez une meilleure solution. Au moins, on peut recharger les plugins avec le github.com/arikw/chrome-extensions-reloader
GabLeRoux
58

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:
Google Chrome Google Chrome

Rob W
la source
1
La réponse de @trusktr Scott ne recharge que la page d'arrière-plan. Cependant, les deux réponses peuvent être combinées (réponse Scotts + extension d'assistance), de sorte qu'une extension est automatiquement rechargée lorsque le fichier d'une extension change. Je déconseille toutefois cette pratique, car les devtools sont fermés lors du rechargement de l'extension. Je joue souvent avec une extension de test et enregistre fréquemment mes modifications, même lorsque la syntaxe est incomplète. Cela ferait planter mon extension si un vrai rechargement automatique était activé.
Rob W
@RobW Bon point. J'économise souvent au milieu de l'écriture du code afin que le code casse définitivement le plugin en question.
trusktr
1
@Sudarshan Vous avez suggéré d'utiliser chrome.i18n.getMessage("@@extension_id"). Cela renvoie cependant l'extensionID de l' extension actuelle , ce qui n'est pas utile car une extension ne peut pas se recharger à l'aide de l' managementAPI (après la désactivation, elle n'a pas la possibilité de réactiver l'extension).
Rob W
41

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" , ...]
...
Leonardo Ciaccio
la source
pour moi, cette solution ne fonctionnait que si j'écrivais chrome.runtime.reload () dans le script dans le index.html où est spécifié dans le fichier manifeste de la manière suivante: ** "background": {"page": "index. html ", **. Dans mon fichier content_script js, je n'ai pas pu accéder à cette fonction. Je crois que c'est pour des raisons de sécurité.
titusfx
Votre script de contenu ne peut pas communiquer avec les API Chrome. Pour que cela fonctionne, vous devez utiliser des messages
marcelocra
lorsque vous appelez chrome.runtime.reload(), que se passe-t-il réellement? Est-ce que plusieurs pages / onglets sont actualisés?
Alexander Mills
5
Je suppose que nous devrions appeler à chrome.runtime.reload()partir du script d'arrière-plan
Alexander Mills
A travaillé pour moi. Merci
MikeMurko
39

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
Vitaly Gordon
la source
3
Si vous cherchez une solution "à saveur de gorgée", c'est celle-ci.
ow3n du
1
a très bien fonctionné. Avez-vous envisagé de créer un package npm?
pixelearth du
@pixelearth ouais, pourquoi pas. Hmm, mais quel serait le cas d'utilisation alors? Vous npm install crx-hotreloaddans le répertoire de l'extension, puis référencez le script comme "scripts": ["./node_modules/crx-hotreload/hot-reload.js"]? Corrigez-moi si je me trompe.
Vitaly Gordon
1
@MilfordCubicle Je suggérerais d'exporter un objet qui a une méthode que vous pourriez appeler dans votre fichier background.js. Donc quelque chose import reloader from 'hot-reload'dans le script reloader.check ()
pixelearth
3
La réponse a besoin de plus de votes positifs. Fonctionne bien en combinaison avec Webpack --watchégalement, car vous pouvez simplement le placer dans votre dossier de génération afin qu'il ne soit mis à jour qu'une fois le processus de génération terminé. Aucun plug-in de commande Webpack post-build compliqué.
V. Rubinetti
10

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.

refaelio
la source
9

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)

GmonC
la source
7

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'));
Scott
la source
Peut faire, ajouter: reloadOnChange (chrome.extension.getURL ('/ manifest.json'));
Scott
J'ai essayé pastebin.com/mXbSPkeu , mais l'extension n'est pas mise à jour (entrées de manifeste, script de contenu, action du navigateur) (Ubuntu 11.10, Chrome 18). Le seul fichier mis à jour est la page d'arrière-plan (les console.logmessages modifiés s'affichent).
Rob W
"surveiller les fichiers pour les modifications et recharger si des modifications sont détectées." Pour ma vie, je ne vois pas comment cela pourrait savoir qu'un fichier a changé? S'il vous plaît, aidez-moi à comprendre car cela semble génial!
JasonDavis
oo Je vois maintenant, c'est de stocker une copie du contenu des fichiers et de comparer la version mise en cache avec la version live ajax .... intelligent!
JasonDavis
6

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.

Robin Drexler
la source
agréable! Je vois que vous avez un PR pour une nouvelle fonction reload () mise à niveau.
caesarsol
4

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.

Eugene Kulabuhov
la source
Déjà archivé :( pointant vers github.com/rubenspgcavalcante/webpack-extension-reloader qui est un navigateur croisé, et toujours en développement actif cependant :)
con--
3

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.

RobertPitt
la source
Je ne sais pas quelle version vous utilisiez, mais comme 16.0.912.63 m, Chrome recharge automatiquement tous les fichiers. Sauf le manifeste.
Zequez
@Zequez: Les fichiers ne sont pas rechargés pour moi. :(
Randomblue
Vous avez raison. Je développais la page Options, qui appelle les scripts à partir du document et donc à les recharger. Les scripts content_script ne sont pas rechargés = /
Zequez
3

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.

Mattias Wadman
la source
3

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

Johan Hoeksma
la source
Vous pouvez également utiliser la fonction de rechargement dans le browserAction afin qu'elle se recharge au clic du bouton. stackoverflow.com/questions/30427908/…
powerd
Oui, vous pouvez charger chrome.runtime.reload () partout. J'utilise: éditeur> ctrl + s> alt + tab> ctrl + m. Ayant la console background..js ouverte. C'est rapide, sans utiliser de souris
Johan Hoeksma
2

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.

Anthony
la source
2

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.

skylize
la source
1

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

Aleksandar Toplek
la source
1

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

ProDataLab
la source
1

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 .

Est Ma
la source
1

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

Peter Driessen
la source
0

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.

Oz Ramos
la source
0

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.

ouaisdixon
la source
0

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

maelwyn
la source
0

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.

Ian Dunn
la source
-1

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

wukong
la source
Vous ne travaillez pas pour moi? Si j'essaie script.src = 'foo.js', il recherche une URL par rapport au site Web actuel. Si j'essaie le chemin complet, j'obtiens: Pas autorisé à charger la ressource locale: 'file: ///../foo.js'
Jesse Aldridge
-2

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

Est Ma
la source
-4

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

Kinlan
la source
1
Cela peut être fait, ce n'est pas une bonne réponse. Jetez un œil aux autres réponses et elles vous le diront.
ICanKindOfCode