wake-up-neo.net

Wie lade ich eine Chrome-Erweiterung, die ich gerade entwickle, automatisch neu?

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

Edit: Ich weiß, dass ich das Intervall aktualisieren kann bei dem Chrome Erweiterungen neu lädt, was eine halbe Lösung ist, aber ich möchte entweder, dass mein Editor (Emacs oder Textmate) beim Laden ein Reload auslöst oder Bitten Sie Chrome, das Verzeichnis auf Änderungen zu überwachen.

213
Andrey Fedorov

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

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

Wenn Sie jemals eine Chrome-Erweiterung entwickelt haben, möchten Sie vielleicht Automatisieren Sie den Vorgang des erneuten Ladens Ihrer entpackten Erweiterung ohne müssen die Erweiterungsseite durchgehen.

Mit "Extensions Reloader" können Sie alle entpackten Erweiterungen erneut laden mit zwei Möglichkeiten:

1 - Die Symbolleistenschaltfläche der Erweiterung.

2 - Durchsuchen von " http: //reload.extensions ".

Das Symbol der Symbolleiste lädt die entpackten Erweiterungen mit einem einzigen Klick neu.

Das "Neuladen durch Durchsuchen" dient zur Automatisierung des Neuladevorgangs Verwenden Sie "Post Build" -Skripte - fügen Sie einfach ein Durchsuchen zu. " http: //reload.extensions " mit Chrome zu Ihrem Skript und Sie werden habe ein aktualisiertes Chrome-Fenster.

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

135
Arik

Update: Ich habe eine Optionsseite hinzugefügt, damit Sie die ID der Nebenstelle 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 ursprüngliche Code, der die basic-Funktionalität enthält, wird unter angezeigt.


Erstellen Sie eine Erweiterung und verwenden Sie die Browser Action -Methode in Verbindung mit der chrome.extension.management - API, um Ihre entpackte Erweiterung erneut zu laden.

Der folgende Code fügt Chrome eine Schaltfläche hinzu, durch die eine Erweiterung beim Klicken 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 beliebiges Nice 48x48-Symbol. Beispiel:
Google Chrome http://icons.iconarchive.com/icons/google/chrome/48/Google-Chrome-icon.png Google Chrome

51
Rob W

in jeder Funktion oder Veranstaltung

chrome.runtime.reload();

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

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

Ich habe ein einfaches einbettbares Skript erstellt, das heißes Neuladen ausführt:

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

Es überwacht die Dateiänderungen im Verzeichnis einer Erweiterung. Wenn eine Änderung erkannt wird, wird die Erweiterung erneut geladen und die aktive Registerkarte aktualisiert (um aktualisierte Inhaltsskripts erneut auszulösen).

  • Funktioniert durch Überprüfen der Zeitstempel von Dateien
  • Unterstützt verschachtelte Verzeichnisse
  • Deaktiviert sich automatisch in der Produktionskonfiguration
29
Vitaly Gordon

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. Dann wird beim Aufruf der Reload-Nachricht von livereload ein chrome.runtime.reload () - Aufruf ausgegeben. Der nächste Schritt wäre, dieses Skript hinzuzufügen, um es als Hintergrundskript in Ihrem manifest.json und voila! Auszuführen.

Hinweis: Dies ist nicht meine Lösung. Ich poste es einfach. Ich habe es im generierten Code von Chrome Extension Generator (Tolles Tool!) Gefunden. Ich poste das hier, weil es helfen könnte.

10
yarden.refaeli

Chrome-Erweiterungen verfügen über ein -Berechtigungssystem , das es nicht zulassen würde (einige Personen in SO hatten dasselbe Problem wie Sie ). Daher wird die Aufforderung zum "Hinzufügen dieser Funktion" nicht ausgeführt IMO arbeiten. Es gibt eine E-Mail von Chromium Extensions Google Groups mit einer vorgeschlagenen Lösung (Theorie) mit chrome.extension.getViews(), die jedoch nicht garantiert funktioniert.

Wenn es möglich war, einige interne Chrome-Seiten wie manifest.json zum chrome://extensions/ hinzuzufügen, ist es möglich, ein Plugin zu erstellen, das mit dem Reload-Anker interagiert, und mit einem externen Programm wie XRefresh (einem Firefox-Plugin -) a Chrome-Version mit Ruby und WebSocket) erreichen Sie genau das, was Sie brauchen:

XRefresh ist ein Browser-Plugin, das aktualisiert die aktuelle Webseite aufgrund von Dateiänderung in ausgewählten Ordnern. Diese ermöglicht es, eine Live-Seite zu erstellen Bearbeitung mit Ihrem bevorzugten HTML/CSS Editor.

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

Sie könnten versuchen, Lösungen von Drittanbietern zu finden, die nach Änderungen in einer Datei (ich kenne Emacs und Textmate nicht, aber in Emacs wäre es möglich, einen App-Aufruf innerhalb einer Aktion "Datei speichern" zu binden) klickt auf eine bestimmte Koordinate einer bestimmten Anwendung: In diesem Fall ist dies der Anker Reload von 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)

9
GmonC

Mit dieser Funktion können Sie Dateien auf Änderungen überprüfen und erneut laden, wenn Änderungen festgestellt werden. Dazu werden sie über AJAX abgefragt und über window.location.reload () erneut geladen. Ich denke, 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'));
7
Scott

Vielleicht bin ich ein bisschen zu 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 Seite chrome://extensions neu geladen wird, wenn file.change-Ereignisse über Websockets eingehen.

Ein Gulp-basiertes Beispiel für die Ausgabe eines file.change-Ereignisses bei Dateiänderungen in einem Erweiterungsordner finden Sie hier: https://github.com/robin-drexler/chrome-extension-auto-reload-watcher

Warum sollten Sie die gesamte Registerkarte neu laden, anstatt nur die Erweiterungsverwaltungs-API zu verwenden, um Erweiterungen neu zu laden bzw. wieder zu aktivieren? Durch das Deaktivieren und Aktivieren von Erweiterungen werden derzeit alle geöffneten Inspektionsfenster (Konsolenprotokoll usw.) geschlossen, was während der aktiven Entwicklung zu lästig war.

6
Robin Drexler

Vielleicht etwas spät, aber ich denke, crxreload könnte für Sie funktionieren. Es ist mein Ergebnis eines Versuchs, während der Entwicklung einen Workflow zum Nachladen beim Speichern zu haben.

3
Mattias Wadman

Ihre Inhaltsdateien wie html und manifest-Dateien können ohne Installation der Erweiterung nicht geändert werden. Ich glaube jedoch, dass die JavaScript-Dateien dynamisch geladen werden, bis die Erweiterung gepackt wurde.

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

3
RobertPitt

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

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

dann erstellen Sie einen 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 für mich bei der Entwicklung mit CrossRider. Möglicherweise ändern Sie den Pfad, unter dem Sie die Dateien ansehen, auch, wenn Sie npm und node installiert haben.

2
Antoine

Es gibt ein Plugin zum automatischen Neuladen, wenn Sie mit dem 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 die Datei webpack.config.js nicht ändern möchten:

npx wcer

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

1

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

Bootstrap Deine Chrome-Erweiterung von Websecurify

1
ProDataLab

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

Viele Grüße... Peter

1
Peter Driessen

Haftungsausschluss: Ich habe diese Erweiterung selbst entwickelt.

Clerc - für Chrome Live Extension Reloading Client

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

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

Die meisten Entwickler von Webseiten verwenden ein Build-System mit einer Art Watcher, das ihre Dateien automatisch erstellt, ihren Server neu startet und die Website neu lädt.

Die Entwicklung von Erweiterungen sollte nicht so unterschiedlich sein. Clerc bringt diese Automatisierung für Chrome-Entwickler. Richten Sie ein Build-System mit einem LiveReload-Server ein, und Clerc überwacht die Aktualisierungsereignisse, um die Erweiterung zu aktualisieren.

Das einzige große Problem sind Änderungen an der manifest.json. Bei winzigen Tippfehlern im Manifest werden möglicherweise weitere Neuladeversuche fehlschlagen. Sie müssen die Erweiterung deinstallieren/erneut installieren, damit die Änderungen erneut geladen werden.

Clerc leitet die komplette Reload-Nachricht nach dem Neuladen an die Erweiterung weiter, sodass Sie die bereitgestellte Nachricht optional verwenden können, um weitere Aktualisierungsschritte auszulösen.

1
skylize

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

Holen Sie sich einfach Alfred App with Powerpack, fügen Sie dann den Workflow hinzu, der im untenstehenden Link enthalten ist, und passen Sie den gewünschten Hotkey an (ich verwende ⌘ + ⌥ + 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 Alfred Preferences Workflows und ersetzen Sie "Google Chrome" durch "Firefox", "Safari", ...

Ich werde hier auch den Inhalt des / usr/bin/osascript - Skripts anzeigen, das in der ReloadChrome.alfredworkflow-Datei 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 Arbeitsablaufdatei lautet ReloadChrome.alfredworkflow .

1
Is Ma

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 Skripts aus und rufen Sie die Reload-Task auf, wenn Sie möchten. Sauber, einfach. 

0
yeahdixon

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 beibehalten

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 jetzt Strg + M im Chrome-Browser, um neu zu laden

0
Johan Hoeksma

Der Autor hat die nächste Version dieses Webpack-Plugins empfohlen: https://github.com/rubenspgcavalcante/webpack-extension-reloader . Es funktioniert sehr gut für mich.

0
Hieu Pham

Dank @GmonC und @Arik und etwas Freizeit schaffe ich es, dass das funktioniert. Ich musste zwei Dateien ändern, damit dies funktioniert.

(1) Installieren Sie LiveReload und Chrome Extension für diese Anwendung. Dadurch wird ein Skript zum Ändern von Dateien aufgerufen.

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

(3) Ändern Sie die Zeile #509 in

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

(4) Installieren Sie jetzt eine andere Erweiterung Extensions Reloader mit einem nützlichen Link-Handler, der alle Entwicklungserweiterungen beim Navigieren zu "http://reload.extensions" neu lädt.

(5) Ändern Sie nun den background.min.js dieser Erweiterung auf 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, verbergen Sie die Schaltfläche "Extension Reloader" und aktivieren Sie die LiveReload-Erweiterung, indem Sie auf die Schaltfläche in der Symbolleiste klicken. Jetzt werden Seite und Erweiterungen bei jeder Dateiänderung neu geladen, während alle anderen Goodies von LiveReload verwendet werden (CSS-Neuladen, Image-Neuladen usw.).

Das einzig schlechte daran ist, dass Sie das Ändern von Skripten bei jedem Erweiterungsupdate wiederholen müssen. Um Aktualisierungen zu vermeiden, fügen Sie die Erweiterung als entpackt hinzu.

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

Bis dahin arbeite ich an meiner Erweiterung Projext Axeman

0

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

0
Oz Ramos

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

Natürlich ändern Sie den Code entsprechend Ihren Test-/Iterationsanforderungen. Stellen Sie sicher, dass die Tab-Klicks richtig sind, wo sich das Ankertag in der Erweiterungssite von chrome: // befindet. Sie können auch relativ zu Fenstermausbewegungen und anderen derartigen Makros verwenden.

Ich würde das Skript in ähnlicher 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 oberhalb von ENTER (normalerweise verantwortlich für: | und \), die als Führerschaltfläche bezeichnet wird, und folge ihr mit einem 'A' und es speichert und beginnt mein Skript für die Testphase.

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

In vielen Editoren können Sie ähnliche Aktionen mit Hotkeys ausführen.

Alternativen zu AutoIt finden Sie hier .

Für Windows: AutoHotkey

Für Linux: xdotool, xbindkeys

Für Mac: Automator

0
maelwyn

Ich entwickle hauptsächlich in Firefox, wo web-ext run die Erweiterung automatisch neu lädt, nachdem die Dateien geändert wurden. Sobald es fertig ist, teste ich eine letzte Runde in Chrome, um sicherzustellen, dass keine Probleme in Firefox angezeigt werden.

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

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

Die Umgebung, in der eine Erweiterung ausgeführt wird, wird zwar nicht identisch reproduziert, ist aber für viele einfache Dinge ausreichend.

0
Ian Dunn