Geliştirdiğim bir Chrome uzantısını nasıl otomatik olarak yeniden yüklerim?

Chrome uzantımın, chrome: // extensions / dizinindeki "yeniden yükle" yi açıkça tıklamak zorunda kalmadan, uzantı klasörüne her dosya kaydettiğimde yeniden yüklenmesini istiyorum. Mümkün mü?

Düzenleme: Chrome'un uzantıları yeniden yükleme aralığını güncelleyebileceğimin farkındayım , bu da yarım yönlü bir çözümdür, ancak editörümü (emacs veya textmate) yeniden yüklemeyi kaydetme veya Chrome'dan izlemesini istemeyi tercih ederim değişiklikler dizini.

Chrome için " Uzantı Yeniden Yükleme Aracı " nı kullanabilirsiniz :

Paketten çıkarılmış tüm uzantıları, uzantının araç çubuğu düğmesini kullanarak veya " http: //reload.extensions " öğesine giderek yeniden yükler

Daha önce bir Chrome uzantısı geliştirdiyseniz, uzantılar sayfasına gitmeye gerek kalmadan paketlenmemiş uzantınızı yeniden yükleme işlemini otomatikleştirmek isteyebilirsiniz.

"Uzantı Yeniden Yükleme Aracı", paketlenmemiş tüm uzantıları 2 yolla yeniden yüklemenize olanak tanır:

1 - Uzantının araç çubuğu düğmesi.

2 - " http: //reload.extensions " a göz atma .

Araç çubuğu simgesi, paketlenmemiş uzantıları tek bir tıklama ile yeniden yükleyecektir.

"Gezinerek yeniden yükle", "post derleme" komut dosyalarını kullanarak yeniden yükleme işlemini otomatikleştirmek için tasarlanmıştır; komut dosyanızda Chrome'u kullanarak " http: //reload.extensions " a göz atmanız yeterlidir ve yenilenmiş bir Chrome pencereniz olur.

Güncelleme: 14 Ocak 2015 itibariyle uzantı açık kaynaklı ve GitHub'da mevcut .

Güncelleme : Artık bir uzantının kimliğini manuel olarak bulup düzenlemenize gerek kalmaması için bir seçenekler sayfası ekledim. CRX ve kaynak kodu şuradadır : https://github.com/Rob--W/Chrome-Extension-Reloader
Güncelleme 2: Eklenen kısayol (Github'daki veri havuzuma bakın). _{Temel işlevleri
içeren orijinal kod aşağıda gösterilmiştir .}

Bir uzantı oluşturun ve Tarayıcı Eylemi yönteminichrome.extension.management açılmış uzantınızı yeniden yüklemek için API kullanın.

Aşağıdaki kod, Chrome'a ​​bir uzantıyı tıkladığında yeniden yükleyecek bir düğme ekler.

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: Herhangi bir güzel 48x48 simgesini seçin, örneğin:

herhangi bir işlevde veya olayda

chrome.runtime.reload();

uzantınızı ( dokümanlar ) yeniden yükleyecek . Ayrıca , şunu ekleyerek manifest.json dosyasını değiştirmeniz gerekir :

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

Sıcak yeniden yükleme yaparken basit bir gömülebilir komut dosyası yaptım:

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

Bir uzantının dizinindeki dosya değişikliklerini izler. Bir değişiklik algılandığında, uzantıyı yeniden yükler ve etkin sekmeyi yeniler (güncellenmiş içerik komut dosyalarını yeniden tetiklemek için).

• Dosyaların zaman damgalarını kontrol ederek çalışır
• İç içe dizinleri destekler
• Üretim yapılandırmasında kendini otomatik olarak devre dışı bırakır

Başka bir çözüm, özel karaciğer yükü komut dosyası (extension-reload.js) oluşturmak olacaktır:

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

Bu komut dosyası websockets kullanarak livereload sunucusuna bağlanır. Ardından, livereload'dan yeniden yükleme mesajı üzerine bir chrome.runtime.reload () çağrısı yayınlar. Bir sonraki adım, manifest.json ve voila dosyalarınızda arka plan komut dosyası olarak çalıştırmak için bu komut dosyasını eklemek olacaktır!

Not: Bu benim çözümüm değil. Sadece gönderiyorum. Chrome Uzantısı oluşturucusunun oluşturulan kodunda buldum (Harika bir araç!). Bunu buraya gönderiyorum çünkü yardımcı olabilir.

Chrome Uzantılarının izin vermeyeceği bir izin sistemi vardır (SO'daki bazı kişiler sizinle aynı sorunu yaşıyordu ), bu nedenle "bu özelliği eklemelerini" istemek IMO'yu kullanmayacaktır. Chromium Uzantıları Google Grupları'ndan önerilen bir çözüm (teori) kullanan bir posta varchrome.extension.getViews() , ancak bunun da çalışması garanti edilmez.

manifest.jsonGibi bazı Chrome dahili sayfalarına eklemek chrome://extensions/mümkün olsaydı, Reloadçapayla etkileşime girecek bir eklenti oluşturmak mümkün olurdu ve XRefresh (bir Firefox Eklentisi gibi harici bir program kullanarak - Ruby ve WebSocket kullanan bir Chrome sürümü var ), ihtiyacınız olanı elde edersiniz:

XRefresh, seçilen klasörlerde dosya değişikliği nedeniyle mevcut web sayfasını yenileyecek bir tarayıcı eklentisidir. Bu, favori HTML / CSS düzenleyicinizle canlı sayfa düzenleme yapmanıza olanak tanır.

Bunu yapmak mümkün değil, ama aynı konsepti farklı bir şekilde kullanabileceğinizi düşünüyorum.

Bunun yerine üçüncü taraf çözümler bulmaya çalışabilirsiniz, bir dosyada değişiklikler gördükten sonra (emacs'ı ne Textmate'i bilmiyorum, ancak Emacs'ta bir uygulama çağrısını "dosya kaydet" işlemi içinde bağlamak mümkün olabilir) belirli bir uygulamanın belirli bir koordinatındaki tıklamalar: bu durumda Reload , geliştirme aşamasında uzantınızın çapasıdır (yalnızca bu yeniden yükleme için bir Chrome penceresini açık bırakırsınız).

(Cehennem kadar çılgın ama işe yarayabilir)

Değişiklikleri izlemek için dosyaları izlemek ve değişiklikler algılanırsa yeniden yüklemek için kullanabileceğiniz bir işlev. AJAX aracılığıyla yoklayarak ve window.location.reload () ile yeniden yükleyerek çalışır. Sanırım bunu bir dağıtım paketinde kullanmamalısın.

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

Belki partiye biraz geç kaldım, ama https://chrome.google.com/webstore/detail/chrome-unpacked-extension/fddfkmklefkhanofhlohnkemejcbamln oluşturarak benim için çözdüm

Websockets aracılığıyla olaylar chrome://extensionsgeldiğinde sayfayı yeniden file.changeyükleyerek çalışır.

Bir file.changeuzantı klasöründeki dosya değişiklikleri üzerine olayı nasıl yayınlayacağınıza dair Gulp tabanlı bir örnek burada bulunabilir: https://github.com/robin-drexler/chrome-extension-auto-reload-watcher

Neden uzantıları yeniden yüklemek / yeniden etkinleştirmek için uzantı yönetimi api'sini kullanmak yerine sekmenin tamamını yeniden yüklüyorsunuz? Şu anda uzantıları tekrar devre dışı bırakmak ve etkinleştirmek, herhangi bir açık inceleme penceresinin (konsol günlüğü vb.) Kapanmasına neden oluyor, bu da aktif geliştirme sırasında çok can sıkıcı buldum.

Web paketini kullanarak geliştiriyorsanız otomatik yeniden yükleme eklentisi vardır: https://github.com/rubenspgcavalcante/webpack-chrome-extension-reloader

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

plugins: [
    new ChromeExtensionReloader()
]

Ayrıca webpack.config.js dosyasını değiştirmek istemiyorsanız bir CLI aracıyla birlikte gelir:

npx wcer

Not: İhtiyacınız olmasa bile (boş) bir arka plan betiği gereklidir, çünkü kod yeniden yüklediği yer burasıdır.

Html ve manifest dosyaları gibi içerik dosyalarınız uzantı yüklenmeden değiştirilemez, ancak uzantı paketlenene kadar JavaScript dosyalarının dinamik olarak yüklendiğine inanıyorum.

Bunu biliyorum çünkü geçerli bir proje im Chrome Uzantıları API üzerinden üzerinde çalışıyor ve her zaman bir sayfayı yenilemek yüklemek gibi görünüyor.

Belki biraz geç cevap ama bence crxreload sizin için işe yarayabilir. Bu, geliştirirken tasarruflu bir yeniden yükleme iş akışına sahip olmaya çalışmamın sonucudur.

Yeniden yüklemek için bir kısayol kullanıyorum. Bir dosyayı kaydettiğimde her zaman yeniden yüklemek istemiyorum

Bu yüzden yaklaşımım hafif ve yeniden yükleme işlevini

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

Şimdi yeniden yüklemek için krom tarayıcıda Ctrl + M tuşlarına basın

npm initDizin kökünde bir package.json oluşturmak için kullanın , ardından

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

sonra bir gulpfile.js

hangi gibi görünüyor:

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

Bu CrossRider ile gelişmekte benim için çalışıyor, npm ve düğüm yüklü olduğu varsayılarak, dosyaları izlediğiniz yolu değiştirmek için izleyebilirsiniz.

Feragatname: Bu uzantıyı kendim geliştirdim.

Clerc - Chrome Canlı Uzantı Yeniden Yükleme İstemcisi için

Her kaydettiğinizde uzantınızı otomatik olarak yeniden yüklemek için LiveReload uyumlu bir sunucuya bağlanın.

Bonus: sizin açınızdan biraz daha fazla çalışmayla, uzantınızın değiştirdiği web sayfalarını da otomatik olarak yeniden yükleyebilirsiniz.

Çoğu web sayfası geliştiricisi, dosyalarını otomatik olarak oluşturan ve sunucularını yeniden başlatan ve web sitesini yeniden yükleyen bir tür izleyiciye sahip bir derleme sistemi kullanır.

Geliştirilen uzantıların bu kadar farklı olması gerekmez. Clerc, aynı otomasyonu Chrome geliştiricilerine getiriyor. LiveReload sunucusuyla bir derleme sistemi ayarlayın; Clerc, uzantınızı yenilemek için yeniden yükleme olaylarını dinler.

Tek büyük yaka, manifest.json'daki değişikliklerdir. Manifestteki herhangi bir küçük yazım hatası muhtemelen yeniden yükleme denemelerinin başarısız olmasına neden olur ve değişikliklerinizin tekrar yüklenmesini sağlamak için uzantınızı kaldırmaya / yeniden yüklemeye devam edersiniz.

Clerc, yeniden yüklendikten sonra tam yeniden yükleme iletisini uzantınıza iletir; böylece isteğe bağlı olarak sağlanan yenileme adımlarını tetiklemek için sağlanan iletiyi kullanabilirsiniz.

Mozilla büyük adamlar sadece yeni yayımlanan https://github.com/mozilla/web-ext lansman için kullanabileceğiweb-ext run --target chromium

@GmonC ve @Arik ve biraz boş zaman sayesinde, bu işe almak için yönetiyorum. Bu işi yapmak için iki dosyayı değiştirmek zorunda kaldım.

(1) Söz konusu uygulama için LiveReload ve Chrome Uzantısını yükleyin. Bu, dosya değişikliği ile ilgili bazı komut dosyaları çağırır.

(2) Açık <LiveReloadInstallDir>\Bundled\backend\res\livereload.js

(3) satırı #509olarak değiştir

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

(4) Şimdi Extensions Reloaderşuraya giderken tüm geliştirme uzantılarını yeniden yükleyen yararlı bağlantı işleyicisine sahip başka bir uzantı yükleyin"http://reload.extensions"

(5) Şimdi bu uzantıyı background.min.jsbu şekilde değiştirin

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

ile değiştirin

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

LiveReload uygulamasını açın, Extension Reloader düğmesini gizleyin ve araç çubuğundaki düğmesine tıklayarak LiveReload uzantısını etkinleştirin, artık LiveReload'daki diğer tüm özellikleri (css reload, image reload vb.) Kullanırken her dosya değişikliğinde sayfa ve uzantıları yeniden yükleyeceksiniz.

Bununla ilgili tek kötü şey, her uzantı güncellemesinde komut dosyası değiştirme prosedürünü tekrarlamanız gerekeceğidir. Güncellemelerden kaçınmak için, uzantıyı ambalajsız olarak ekleyin.

Bununla uğraşmak için daha fazla zamanım olduğunda, muhtemelen bu uzantıların her ikisine de ihtiyacı ortadan kaldıran bir uzantı oluşturacağım.

Sonra, benim uzantısı üzerinde çalışıyorum actim Projext Baltacı

Sadece yeni bir homurdanma bulundu bootstrapping, iskele, bazı otomatik ön işleme fakültesinin yanı sıra otomatik yeniden yükleme (etkileşim gerektirmez) sağlayan tabanlı bir proje .

Chrome Uzantınızı Websecurify'dan Önyükleyin

Bir Mac'iniz varsa, App en kolay yol Alfred App ile!

Powerpack ile Alfred Uygulamasını almanız yeterli , ardından aşağıdaki bağlantıda sağlanan iş akışını ekleyin ve istediğiniz kısayol tuşunu özelleştirin (⌘ + ⌥ + R kullanmak istiyorum). Bu kadar.

Şimdi, kısayol tuşunu her kullandığınızda, Google Chrome o anda hangi uygulamada olursanız olun yeniden yüklenir.

Başka bir tarayıcı kullanmak istiyorsanız Alfred Tercihler İş Akışları içinde AppleScript'i açın ve "Google Chrome" u yerine "Firefox", "Safari", ...

Ben de burada ne yaptığını görebilmeniz için ReloadChrome.alfredworkflow dosyasında kullanılan / usr / bin / osascript betiğinin içeriğini göstereceğim .

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

İş akışı dosyası ReloadChrome.alfredworkflow'dur .

Uzantılarımı bir gecede yeniden yüklemek (güncellemek) istiyorum, background.js'de kullandığım şey bu:

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

Saygılarımızla, Peter

Ben çatallı ettik LiveJS Ambalajlı Apps canlı doldurma için izin vermek. Dosyayı uygulamanıza eklemeniz yeterlidir ve her dosya kaydettiğinizde uygulama otomatik olarak yüklenir.

Dokümanlarda belirtildiği gibi: aşağıdaki komut satırı bir uygulamayı yeniden yükleyecek

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

bu yüzden sadece bir kabuk betiği oluşturdum ve o dosyayı yudumdan çağırdım. Süper basit:

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

komut dosyalarında gerekli izleme komutlarınızı çalıştırın ve istediğiniz zaman yeniden yükleme görevini çağırın. Temiz, basit.

AutoIt veya alternatifler gibi yazılımlar burada parlıyor. Anahtar, geçerli test aşamanızı taklit eden bir komut dosyası yazmaktır. Birçok teknoloji net iş akışı / test yolları ile birlikte gelmediği için bunlardan en az birini kullanmaya alışın.

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

Açıkçası, kodu test / yineleme gereksinimlerinize uyacak şekilde değiştirirsiniz. Sekme tıklamalarının bağlantı etiketinin chrome: // uzantıları sitesinde olduğu yerde doğru olduğundan emin olun. Pencere fare hareketlerine ve diğer makrolara göre de kullanabilirsiniz.

Vim'e betiği buna benzer bir şekilde eklerdim:

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

Bu, Vim'deyken, lider düğmesi olarak bilinen ENTER (genellikle sorumlu: | ve \) üzerindeki düğmeye basıp büyük bir 'A' ile takip ettiğimde test aşaması komut dosyamı kaydedip başlattığım anlamına gelir.

Lütfen yukarıdaki Vim / kısayol tuşu komut dosyasındaki {input ...} bölümlerini uygun şekilde doldurduğunuzdan emin olun.

Birçok editör, kısayol tuşlarıyla benzer bir şey yapmanıza izin verecektir.

AutoIt'e alternatifler burada bulunabilir .

Windows için: AutoHotkey

Linux için: xdotool, xbindkeys

Mac için: Automator

Öncelikle web-ext rundosyaları değiştirdikten sonra uzantıyı otomatik olarak yeniden yükleyen Firefox'ta geliştiriyorum . Ardından, hazır olduğunda, Firefox'ta görünmeyen herhangi bir sorun olmadığından emin olmak için Chrome'da son bir test turu yaparım.

Yine de öncelikle Chrome'da geliştirmek istiyorsanız ve herhangi bir 3. taraf uzantı yüklemek istemiyorsanız, başka bir seçenek test.htmluzantının klasöründe bir dosya oluşturmak ve buna bir grup SSCCE eklemektir . Bu dosya daha sonra <script>uzantı komut dosyasını enjekte etmek için normal bir etiket kullanır .

Bunu testin% 95'i için kullanabilir ve daha sonra canlı sitelerde test etmek istediğinizde uzantıyı manuel olarak yeniden yükleyebilirsiniz.

Bu, bir uzantının çalıştığı ortamı aynı şekilde çoğaltmaz, ancak birçok basit şey için yeterince iyidir.

Yazar, bu webpack eklentisinin bir sonraki sürümünü önerdi: https://github.com/rubenspgcavalcante/webpack-extension-reloader . Benim için çok iyi çalışıyor.

Evet, dolaylı olarak yapabilirsiniz! İşte benim çözümüm.

Manifest.json içinde

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

İnject.js içinde

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

Enjekte edilen komut dosyanız herhangi bir konumdan başka komut dosyası enjekte edebilir.

Bu tekniğin bir diğer yararı da sadece yalıtılmış dünyanın sınırlarını göz ardı edebilmenizdir . bkz içerik betik çalıştırma ortamı

TARAYICI-SYNC

Şaşırtıcı Browser-Sync'i kullanma

• kaynak kodu değiştiğinde (HTML, CSS, resimler vb.) tarayıcıları (herhangi bir zamanda) güncelleyin
• Windows, MacOS ve Linux'u destekleyin
• mobil cihazlarınızı kullanarak kod güncellemelerinizi (canlı) bile izleyebilirsiniz

MacOS'taki kurulum (diğer işletim sistemlerine yüklemek için yardımlarını görüntüleyin)

NVM'yi yükleyin, böylece herhangi bir Düğüm sürümünü deneyebilirsiniz

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

Statik siteler için tarayıcı senkronizasyonu nasıl kullanılır?

İki örneğe bakalım:

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

Bu --serverseçenek, terminalinizde bulunduğunuz her yerde yerel bir sunucu çalıştırmanıza ve --filesdeğişiklikler için hangi dosyaların izleneceğini belirtmenize izin verir. İzlenen dosyalar için daha spesifik olmayı tercih ediyorum, bu yüzden ikinci örnekte ackbelirli dosya uzantılarını listelemek için kullanıyorum (bu dosyaların boşluklu dosya adları olmaması önemlidir) ve ayrıcaipconfig MacOS'ta geçerli IP'imi bulmak için .

Dinamik siteler için tarayıcı senkronizasyonu nasıl kullanılır?

PHP, Rails vb. Kullanıyorsanız, zaten çalışan bir sunucunuz vardır, ancak kodunuzda değişiklik yaptığınızda otomatik olarak yenilenmez. Bu nedenle, --proxytarayıcı senkronizasyonunun o sunucunun ana bilgisayarının nerede olduğunu bilmesini sağlamak için anahtarı kullanmanız gerekir .

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

Yukarıdaki örnekte, tarayıcımda zaten çalışan bir Rails uygulamam var 192.168.33.12:3000. Gerçekten bir Vagrant kutusu kullanarak bir VM üzerinde çalışır, ancak sanal makineye o ana bilgisayardaki 3000 numaralı bağlantı noktasını kullanarak erişebilirim. Gibi --no-notifytarayıcısında beni her zaman bir bildirim uyarısı göndererek durdurma tarayıcı senkronizasyonu benim kodunu ve değiştirmek --no-opendurdurma tarayıcı eşitleme davranışına olduğunu hemen yükler bir tarayıcı sekmesi sunucu başlangıç.

ÖNEMLİ: Rails kullanıyorsanız, Turbolinkleri geliştirme sırasında kullanmaktan kaçının, aksi takdirde --proxyseçeneği kullanırken bağlantılarınızı tıklayamazsınız.

Umarım birisi için yararlı olur. Tarayıcıyı yenilemek için birçok numara denedim (hatta AlfredApp'ı kullanarak bu StackOverflow sorusunda gönderdiğim eski bir yazı bile), ama bu gerçekten gitmenin yolu; daha fazla kesmek yok, sadece akıyor.

KREDİ: Tek bir komutla yerel bir canlı yeniden yükleme web sunucusu başlatın

Doğrudan yapılamaz. Afedersiniz.

Bir özellik olarak görmek isterseniz, http://crbug.com/new adresinden talep edebilirsiniz.