Bagaimana cara memuat ulang secara otomatis ekstensi Chrome yang saya kembangkan?


263

Saya ingin ekstensi chrome saya dimuat ulang setiap kali saya menyimpan file di folder ekstensi, tanpa harus mengklik "memuat ulang" secara eksplisit di chrome: // extensions /. Apakah ini mungkin?

Sunting: Saya sadar saya dapat memperbarui interval saat Chrome memuat ulang ekstensi, yang merupakan solusi setengah jalan, tapi saya lebih suka membuat editor saya (emacs atau textmate) memicu pemicu penyimpanan ulang atau meminta Chrome untuk memantau direktori untuk perubahan.


2
Tampaknya lebih cepat ketika memuat ulang dipicu dari ui diaktifkan di chrome: // flags / # enable-apps-devtool-app
Eric

Saya telah bercabang dengan LiveJS untuk memungkinkan pemuatan ulang langsung Aplikasi yang Dikemas. Cukup sertakan file di aplikasi Anda dan setiap kali Anda menyimpan file aplikasi akan memuat ulang secara otomatis.
Oz Ramos

Di mana garpu LiveJS Anda, @Oz Ramos?
Josh

Ah, saya mengerti: tautan "LiveJS" Anda sebenarnya terhubung ke garpu Anda, bukan ke LiveJS.
Josh

6
Ini tidak menjawab pertanyaan seperti yang ditanyakan, tetapi saya ingin menyebutkan bahwa saya berhenti menginginkan ini (atau ekstensi ekstensi-loading-helper lainnya) setelah saya menyadari saya dapat dengan mudah memuat ulang ekstensi dengan menekan ctrl-R atau cmd-R ( tergantung pada OS) di jendela latar ekstensi. Saya menemukan ini cocok dengan alur kerja saya lebih baik daripada apa pun yang saya coba, dan itu juga menghindari masalah auto-reload ketika file dalam keadaan tidak konsisten.
Don Hatch

Jawaban:


162

Anda dapat menggunakan " Extensions Reloader " untuk Chrome:

Muat ulang semua ekstensi yang belum dibongkar menggunakan tombol bilah alat ekstensi atau dengan menjelajahi " http: //reload.extensions "

Jika Anda pernah mengembangkan ekstensi Chrome, Anda mungkin ingin mengotomatiskan proses memuat ulang ekstensi yang sudah dibongkar tanpa perlu melalui halaman ekstensi.

"Extensions Reloader" memungkinkan Anda memuat ulang semua ekstensi yang belum dibuka menggunakan 2 cara:

1 - Tombol bilah alat ekstensi.

2 - Menjelajah ke " http: //reload.extensions ".

Ikon bilah alat akan memuat ulang ekstensi yang belum dibuka menggunakan satu klik.

"Reload by browsing" dimaksudkan untuk mengotomatiskan proses reload menggunakan skrip "post build" - cukup tambahkan browse ke " http: //reload.extensions " menggunakan Chrome ke skrip Anda, dan Anda akan memiliki jendela Chrome yang disegarkan.

Pembaruan: Pada 14 Januari 2015, ekstensi bersumber terbuka dan tersedia di GitHub .


3
Ini adalah solusi terbaik sejauh ini, tetapi masih tidak membuatnya mudah untuk memperbarui ekstensi setiap kali saya memodifikasi file yang digunakannya, yang merupakan apa yang saya cari idealnya.
Andrey Fedorov

2
Terima kasih. Ingin menyebutkan bahwa saya menggunakan PhpStorm dan saya menambahkan tombol bilah alat yang memanggil chrome.exe dengan url "reload.extensions". Setiap kali saya ingin menguji kode, saya menekan tombol itu dan Chrome muncul dengan addon yang diperbarui.
Arik

30
Woaw, saya baru saja berhasil membuat gruntjs bekerja dengan plugin ini dengan menggunakan grunt-open untuk membuka http://reload.extensionsketika file diubah. Sekarang bertindak persis seperti memuatkan hati, tetapi dengan membuka jendela krom membuka setiap kali saya memodifikasi salah satu file plugin yang ditentukan: P. Terima kasih!
GabLeRoux

1
@GabLeRoux Saya datang ke sini hanya untuk mencari tahu apakah seseorang sudah melakukannya. Itu bekerja seperti pesona.
polkovnikov.ph

1
@AlexanderMills sayangnya saya tidak bisa melakukannya tanpa membuka tab baru setiap kali. Jika Anda menemukan solusi yang lebih baik. Setidaknya, seseorang dapat memuat ulang plugin dengan github.com/arikw/chrome-extensions-reloader
GabLeRoux

58

Pembaruan : Saya telah menambahkan halaman opsi, sehingga Anda tidak perlu menemukan dan mengedit ID ekstensi secara manual lagi. CRX dan kode sumber ada di: https://github.com/Rob--W/Chrome-Extension-Reloader
Pembaruan 2: Menambahkan pintasan (lihat repositori saya di Github).
Kode asli, yang mencakup fungsi dasar ditunjukkan di bawah ini .


Buat ekstensi, dan gunakan metode Tindakan Browser bersama dengan chrome.extension.managementAPI untuk memuat ulang ekstensi Anda yang belum dibuka.

Kode di bawah menambahkan tombol ke Chrome, yang akan memuat ulang ekstensi saat diklik.

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: Pilih ikon 48x48 yang bagus, misalnya:
Google Chrome Google Chrome


1
@trusktr Jawaban Scott hanya memuat ulang halaman latar belakang. Namun, kedua jawaban dapat digabungkan (Scotts answer + ekstensi pembantu), sehingga ekstensi secara otomatis dimuat ulang ketika file ekstensi berubah. Namun saya merekomendasikan praktik ini, karena devtool ditutup setelah ekstensi dimuat kembali. Saya sering mengutak-atik ekstensi tes, dan sering menyimpan perubahan saya, bahkan ketika sintaksis tidak lengkap. Itu akan merusak ekstensi saya, jika pemuatan ulang otomatis yang sebenarnya diaktifkan.
Rob W

@RobW Poin bagus. Saya sering menyimpan di tengah penulisan kode sehingga kode pasti akan merusak plugin yang dimaksud.
trusktr

1
@Sudarshan Anda disarankan untuk digunakan chrome.i18n.getMessage("@@extension_id"). Namun, ini mengembalikan extensionID dari ekstensi saat ini , yang tidak berguna karena ekstensi tidak dapat memuat ulang dirinya sendiri menggunakan managementAPI (setelah menonaktifkan, itu tidak memiliki kesempatan untuk mengaktifkan ekstensi lagi).
Rob W

41

dalam fungsi atau acara apa pun

chrome.runtime.reload();

akan memuat ulang ekstensi Anda ( dokumen ). Anda juga perlu mengubah file manifest.json , menambahkan:

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

bagi saya solusi ini hanya berfungsi jika saya menulis chrome.runtime.reload () pada script di index.html di mana ditentukan dalam file manifes dengan cara sebagai berikut: ** "background": {"page": "index. html ", **. Dalam file js content_script saya, saya tidak dapat mengakses fungsi ini. Saya percaya, ini untuk reseons keamanan.
titusfx

Skrip konten Anda tidak dapat berbicara dengan API chrome. Agar berhasil, Anda perlu menggunakan pesan
marcelocra

ketika Anda menelepon chrome.runtime.reload(), apa yang sebenarnya terjadi? cara menyegarkan beberapa halaman / tab?
Alexander Mills

5
Saya kira kita harus menelepon chrome.runtime.reload()dari naskah latar belakang
Alexander Mills

Bekerja untukku. Terima kasih
MikeMurko

39

Saya telah membuat skrip embeddable sederhana melakukan hot reload:

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

Itu mengawasi perubahan file dalam direktori ekstensi. Ketika perubahan terdeteksi, itu memuat ulang ekstensi dan menyegarkan tab aktif (untuk memicu kembali skrip konten yang diperbarui).

  • Bekerja dengan memeriksa cap waktu file
  • Mendukung direktori bersarang
  • Secara otomatis menonaktifkan dirinya dalam konfigurasi produksi

3
Jika Anda mencari solusi "rasa citarasa", ini dia.
ow3n

1
bekerja dengan baik. Sudahkah Anda mempertimbangkan untuk membuat paket npm?
pixelearth

@ Pixelarth ya, mengapa tidak. Hmm, tapi apa gunanya nanti? Anda npm install crx-hotreloadke direktori ekstensi, dan kemudian referensi skrip seperti "scripts": ["./node_modules/crx-hotreload/hot-reload.js"]? Koreksi saya jika saya salah.
Vitaly Gordon

1
@MilfordCubicle Saya sarankan mengekspor objek yang memiliki metode yang dapat Anda panggil di file background.js Anda. Jadi sesuatu import reloader from 'hot-reload'di skrip reloader.check ()
pixelearth

3
Jawabannya perlu lebih banyak upvotes. Bekerja dengan baik dalam kombinasi dengan Webpack --watchjuga, karena Anda bisa meletakkannya di folder build Anda sehingga hanya diperbarui setelah proses build selesai. Tidak ada plugin perintah post-build Webpack yang rumit.
V. Rubinetti

10

Solusi lain adalah membuat skrip livereload khusus (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();
    }
  }
};

Skrip ini terhubung ke server memuat-hati menggunakan soket web. Kemudian, ia akan mengeluarkan panggilan chrome.runtime.reload () saat memuat ulang pesan dari livereload. Langkah selanjutnya adalah menambahkan skrip ini untuk dijalankan sebagai skrip latar belakang di manifest.json Anda, dan voila!

Catatan: ini bukan solusi saya. Saya hanya mempostingnya. Saya menemukannya di kode yang dihasilkan generator Chrome Extension (Great tool!). Saya memposting ini di sini karena mungkin membantu.


9

Ekstensi Chrome memiliki sistem izin yang tidak diizinkan (beberapa orang di SO memiliki masalah yang sama dengan Anda ), jadi meminta mereka untuk "menambahkan fitur ini" tidak akan berfungsi IMO. Ada email dari Chromium Extensions Google Groups dengan solusi yang diusulkan (teori) menggunakan chrome.extension.getViews(), tetapi tidak dijamin berfungsi baik.

Jika mungkin untuk menambahkan ke manifest.jsonbeberapa halaman internal Chrome seperti chrome://extensions/, itu akan mungkin untuk membuat plugin yang akan berinteraksi dengan Reloadjangkar, dan, menggunakan program eksternal seperti XRefresh (Plugin Firefox - ada versi Chrome menggunakan Ruby dan WebSocket ), Anda akan mencapai apa yang Anda butuhkan:

XRefresh adalah plugin browser yang akan menyegarkan halaman web saat ini karena perubahan file dalam folder yang dipilih. Ini memungkinkan untuk melakukan pengeditan halaman langsung dengan editor HTML / CSS favorit Anda.

Tidak mungkin melakukannya, tetapi saya pikir Anda dapat menggunakan konsep yang sama ini dengan cara yang berbeda.

Anda bisa mencoba mencari solusi pihak ketiga sebagai gantinya, setelah melihat modifikasi dalam file (saya tidak tahu emacs dan Textmate, tetapi di Emacs akan mungkin untuk mengikat panggilan aplikasi dalam tindakan "simpan file"), hanya klik pada koordinat spesifik aplikasi tertentu: dalam hal ini adalah Reloadjangkar dari ekstensi Anda dalam pengembangan (Anda membiarkan jendela Chrome terbuka hanya untuk memuat ulang ini).

(Gila sekali tapi mungkin berhasil)


7

Berikut adalah fungsi yang dapat Anda gunakan untuk menonton file untuk perubahan, dan memuat ulang jika perubahan terdeteksi. Ini bekerja dengan polling mereka melalui AJAX, dan memuat ulang via window.location.reload (). Saya kira Anda tidak boleh menggunakan ini dalam paket distribusi.

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

Dapat melakukannya, tambahkan: reloadOnChange (chrome.extension.getURL ('/ manifest.json'));
Scott

Saya sudah mencoba pastebin.com/mXbSPkeu , tetapi ekstensi tidak diperbarui (entri manifes, skrip konten, tindakan browser) (Ubuntu 11.10, Chrome 18). Satu- satunya file yang diperbarui adalah halaman latar belakang ( console.logpesan yang diubah memang muncul).
Rob W

"Perhatikan file untuk perubahan, dan muat ulang jika perubahan terdeteksi." Untuk kehidupan saya, saya tidak bisa melihat bagaimana ini akan tahu bahwa file telah berubah? Tolong bantu saya mengerti karena kedengarannya luar biasa!
JasonDavis

oo saya mengerti sekarang, ini menyimpan salinan konten file dan membandingkan versi cached dengan versi live ajax .... pintar!
JasonDavis

6

Mungkin saya sedikit terlambat ke pesta, tapi saya sudah menyelesaikannya dengan membuat https://chrome.google.com/webstore/detail/chrome-unpacked-extension/fddfkmklefkhanofhlohnkemejcbamln

Ini bekerja dengan memuat ulang chrome://extensionshalaman, setiap kali file.changeacara masuk melalui websockets.

Contoh berbasis Gulp tentang bagaimana memancarkan file.changeacara setelah perubahan file dalam folder ekstensi dapat ditemukan di sini: https://github.com/robin-drexler/chrome-extension-auto-reload-watcher

Mengapa memuat ulang seluruh tab alih-alih hanya menggunakan api manajemen ekstensi untuk memuat ulang / mengaktifkan kembali ekstensi? Saat ini menonaktifkan dan mengaktifkan ekstensi lagi menyebabkan jendela inspeksi terbuka (log konsol dll.) Ditutup, yang menurut saya terlalu mengganggu selama pengembangan aktif.


bagus! Saya melihat Anda memiliki PR untuk fungsi reload () yang baru ditingkatkan.
caesarsol

4

Ada plugin reload otomatis jika Anda mengembangkan menggunakan webpack: https://github.com/rubenspgcavalcante/webpack-chrome-extension-reloader

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

plugins: [
    new ChromeExtensionReloader()
]

Juga dilengkapi dengan alat CLI jika Anda tidak ingin mengubah webpack.config.js:

npx wcer

Catatan: skrip latar belakang (kosong) diperlukan bahkan jika Anda tidak memerlukannya karena di situlah ia menyuntikkan kode muat ulang.


Sudah diarsipkan :( menunjuk ke github.com/rubenspgcavalcante/webpack-extension-reloader yang merupakan peramban silang, dan masih dalam pengembangan aktif :)
con

3

File konten Anda memiliki html dan file manifes tidak dapat diubah tanpa pemasangan ekstensi, tetapi saya yakin bahwa file JavaScript dimuat secara dinamis hingga ekstensi tersebut dikemas.

Saya tahu ini karena saya sedang mengerjakan proyek saat ini melalui API Ekstensi Chrome, dan sepertinya memuat setiap kali saya me-refresh halaman.


Saya tidak tahu versi apa yang Anda gunakan, tetapi sejauh 16.0.912.63 m, Chrome memuat ulang semua file secara otomatis. Kecuali manifes.
Zequez

@Zequez: File-file itu tidak dimuat ulang untuk saya. :(
Randomblue

Kamu benar. Saya sedang mengembangkan halaman Opsi, yang memanggil skrip dari menyertai dokumen, dan karena itu memuat ulang mereka. Skrip content_script tidak dimuat ulang = /
Zequez

3

Mungkin jawaban agak terlambat tapi saya pikir crxreload mungkin bekerja untuk Anda. Ini adalah hasil dari mencoba memiliki alur kerja yang reload-on-save saat berkembang.


3

Saya menggunakan jalan pintas untuk memuat ulang. Saya tidak ingin memuat ulang setiap saat ketika saya menyimpan file

Jadi pendekatan saya ringan, dan Anda dapat membiarkan fungsi reload masuk

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

Sekarang tekan Ctrl + M di browser chrome untuk memuat ulang


Anda juga dapat menggunakan fungsi reload di browserAction sehingga reload pada klik tombol. stackoverflow.com/questions/30427908/…
powerd

Ya, Anda dapat memuat chrome.runtime.reload () di mana saja. Saya menggunakan: editor> ctrl + s> alt + tab> ctrl + m. Memiliki background..js konsol terbuka. Cepat, tanpa menggunakan mouse
Johan Hoeksma

2

Gunakan npm inituntuk membuat package.json di direktori root, lalu

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

lalu buat a gulpfile.js

yang terlihat seperti:

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

Ini berfungsi untuk saya kembangkan dengan CrossRider, Anda mungkin menonton untuk mengubah jalur Anda menonton file di, juga dengan asumsi Anda memiliki npm dan node diinstal.


2

Penafian: Saya mengembangkan ekstensi ini sendiri.

Clerc - untuk Klien Reload Ekstensi Chrome Live

Sambungkan ke server LiveReload yang kompatibel untuk secara otomatis memuat ulang ekstensi Anda setiap kali Anda simpan.

Bonus: dengan sedikit kerja ekstra di pihak Anda, Anda juga dapat secara otomatis memuat ulang laman web yang diubah ekstensi Anda.

Sebagian besar pengembang halaman web menggunakan sistem build dengan semacam pengamat yang secara otomatis membuat file mereka dan me-restart server mereka dan memuat ulang situs web.

Mengembangkan ekstensi tidak harus berbeda. Clerc membawa otomatisasi yang sama ini ke pengembang Chrome. Siapkan sistem pembangunan dengan server LiveReload, dan Clerc akan mendengarkan acara yang dimuat ulang untuk menyegarkan ekstensi Anda.

Satu-satunya gotcha besar adalah perubahan pada manifest.json. Kesalahan ketik kecil apa pun dalam manifes mungkin akan menyebabkan upaya pemuatan ulang lebih lanjut gagal, dan Anda akan buntu mencopot / menginstal ulang ekstensi Anda untuk membuat perubahan dimuat lagi.

Clerc meneruskan pesan isi ulang lengkap ke ekstensi Anda setelah dimuat ulang, jadi Anda dapat menggunakan pesan yang disediakan untuk memicu langkah-langkah penyegaran lebih lanjut.



1

Terima kasih kepada @GmonC dan @Arik dan beberapa waktu luang, saya mengatur agar ini berfungsi. Saya harus mengubah dua file untuk membuatnya berfungsi.

(1) Instal LiveReload dan Chrome Extension untuk aplikasi itu. Ini akan memanggil beberapa skrip pada perubahan file.

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

(3) ubah jalur #509ke

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

(4) Sekarang instal ekstensi lain Extensions Reloaderyang memiliki penangan tautan berguna yang memuat ulang semua ekstensi pengembangan saat bernavigasi"http://reload.extensions"

(5) Sekarang ubah ekstensi itu background.min.jsdengan cara ini

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

ubah dengan

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

Buka aplikasi LiveReload, sembunyikan tombol Extension Reloader dan aktifkan ekstensi LiveReload dengan mengklik tombol di toolbar, Anda sekarang akan memuat ulang halaman dan ekstensi pada setiap perubahan file sambil menggunakan semua barang lain dari LiveReload (css reload, reload gambar dll)

Satu-satunya hal buruk tentang ini adalah Anda harus mengulangi prosedur mengubah skrip pada setiap pembaruan ekstensi. Untuk menghindari pembaruan, tambahkan ekstensi sebagai dibongkar.

Ketika saya akan memiliki lebih banyak waktu untuk dipusingkan dengan ini, saya mungkin akan membuat ekstensi yang menghilangkan kebutuhan untuk kedua ekstensi ini.

Sampai saat itu, saya sedang mengerjakan ekstensi Projext Axeman saya



1

Jika Anda memiliki Mac, ¡cara termudah adalah dengan Aplikasi Alfred!

Dapatkan saja Aplikasi Alfred dengan Powerpack , lalu tambahkan alur kerja yang disediakan di tautan di bawah ini dan sesuaikan hotkey yang Anda inginkan (saya suka menggunakan ⌘ + ⌥ + R). Itu saja.

Sekarang, setiap kali Anda menggunakan hotkey, Google Chrome akan memuat ulang, apa pun aplikasi yang Anda gunakan saat itu.

Jika Anda ingin menggunakan browser lain, buka AppleScript di dalam Alur Kerja Preferensi Alfred dan ganti "Google Chrome" dengan "Firefox", "Safari", ...

Saya juga akan menunjukkan di sini isi skrip / usr / bin / osascript yang digunakan dalam file ReloadChrome.alfredworkflow sehingga Anda dapat melihat apa yang dilakukannya.

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

File alur kerja adalah ReloadChrome.alfredworkflow .


1

Saya ingin memuat ulang (memperbarui) ekstensi saya dalam semalam, inilah yang saya gunakan di background.js:

var d = new Date();
var n = d.getHours();
var untilnight = (n == 0) ? 24*3600000 : (24-n)*3600000; 
// refresh after 24 hours if hour = 0 else
// refresh after 24-n hours (that will always be somewhere between 0 and 1 AM)
setTimeout(function() {
    location.reload();
}, untilnight);

Salam, Peter


0

Saya telah bercabang dengan LiveJS untuk memungkinkan pemuatan ulang langsung Aplikasi yang Dikemas. Cukup sertakan file di aplikasi Anda dan setiap kali Anda menyimpan file aplikasi akan memuat ulang secara otomatis.


0

Seperti disebutkan dalam dokumen: baris perintah berikut akan memuat ulang aplikasi

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

jadi saya baru saja membuat skrip shell dan memanggil file itu dari tegukan. Sangat sederhana:

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

jalankan perintah arloji yang diperlukan pada skrip dan panggil tugas ulang saat Anda mau. Bersih, sederhana.


0

Di sinilah perangkat lunak seperti AutoIt atau alternatif bersinar. Kuncinya adalah menulis skrip yang mengemulasi fase pengujian Anda saat ini. Biasakan untuk menggunakan setidaknya satu dari mereka karena banyak teknologi tidak datang dengan alur kerja yang jelas / jalur pengujian.

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

Jelas Anda mengubah kode sesuai dengan kebutuhan pengujian / iterasi Anda. Pastikan klik tab sesuai dengan tempat tag jangkar berada di situs chrome: // extensions. Anda juga dapat menggunakan relatif terhadap pergerakan mouse jendela dan makro semacam itu.

Saya akan menambahkan skrip ke Vim dengan cara yang mirip dengan ini:

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

Ini berarti bahwa ketika saya berada di Vim saya menekan tombol di atas ENTER (biasanya bertanggung jawab untuk: | dan \) yang dikenal sebagai tombol pemimpin dan mengikutinya dengan huruf kapital 'A' dan menyimpan dan memulai skrip fase pengujian saya.

Pastikan untuk mengisi bagian {input ...} di skrip Vim / hotkey di atas dengan tepat.

Banyak editor akan memungkinkan Anda untuk melakukan sesuatu yang mirip dengan tombol cepat.

Alternatif untuk AutoIt dapat ditemukan di sini .

Untuk Windows: AutoHotkey

Untuk Linux: xdotool, xbindkeys

Untuk Mac: Automator


0

Saya terutama mengembangkan di Firefox, di mana web-ext runsecara otomatis memuat ulang ekstensi setelah file berubah. Kemudian setelah siap, saya melakukan putaran terakhir pengujian di Chrome untuk memastikan tidak ada masalah yang tidak muncul di Firefox.

Jika Anda ingin mengembangkan terutama di Chrome, dan tidak ingin menginstal ekstensi pihak ke-3, maka opsi lain adalah membuat test.htmlfile di folder ekstensi, dan menambahkan banyak SSCCE ke dalamnya. File itu kemudian menggunakan <script>tag normal untuk menyuntikkan skrip ekstensi.

Anda dapat menggunakannya untuk 95% pengujian, dan kemudian memuat ulang ekstensi secara manual saat Anda ingin mengujinya di situs langsung.

Itu tidak mereproduksi lingkungan tempat ekstensi berjalan secara identik, tetapi itu cukup baik untuk banyak hal sederhana.



-1

Ya, Anda bisa melakukannya secara tidak langsung! Ini solusinya.

Dalam manifes. Json

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

Di inject.js

(function() {
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.async = true;
    script.src = 'Your_Scripts';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(script, s);
})();

Skrip Anda yang disuntikkan dapat menyuntikkan skrip lain dari lokasi manapun.

Manfaat lain dari teknik ini adalah Anda bisa mengabaikan batasan dunia yang terisolasi . lihat lingkungan eksekusi skrip konten


Tidak bekerja untukku? Jika saya mencoba script.src = 'foo.js', ia mencari URL relatif ke situs web saat ini. Jika saya mencoba jalur lengkap yang saya dapatkan: Tidak diizinkan memuat sumber daya lokal: 'file: ///../foo.js'
Jesse Aldridge

-2

BROWSER-SYNC

Menggunakan Browser-Sync yang luar biasa

  • perbarui browser (apa saja) ketika kode sumber berubah (HTML, CSS, gambar, dll.)
  • mendukung Windows, MacOS dan Linux
  • Anda bahkan dapat menonton pembaruan kode Anda (langsung) menggunakan perangkat seluler Anda

Instalasi pada MacOS (lihat bantuan mereka untuk menginstal pada OS lain)

Instal NVM, sehingga Anda dapat mencoba versi Node apa pun

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

Cara menggunakan sinkronisasi browser untuk situs statis

Mari kita lihat dua contoh:

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

The --serverpilihan memungkinkan Anda untuk menjalankan mana saja server lokal Anda berada di terminal Anda dan --filesmembiarkan Anda menentukan file mana yang akan dilacak untuk perubahan. Saya lebih suka lebih spesifik untuk file yang dilacak, jadi pada contoh kedua saya gunakan ackuntuk mendaftar ekstensi file spesifik (penting agar file-file tersebut tidak memiliki nama file dengan spasi) dan juga digunakan ipconfiguntuk menemukan IP saya saat ini di MacOS.

Cara menggunakan sinkronisasi browser untuk situs dinamis

Jika Anda menggunakan PHP, Rails, dll., Anda sudah memiliki server yang berjalan, tetapi itu tidak menyegarkan secara otomatis ketika Anda membuat perubahan pada kode Anda. Jadi, Anda perlu menggunakan --proxysakelar untuk membiarkan sinkronisasi browser mengetahui di mana host untuk server itu.

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

Pada contoh di atas, saya sudah mengaktifkan aplikasi Rails di browser saya 192.168.33.12:3000. Ini benar-benar berjalan pada VM menggunakan kotak Vagrant, tapi saya bisa mengakses mesin virtual menggunakan port 3000 pada host itu. Saya suka --no-notifymenghentikan sinkronisasi browser mengirimi saya pemberitahuan notifikasi pada browser setiap kali saya mengubah kode saya dan --no-openuntuk menghentikan perilaku sinkronisasi browser yang segera memuat tab browser ketika server mulai.

PENTING: Jika Anda menggunakan Rails, hindari menggunakan Turbolinks saat pengembangan, jika tidak, Anda tidak akan dapat mengklik tautan Anda saat menggunakan --proxyopsi.

Semoga bermanfaat bagi seseorang. Saya sudah mencoba banyak trik untuk menyegarkan browser (bahkan posting lama yang saya kirimkan pada pertanyaan StackOverflow ini menggunakan AlfredApp waktu lalu), tetapi ini benar-benar cara untuk pergi; tidak ada lagi peretasan, itu hanya mengalir.

KREDIT: Mulai server web live reload lokal dengan satu perintah


-4

Itu tidak bisa dilakukan secara langsung. Maaf.

Jika Anda ingin melihatnya sebagai fitur, Anda dapat memintanya di http://crbug.com/new


1
Itu bisa dilakukan, ini bukan jawaban yang tepat. Lihat jawaban lain dan mereka akan memberi tahu Anda.
ICanKindOfCode
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.