Wie lade ich eine von mir entwickelte Chrome-Erweiterung automatisch neu?

263

Ich möchte, dass meine Chrome-Erweiterung jedes Mal neu geladen wird, wenn ich eine Datei im Erweiterungsordner speichere, ohne explizit in chrome: // extensions / auf "reload" klicken zu müssen. Ist das möglich?

Bearbeiten: Ich bin mir bewusst, dass ich das Intervall aktualisieren kann, in dem Chrome Erweiterungen neu lädt. Dies ist eine Lösung auf halbem Weg. Ich möchte jedoch entweder meinen Editor (Emacs oder Textmate) beim Speichern eines Neuladens auslösen lassen oder Chrome zur Überwachung auffordern das Verzeichnis für Änderungen.

Andrey Fedorov
quelle
2
Es scheint schneller zu sein, wenn das Neuladen über die bei chrome aktivierte Benutzeroberfläche ausgelöst wird: // flags / # enable-apps-devtool-app
Eric
Ich habe LiveJS gespalten , um das Live-Neuladen von gepackten Apps zu ermöglichen. Fügen Sie einfach die Datei in Ihre App ein und jedes Mal, wenn Sie eine Datei speichern, wird die App automatisch geladen.
Oz Ramos
Wo ist deine LiveJS-Gabel, @Oz Ramos?
Josh
Ah, ich verstehe: Ihr "LiveJS" -Link ist eigentlich ein Link zu Ihrer Gabel, nicht zu LiveJS.
Josh
6
Dies beantwortet die gestellte Frage nicht, aber ich möchte erwähnen, dass ich aufgehört habe, diese (oder eine andere Erweiterung-Lade-Helfer-Erweiterung) zu wollen, nachdem mir klar wurde, dass ich eine Erweiterung einfach neu laden kann, indem ich Strg-R oder cmd-R drücke ( abhängig vom Betriebssystem) im Hintergrundfenster der Erweiterung. Ich finde, dass dies besser in meinen Workflow passt als alles andere, was ich versucht habe, und es vermeidet auch das Problem des automatischen Neuladens, wenn sich Dateien in einem inkonsistenten Zustand befinden.
Don Hatch

Antworten:

162

Sie können " Extensions Reloader " für Chrome verwenden:

Lädt alle entpackten Erweiterungen über die Symbolleistenschaltfläche der Erweiterung oder durch Navigieren zu " http: //reload.extensions " neu.

Wenn Sie jemals eine Chrome-Erweiterung entwickelt haben, möchten Sie möglicherweise den Prozess des erneuten Ladens Ihrer entpackten Erweiterung automatisieren, ohne die Erweiterungsseite durchgehen zu müssen.

Mit "Extensions Reloader" können Sie alle entpackten Erweiterungen auf zwei Arten neu laden:

1 - Die Symbolleistenschaltfläche der Erweiterung.

2 - Navigieren zu " http: //reload.extensions ".

Das Symbolleistensymbol lädt entpackte Erweiterungen mit einem einzigen Klick neu.

Das "Neuladen durch Browsen" dient zur Automatisierung des Neuladevorgangs mithilfe von "Post-Build" -Skripten. Fügen Sie Ihrem Skript einfach eine Suche zu " http: //reload.extensions " mit Chrome hinzu, und Sie erhalten ein aktualisiertes Chrome-Fenster.

Update: Ab dem 14. Januar 2015 ist die Erweiterung Open-Source und auf GitHub verfügbar .

Arik
quelle
3
Dies ist die bisher beste Lösung, aber es macht es immer noch nicht einfach, die Erweiterung jedes Mal zu aktualisieren, wenn ich eine verwendete Datei ändere, was ich idealerweise gesucht habe.
Andrey Fedorov
2
Vielen Dank. Wollte erwähnen, dass ich PhpStorm verwende und dass ich eine Symbolleistenschaltfläche hinzugefügt habe, die chrome.exe mit der URL "reload.extensions" aufruft. Wann immer ich den Code testen möchte, drücke ich diese Taste und Chrome erscheint mit dem aktualisierten Addon.
Arik
30
Woaw, ich habe es gerade geschafft, gruntjs dazu zu bringen , mit diesem Plugin zu arbeiten, indem ich grunt-open verwendet habe, um zu öffnen, http://reload.extensionswenn eine Datei geändert wird. Es verhält sich jetzt genau wie das Laden von Leber, aber jedes Mal, wenn ich eine der angegebenen Plugin-Dateien ändere, öffnet sich ein störendes Chromfenster: P. Vielen Dank!
GabLeRoux
1
@GabLeRoux Ich bin hierher gekommen, um herauszufinden, ob es schon jemand getan hat. Es wirkt wie ein Zauber.
polkovnikov.ph
1
@AlexanderMills Leider konnte ich es nicht tun, ohne jedes Mal einen neuen Tab zu öffnen. Wenn Sie eine bessere Lösung finden. Zumindest kann man Plugins mit dem github.com/arikw/chrome-extensions-reloader
GabLeRoux
58

Update : Ich habe eine Optionsseite hinzugefügt, damit Sie die ID der Erweiterung nicht mehr manuell suchen und bearbeiten müssen. CRX und Quellcode finden Sie unter: https://github.com/Rob--W/Chrome-Extension-Reloader
Update 2: Verknüpfung hinzugefügt (siehe mein Repository auf Github).
Der Originalcode, der die Grundfunktionen enthält, ist unten dargestellt .


Erstellen Sie eine Erweiterung und verwenden Sie die Browser-Aktionsmethode in Verbindung mit der chrome.extension.managementAPI, um Ihre entpackte Erweiterung neu zu laden.

Der folgende Code fügt Chrome eine Schaltfläche hinzu, mit der beim Klicken eine Erweiterung neu geladen wird.

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: Wählen Sie ein schönes 48x48-Symbol aus, zum Beispiel:
Google Chrome Google Chrome

Rob W.
quelle
1
@trusktr Scotts Antwort lädt nur die Hintergrundseite neu. Beide Antworten können jedoch kombiniert werden (Scotts Antwort + Hilfserweiterung), sodass eine Erweiterung automatisch neu geladen wird, wenn sich die Datei einer Erweiterung ändert. Ich empfehle jedoch gegen diese Vorgehensweise, da die devtools beim Neuladen der Erweiterung geschlossen werden. Ich spiele oft mit einer Testerweiterung und speichere meine Änderungen häufig, auch wenn die Syntax unvollständig ist. Das würde meine Erweiterung zum Absturz bringen, wenn ein echtes automatisches Neuladen aktiviert ist.
Rob W
@RobW Guter Punkt. Ich speichere oft während des Schreibens von Code, damit der Code das betreffende Plugin definitiv beschädigt.
Trusktr
1
@ Sudarshan Sie haben vorgeschlagen, zu verwenden chrome.i18n.getMessage("@@extension_id"). Dies gibt jedoch die Erweiterungs-ID der aktuellen Erweiterung zurück, was nicht sinnvoll ist, da sich eine Erweiterung nicht mithilfe der managementAPI neu laden kann (nach dem Deaktivieren besteht keine Möglichkeit, die Erweiterung erneut zu aktivieren).
Rob W
40

in jeder Funktion oder Veranstaltung

chrome.runtime.reload();

lädt Ihre Erweiterung ( docs ) neu. Sie müssen auch die Datei manifest.json ändern und Folgendes hinzufügen:

...
"permissions": [ "management" , ...]
...
Leonardo Ciaccio
quelle
Für mich hat diese Lösung nur funktioniert, wenn ich chrome.runtime.reload () in das Skript in der Datei index.html geschrieben habe, wobei dies in der Manifestdatei folgendermaßen angegeben ist: ** "background": {"page": "index. html ", **. In meiner js-Datei content_script konnte ich nicht auf diese Funktion zugreifen. Ich glaube, es ist für Sicherheitszwecke.
Titusfx
Ihr Inhaltsskript kann nicht mit Chrome-APIs kommunizieren. Damit das funktioniert, müssen Sie Nachrichten verwenden
marcelocra
chrome.runtime.reload()Was passiert eigentlich, wenn Sie anrufen ? Aktualisieren mehrere Seiten / Registerkarten?
Alexander Mills
5
Ich vermute, wir sollten chrome.runtime.reload()aus dem Hintergrundskript anrufen
Alexander Mills
Hat für mich gearbeitet. Vielen Dank
MikeMurko
39

Ich habe ein einfaches einbettbares Skript erstellt, das Hot Reload ausführt:

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

Es sucht nach Dateiänderungen im Verzeichnis einer Erweiterung. Wenn eine Änderung festgestellt wird, wird die Erweiterung neu geladen und die aktive Registerkarte aktualisiert (um aktualisierte Inhaltsskripte erneut auszulösen).

  • Funktioniert durch Überprüfen der Zeitstempel von Dateien
  • Unterstützt verschachtelte Verzeichnisse
  • Deaktiviert sich automatisch in der Produktionskonfiguration
Vitaly Gordon
quelle
3
Wenn Sie nach einer Lösung mit "Schluckgeschmack" suchen, ist dies die richtige.
Ow3n
1
hat super funktioniert. Haben Sie darüber nachgedacht, ein npm-Paket zu erstellen?
Pixelearth
@pixelearth ja, warum nicht. Hmm, aber was wäre dann der Anwendungsfall? Sie npm install crx-hotreloadin das Verzeichnis der Erweiterung und verweisen dann auf das Skript wie "scripts": ["./node_modules/crx-hotreload/hot-reload.js"]? Korrigieren Sie mich, wenn ich falsch liege.
Vitaly Gordon
1
@MilfordCubicle Ich würde vorschlagen, ein Objekt mit einer Methode zu exportieren, die Sie in Ihrer Datei background.js aufrufen können. Also etwas import reloader from 'hot-reload'dann im Skript reloader.check ()
pixelearth
3
Die Antwort braucht mehr positive Stimmen. Funktioniert auch gut in Kombination mit Webpack --watch, da Sie es einfach in Ihren Build-Ordner legen können, sodass es erst nach Abschluss des Build-Prozesses aktualisiert wird. Keine komplizierten Webpack Post-Build-Befehls-Plugins.
V. Rubinetti
10

Eine andere Lösung wäre das Erstellen eines benutzerdefinierten Livereload-Skripts (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();
    }
  }
};

Dieses Skript stellt über Websockets eine Verbindung zum Livereload-Server her. Anschließend wird beim erneuten Laden der Nachricht von Livereload ein Aufruf von chrome.runtime.reload () ausgegeben. Der nächste Schritt wäre, dieses Skript hinzuzufügen, um es als Hintergrundskript in Ihrer manifest.json auszuführen, und voila!

Hinweis: Dies ist nicht meine Lösung. Ich poste es nur. Ich habe es im generierten Code des Chrome Extension Generators gefunden (Tolles Tool!). Ich poste dies hier, weil es helfen könnte.

Refaelio
quelle
9

Chrome-Erweiterungen verfügen über ein Berechtigungssystem, das dies nicht zulässt (einige Personen in SO hatten das gleiche Problem wie Sie ). Daher funktioniert es IMO nicht, wenn sie aufgefordert werden, "diese Funktion hinzuzufügen". Es gibt eine E - Mail von Chromium Extensions Google Groups mit einer vorgeschlagenen Lösung (Theorie) mitchrome.extension.getViews() , ist aber nicht an der Arbeit entweder garantiert.

Wenn es möglich wäre, manifest.jsoneinige interne Chrome-Seiten wie hinzuzufügen chrome://extensions/, wäre es möglich, ein Plugin zu erstellen, das mit dem ReloadAnker interagiert , und mit einem externen Programm wie XRefresh (einem Firefox-Plugin - es gibt eine Chrome-Version mit Ruby und WebSocket ) würden Sie genau das erreichen, was Sie brauchen:

XRefresh ist ein Browser-Plugin, das die aktuelle Webseite aufgrund von Dateiänderungen in ausgewählten Ordnern aktualisiert. Auf diese Weise können Sie Live-Seiten mit Ihrem bevorzugten HTML / CSS-Editor bearbeiten.

Es ist nicht möglich, aber ich denke, Sie können dasselbe Konzept auf andere Weise verwenden.

Sie könnten stattdessen versuchen, Lösungen von Drittanbietern zu finden, die nach dem Anzeigen von Änderungen in einer Datei (ich kenne weder Emacs noch Textmate, aber in Emacs wäre es möglich, einen App-Aufruf innerhalb einer Aktion "Datei speichern" zu binden) einfach Klicken Sie auf eine bestimmte Koordinate einer bestimmten Anwendung: In diesem Fall ist dies der ReloadAnker Ihrer Erweiterung in der Entwicklung (Sie lassen ein Chrome-Fenster nur für dieses Neuladen geöffnet).

(Verrückt wie die Hölle, aber es kann funktionieren)

GmonC
quelle
7

Hier ist eine Funktion, mit der Sie Dateien auf Änderungen überwachen und neu laden können, wenn Änderungen erkannt werden. Es funktioniert, indem sie über AJAX abgefragt und über window.location.reload () neu geladen werden. Ich nehme an, Sie sollten dies nicht in einem Distributionspaket verwenden.

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
quelle
Kann dies tun, füge hinzu: reloadOnChange (chrome.extension.getURL ('/ manifest.json'));
Scott
Ich habe pastebin.com/mXbSPkeu ausprobiert , aber die Erweiterung wurde nicht aktualisiert (Manifesteinträge, Inhaltsskript, Browseraktion) (Ubuntu 11.10, Chrome 18). Die einzige aktualisierte Datei ist die Hintergrundseite (geänderte console.logNachrichten werden angezeigt).
Rob W
"Beobachten Sie Dateien auf Änderungen und laden Sie sie neu, wenn Änderungen erkannt werden." Für mein Leben kann ich nicht sehen, wie dies wissen würde, dass sich eine Datei geändert hat? Bitte helfen Sie mir zu verstehen, wie es fantastisch klingt!
JasonDavis
oo Ich sehe jetzt, es speichert eine Kopie des Dateiinhalts und vergleicht die zwischengespeicherte Version mit der Ajax-Live-Version ... clever!
JasonDavis
6

Vielleicht bin ich etwas spät zur Party, aber ich habe es für mich gelöst, indem ich https://chrome.google.com/webstore/detail/chrome-unpacked-extension/fddfkmklefkhanofhlohnkemejcbamln erstellt habe

Es funktioniert, indem die chrome://extensionsSeite jederzeit neu geladen wirdfile.change Ereignisse über Websockets eingehen.

Ein Gulp-basiertes Beispiel zum Ausgeben von file.changeEreignissen bei Dateiänderungen in einem Erweiterungsordner finden Sie hier: https://github.com/robin-drexler/chrome-extension-auto-reload-watcher

Warum die gesamte Registerkarte neu laden, anstatt nur die Erweiterungsverwaltungs-API zum erneuten Laden / Aktivieren von Erweiterungen zu verwenden? Das derzeitige Deaktivieren und erneute Aktivieren von Erweiterungen führt dazu, dass alle geöffneten Inspektionsfenster (Konsolenprotokoll usw.) geschlossen werden, was ich während der aktiven Entwicklung als zu ärgerlich empfand.

Robin Drexler
quelle
nett! Ich sehe, Sie haben eine PR für eine neue aktualisierte reload () - Funktion.
Caesarsol
4

Es gibt ein automatisches Plugin zum erneuten Laden, wenn Sie mit Webpack entwickeln: https://github.com/rubenspgcavalcante/webpack-chrome-extension-reloader

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

plugins: [
    new ChromeExtensionReloader()
]

Wird auch mit einem CLI-Tool geliefert, wenn Sie webpack.config.js nicht ändern möchten:

npx wcer

Hinweis: Ein (leeres) Hintergrundskript ist erforderlich, auch wenn Sie es nicht benötigen, da dort der Code zum Neuladen eingefügt wird.

Eugene Kulabuhov
quelle
Bereits archiviert :( Verweis auf github.com/rubenspgcavalcante/webpack-extension-reloader, der browserübergreifend ist und sich noch in der aktiven Entwicklung befindet :)
con--
3

Ihre Inhaltsdateien wie HTML und Manifestdateien können ohne Installation der Erweiterung nicht geändert werden, aber ich glaube, dass die JavaScript-Dateien dynamisch geladen werden, bis die Erweiterung gepackt wurde.

Ich weiß das aufgrund eines aktuellen Projekts, an dem ich über die Chrome Extensions-API arbeite, und es scheint jedes Mal zu laden, wenn ich eine Seite aktualisiere.

RobertPitt
quelle
Ich weiß nicht, welche Version Sie verwendet haben, aber als 16.0.912.63 m lädt Chrome alle Dateien automatisch neu. Außer dem Manifest.
Zequez
@Zequez: Die Dateien werden für mich nicht neu geladen. :(
Randomblue
Du hast recht. Ich habe die Seite Optionen entwickelt, auf der die Skripte aus dem Dokument aufgerufen und daher neu geladen werden. Die content_script-Skripte werden nicht neu geladen = /
Zequez
3

Vielleicht eine etwas späte Antwort, aber ich denke, crxreload könnte für Sie funktionieren. Es ist mein Ergebnis des Versuchs, während der Entwicklung einen Workflow zum erneuten Laden und Speichern zu erstellen.

Mattias Wadman
quelle
3

Ich verwende eine Verknüpfung zum Neuladen. Ich möchte nicht die ganze Zeit neu laden, wenn ich eine Datei speichere

Mein Ansatz ist also leicht und Sie können die Nachladefunktion in belassen

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

Drücken Sie nun im Chrome-Browser Strg + M, um neu zu laden

Johan Hoeksma
quelle
Sie können die Reload-Funktion auch in der browserAction verwenden, damit sie beim Klicken auf die Schaltfläche neu geladen wird. stackoverflow.com/questions/30427908/…
powerd
Ja, Sie können chrome.runtime.reload () immer laden. Ich benutze: Editor> Strg + s> Alt + Tab> Strg + m. Hintergrund..js Konsole geöffnet. Es ist schnell, ohne eine Maus zu benutzen
Johan Hoeksma
2

Verwenden Sie dann npm init, um eine package.json im Verzeichnis root zu erstellen

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

dann erstellen Sie eine gulpfile.js

was aussieht wie:

/* 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"}));
});

Dies funktioniert bei der Entwicklung mit CrossRider. Sie können beobachten, wie Sie den Pfad ändern, unter dem Sie die Dateien anzeigen, vorausgesetzt, Sie haben npm und node installiert.

Anthony
quelle
2

Haftungsausschluss: Ich habe diese Erweiterung selbst entwickelt.

Clerc - für Chrome Live Extension Reloading Client

Stellen Sie eine Verbindung zu einem LiveReload-kompatiblen Server her, um Ihre Erweiterung bei jedem Speichern automatisch neu zu laden.

Bonus: Mit ein wenig zusätzlicher Arbeit können Sie auch die Webseiten, die Ihre Erweiterung ändert, automatisch neu laden.

Die meisten Webseitenentwickler verwenden ein Build-System mit einer Art Beobachter, der automatisch ihre Dateien erstellt, ihren Server neu startet und die Website neu lädt.

Das Entwickeln von Erweiterungen sollte nicht so unterschiedlich sein. Clerc bringt die gleiche Automatisierung für Chrome-Entwickler. Richten Sie ein Build-System mit einem LiveReload-Server ein, und Clerc wartet auf Reload-Ereignisse, um Ihre Erweiterung zu aktualisieren.

Das einzige große Problem sind Änderungen an manifest.json. Alle winzigen Tippfehler im Manifest führen wahrscheinlich dazu, dass weitere Neuladeversuche fehlschlagen, und Sie können Ihre Erweiterung nicht mehr deinstallieren / neu installieren, damit Ihre Änderungen wieder geladen werden.

Clerc leitet die vollständige Nachricht zum erneuten Laden nach dem erneuten Laden an Ihre Nebenstelle weiter, sodass Sie die bereitgestellte Nachricht optional verwenden können, um weitere Aktualisierungsschritte auszulösen.

skylize
quelle
1

Dank @GmonC und @Arik und etwas Freizeit schaffe ich es, dies zum Laufen zu bringen. Ich musste zwei Dateien ändern, damit dies funktioniert.

(1) Installieren Sie LiveReload und Chrome Extension für diese Anwendung. Dies ruft ein Skript zum Ändern von Dateien auf.

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

(3) Zeile ändern #509auf

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

(4) Installieren Sie nun eine weitere Erweiterung Extensions Reloader mit einem nützlichen Link-Handler, mit dem alle Entwicklungserweiterungen beim Navigieren neu geladen werden"http://reload.extensions"

(5) Ändern Sie nun diese Erweiterung background.min.jsauf diese Weise

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

ersetzen mit

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

Öffnen Sie die LiveReload-Anwendung, blenden Sie die Schaltfläche zum erneuten Laden von Erweiterungen aus und aktivieren Sie die LiveReload-Erweiterung, indem Sie auf die Schaltfläche in der Symbolleiste klicken. Sie werden nun die Seite und die Erweiterungen für jede Dateiänderung neu laden, während Sie alle anderen Extras von LiveReload verwenden (CSS-Neuladen, Neuladen von Bildern usw.).

Das einzig schlechte daran ist, dass Sie den Vorgang zum Ändern von Skripten bei jedem Erweiterungsupdate wiederholen müssen. Fügen Sie die Erweiterung als entpackt hinzu, um Aktualisierungen zu vermeiden.

Wenn ich mehr Zeit habe, um damit herumzuspielen, werde ich wahrscheinlich eine Erweiterung erstellen, die diese beiden Erweiterungen überflüssig macht.

Bis dahin arbeite ich an meiner Erweiterung Projext Axeman

Aleksandar Toplek
quelle
1

Ich habe gerade ein neues Grunz- basiertes Projekt gefunden, das Bootstrapping, Gerüste, einige automatisierte Vorverarbeitungsfunktionen sowie automatisches Nachladen bietet (keine Interaktion erforderlich).

Booten Sie Ihre Chrome-Erweiterung von Websecurify

ProDataLab
quelle
1

Wenn Sie einen Mac haben, ist der einfachste Weg mit Alfred App!

Holen Sie sich einfach die Alfred App mit Powerpack , fügen Sie den im folgenden Link angegebenen Workflow hinzu und passen Sie den gewünschten Hotkey an (ich verwende gerne ⌘ + ⌥ + R). Das ist alles.

Jedes Mal, wenn Sie den Hotkey verwenden, wird Google Chrome neu geladen, unabhängig davon, welche Anwendung Sie gerade verwenden.

Wenn Sie einen anderen Browser verwenden möchten, öffnen Sie das AppleScript in den Alfred Preferences Workflows und ersetzen Sie "Google Chrome" durch "Firefox", "Safari", ...

Ich werde hier auch den Inhalt des Skripts / usr / bin / osascript zeigen, das in der Datei ReloadChrome.alfredworkflow verwendet wird, damit Sie sehen können, was es tut.

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

Die Workflow-Datei lautet ReloadChrome.alfredworkflow .

Ist Ma
quelle
1

Ich möchte meine Erweiterungen über Nacht neu laden (aktualisieren). Dies ist, was ich in background.js verwende:

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);

Grüße, Peter

Peter Driessen
quelle
0

Ich habe LiveJS gespalten , um das Live-Neuladen von gepackten Apps zu ermöglichen. Fügen Sie einfach die Datei in Ihre App ein und jedes Mal, wenn Sie eine Datei speichern, wird die App automatisch geladen.

Oz Ramos
quelle
0

Wie in den Dokumenten erwähnt: Die folgende Befehlszeile lädt eine App neu

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

Also habe ich gerade ein Shell-Skript erstellt und diese Datei von gulp aufgerufen. Super einfach:

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

Führen Sie die erforderlichen Überwachungsbefehle für Skripte aus und rufen Sie die Aufgabe zum erneuten Laden auf, wenn Sie möchten. Sauber, einfach.

yeahdixon
quelle
0

Hier leuchten Software wie AutoIt oder Alternativen. Der Schlüssel ist das Schreiben eines Skripts, das Ihre aktuelle Testphase emuliert. Gewöhnen Sie sich daran, mindestens eine davon zu verwenden, da viele Technologien keine klaren Workflow- / Testpfade enthalten.

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("^`")

Offensichtlich ändern Sie den Code entsprechend Ihren Test- / Iterationsanforderungen. Stellen Sie sicher, dass die Tab-Klicks genau der Stelle entsprechen, an der sich das Ankertag auf der Website chrome: // extensions befindet. Sie können auch relativ zu Fenstermausbewegungen und anderen solchen Makros verwenden.

Ich würde das Skript auf ähnliche Weise zu Vim hinzufügen:

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

Das heißt, wenn ich in Vim bin, drücke ich die Taste über ENTER (normalerweise verantwortlich für: | und \), die als Leader-Taste bezeichnet wird, und folge ihr mit einem Großbuchstaben 'A'. Dadurch wird mein Testphasenskript gespeichert und gestartet.

Bitte stellen Sie sicher, dass Sie die Abschnitte {input ...} im obigen Vim / Hotkey-Skript entsprechend ausfüllen.

In vielen Editoren können Sie mit Hotkeys etwas Ähnliches tun.

Alternativen zu AutoIt finden Sie hier .

Für Windows: AutoHotkey

Für Linux: xdotool, xbindkeys

Für Mac: Automator

maelwyn
quelle
0

Ich entwickle hauptsächlich in Firefox, wo web-ext rundie Erweiterung nach dem Ändern von Dateien automatisch neu geladen wird. Sobald es fertig ist, führe ich eine letzte Testrunde in Chrome durch, um sicherzustellen, dass keine Probleme in Firefox aufgetreten sind.

Wenn Sie jedoch hauptsächlich in Chrome entwickeln und keine Erweiterungen von Drittanbietern installieren möchten, können Sie auch eine test.htmlDatei im Ordner der Erweiterung erstellen und eine Reihe von SSCCEs hinzufügen . Diese Datei verwendet dann ein normales <script>Tag, um das Erweiterungsskript einzufügen.

Sie können dies für 95% der Tests verwenden und die Erweiterung dann manuell neu laden, wenn Sie sie auf Live-Sites testen möchten.

Das gibt die Umgebung, in der eine Erweiterung ausgeführt wird, nicht identisch wieder, ist aber für viele einfache Dinge gut genug.

Ian Dunn
quelle
-1

Ja, Sie können es indirekt tun! Hier ist meine Lösung.

In manifest.json

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

In injizieren.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);
})();

Ihr injiziertes Skript kann von jedem Ort aus ein anderes Skript injizieren.

Ein weiterer Vorteil dieser Technik ist, dass Sie die Begrenzung der isolierten Welt einfach ignorieren können . Siehe Ausführungsumgebung für Inhaltsskripte

Wukong
quelle
Arbeitest du nicht für mich? Wenn ich script.src = 'foo.js' versuche, wird nach einer URL gesucht, die sich auf die aktuelle Website bezieht. Wenn ich den vollständigen Pfad versuche, erhalte ich: Lokale Ressource darf nicht geladen werden: 'file: ///../foo.js'
Jesse Aldridge
-2

BROWSER-SYNC

Verwenden der erstaunlichen Browser-Sync

  • Aktualisieren Sie die Browser (beliebig), wenn sich der Quellcode ändert (HTML, CSS, Bilder usw.).
  • unterstützen Windows, MacOS und Linux
  • Sie können Ihre Code-Updates sogar (live) mit Ihren Mobilgeräten verfolgen

Installation unter MacOS (Hilfe zur Installation unter anderen Betriebssystemen anzeigen )

Installieren Sie NVM, damit Sie jede Node-Version ausprobieren können

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

Verwendung der Browsersynchronisierung für statische Websites

Sehen wir uns zwei Beispiele an:

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

Mit dieser --serverOption können Sie einen lokalen Server an einem beliebigen Ort in Ihrem Terminal ausführen und --filesangeben, welche Dateien für Änderungen nachverfolgt werden sollen. Ich bevorzuge es, spezifischer für die verfolgten Dateien zu sein, daher verwende ich im zweiten Beispiel die ackAuflistung bestimmter Dateierweiterungen (wichtig ist, dass diese Dateien keine Dateinamen mit Leerzeichen haben) und verwende sie auchipconfig , um meine aktuelle IP unter MacOS zu finden.

Verwendung der Browsersynchronisierung für dynamische Websites

Wenn Sie PHP, Rails usw. verwenden, haben Sie bereits einen laufenden Server, der jedoch nicht automatisch aktualisiert wird, wenn Sie Änderungen an Ihrem Code vornehmen. Sie müssen also den --proxySchalter verwenden, um die Browsersynchronisierung darüber zu informieren, wo sich der Host für diesen Server befindet.

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

Im obigen Beispiel läuft auf meinem Browser bereits eine Rails-App 192.168.33.12:3000. Es läuft wirklich auf einer VM mit einer Vagrant-Box, aber ich konnte über Port 3000 auf diesem Host auf die virtuelle Maschine zugreifen. Ich möchte --no-notifydie Browsersynchronisierung beenden und mir jedes Mal, wenn ich meinen Code ändere, eine Benachrichtigung über den Browser senden, und --no-opendas Browsersynchronisierungsverhalten stoppen, das beim Starten des Servers sofort eine Browserregisterkarte lädt.

WICHTIG: Nur für den Fall, dass Sie Rails verwenden, vermeiden Sie die Verwendung von Turbolinks bei der Entwicklung, da Sie sonst bei Verwendung der --proxyOption nicht auf Ihre Links klicken können .

Hoffe, es wäre für jemanden nützlich. Ich habe viele Tricks ausprobiert, um den Browser zu aktualisieren (sogar einen alten Beitrag, den ich vor einiger Zeit mit AlfredApp zu dieser StackOverflow-Frage eingereicht habe), aber dies ist wirklich der richtige Weg. Keine Hacks mehr, es fließt einfach.

CREDIT: Starten Sie einen lokalen Live-Reload-Webserver mit einem Befehl

Ist Ma
quelle
-4

Es kann nicht direkt gemacht werden. Es tut uns leid.

Wenn Sie es als Funktion sehen möchten, können Sie es unter http://crbug.com/new anfordern

Kinlan
quelle
1
Es kann getan werden, dies ist keine richtige Antwort. Schauen Sie sich nur die anderen Antworten an und sie werden Ihnen das sagen.
ICanKindOfCode