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

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.

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 .

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:

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" , ...]
...

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

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.

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)

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

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.

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.

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.

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.

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

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.

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.

Die großartigen Jungs von Mozilla haben gerade einen neuen https://github.com/mozilla/web-ext veröffentlicht , mit dem Sie starten könnenweb-ext run --target chromium

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

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

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 .

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

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.

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.

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

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.

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.

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

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

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