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.
javascript
google-chrome
google-chrome-extension
Andrey Fedorov
sumber
sumber
Jawaban:
Anda dapat menggunakan " Extensions Reloader " untuk Chrome:
Pembaruan: Pada 14 Januari 2015, ekstensi bersumber terbuka dan tersedia di GitHub .
sumber
http://reload.extensions
ketika 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!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.management
API untuk memuat ulang ekstensi Anda yang belum dibuka.Kode di bawah menambahkan tombol ke Chrome, yang akan memuat ulang ekstensi saat diklik.
manifest.json
bg.js
icon48.png
: Pilih ikon 48x48 yang bagus, misalnya:sumber
chrome.i18n.getMessage("@@extension_id")
. Namun, ini mengembalikan extensionID dari ekstensi saat ini , yang tidak berguna karena ekstensi tidak dapat memuat ulang dirinya sendiri menggunakanmanagement
API (setelah menonaktifkan, itu tidak memiliki kesempatan untuk mengaktifkan ekstensi lagi).dalam fungsi atau acara apa pun
akan memuat ulang ekstensi Anda ( dokumen ). Anda juga perlu mengubah file manifest.json , menambahkan:
sumber
chrome.runtime.reload()
, apa yang sebenarnya terjadi? cara menyegarkan beberapa halaman / tab?chrome.runtime.reload()
dari naskah latar belakangSaya 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).
sumber
npm install crx-hotreload
ke direktori ekstensi, dan kemudian referensi skrip seperti"scripts": ["./node_modules/crx-hotreload/hot-reload.js"]
? Koreksi saya jika saya salah.import reloader from 'hot-reload'
di skrip reloader.check ()--watch
juga, karena Anda bisa meletakkannya di folder build Anda sehingga hanya diperbarui setelah proses build selesai. Tidak ada plugin perintah post-build Webpack yang rumit.Solusi lain adalah membuat skrip livereload khusus (extension-reload.js):
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.
sumber
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.json
beberapa halaman internal Chrome sepertichrome://extensions/
, itu akan mungkin untuk membuat plugin yang akan berinteraksi denganReload
jangkar, dan, menggunakan program eksternal seperti XRefresh (Plugin Firefox - ada versi Chrome menggunakan Ruby dan WebSocket ), Anda akan mencapai apa yang Anda butuhkan: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
Reload
jangkar dari ekstensi Anda dalam pengembangan (Anda membiarkan jendela Chrome terbuka hanya untuk memuat ulang ini).(Gila sekali tapi mungkin berhasil)
sumber
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.
sumber
console.log
pesan yang diubah memang muncul).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://extensions
halaman, setiap kalifile.change
acara masuk melalui websockets.Contoh berbasis Gulp tentang bagaimana memancarkan
file.change
acara setelah perubahan file dalam folder ekstensi dapat ditemukan di sini: https://github.com/robin-drexler/chrome-extension-auto-reload-watcherMengapa 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.
sumber
Ada plugin reload otomatis jika Anda mengembangkan menggunakan webpack: https://github.com/rubenspgcavalcante/webpack-chrome-extension-reloader
Juga dilengkapi dengan alat CLI jika Anda tidak ingin mengubah webpack.config.js:
Catatan: skrip latar belakang (kosong) diperlukan bahkan jika Anda tidak memerlukannya karena di situlah ia menyuntikkan kode muat ulang.
sumber
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.
sumber
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.
sumber
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
src / bg / background.js
Sekarang tekan Ctrl + M di browser chrome untuk memuat ulang
sumber
Gunakan
npm init
untuk membuat package.json di direktori root, lalunpm install --save-dev gulp-open && npm install -g gulp
lalu buat a
gulpfile.js
yang terlihat seperti:
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.
sumber
Penafian: Saya mengembangkan ekstensi ini sendiri.
Clerc - untuk Klien Reload Ekstensi Chrome Live
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.
sumber
Orang-orang hebat di mozilla baru saja merilis https://github.com/mozilla/web-ext baru yang dapat Anda gunakan untuk meluncurkan
web-ext run --target chromium
sumber
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
#509
kethis.window.location.href = "http://reload.extensions";
(4) Sekarang instal ekstensi lain
Extensions Reloader
yang memiliki penangan tautan berguna yang memuat ulang semua ekstensi pengembangan saat bernavigasi"http://reload.extensions"
(5) Sekarang ubah ekstensi itu
background.min.js
dengan cara iniif((d.installType=="development")&&(d.enabled==true)&&(d.name!="Extensions Reloader"))
ubah dengan
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
sumber
Baru saja menemukan proyek berbasis kasar yang baru yang menyediakan bootstrap, perancah, beberapa fakultas pra-pemrosesan otomatis, serta auto-reload (tidak diperlukan interaksi).
Bootstrap Ekstensi Chrome Anda dari Websecurify
sumber
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.
File alur kerja adalah ReloadChrome.alfredworkflow .
sumber
Saya ingin memuat ulang (memperbarui) ekstensi saya dalam semalam, inilah yang saya gunakan di background.js:
Salam, Peter
sumber
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.
sumber
Seperti disebutkan dalam dokumen: baris perintah berikut akan memuat ulang aplikasi
jadi saya baru saja membuat skrip shell dan memanggil file itu dari tegukan. Sangat sederhana:
jalankan perintah arloji yang diperlukan pada skrip dan panggil tugas ulang saat Anda mau. Bersih, sederhana.
sumber
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.
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:
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
sumber
Saya terutama mengembangkan di Firefox, di mana
web-ext run
secara 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.html
file 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.
sumber
Penulis merekomendasikan versi berikutnya dari plugin webpack itu: https://github.com/rubenspgcavalcante/webpack-extension-reloader . Ini bekerja sangat baik untuk saya.
sumber
Ya, Anda bisa melakukannya secara tidak langsung! Ini solusinya.
Dalam manifes. Json
Di inject.js
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
sumber
BROWSER-SYNC
Menggunakan Browser-Sync yang luar biasa
Instalasi pada MacOS (lihat bantuan mereka untuk menginstal pada OS lain)
Instal NVM, sehingga Anda dapat mencoba versi Node apa pun
Cara menggunakan sinkronisasi browser untuk situs statis
Mari kita lihat dua contoh:
The
--server
pilihan memungkinkan Anda untuk menjalankan mana saja server lokal Anda berada di terminal Anda dan--files
membiarkan Anda menentukan file mana yang akan dilacak untuk perubahan. Saya lebih suka lebih spesifik untuk file yang dilacak, jadi pada contoh kedua saya gunakanack
untuk mendaftar ekstensi file spesifik (penting agar file-file tersebut tidak memiliki nama file dengan spasi) dan juga digunakanipconfig
untuk 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
--proxy
sakelar untuk membiarkan sinkronisasi browser mengetahui di mana host untuk server itu.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-notify
menghentikan sinkronisasi browser mengirimi saya pemberitahuan notifikasi pada browser setiap kali saya mengubah kode saya dan--no-open
untuk 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
--proxy
opsi.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
sumber
Itu tidak bisa dilakukan secara langsung. Maaf.
Jika Anda ingin melihatnya sebagai fitur, Anda dapat memintanya di http://crbug.com/new
sumber