Chciałbym, aby moje rozszerzenie chrome przeładowywało się za każdym razem, gdy zapisuję plik w folderze rozszerzenia, bez konieczności jawnego klikania „przeładuj” w chrome: // extensions /. czy to możliwe?
Edycja: Zdaję sobie sprawę, że mogę zaktualizować odstęp czasu, w którym Chrome ponownie ładuje rozszerzenia, co jest rozwiązaniem w połowie drogi, ale wolę, aby mój edytor (emacs lub textmate) uruchomił się przy zapisaniu przeładowania lub poprosił Chrome o monitorowanie katalog zmian.
javascript
google-chrome
google-chrome-extension
Andriej Fiodorow
źródło
źródło
Odpowiedzi:
Możesz użyć „ Reloader rozszerzeń ” dla Chrome:
Aktualizacja: od 14 stycznia 2015 r. Rozszerzenie jest otwarte i dostępne na GitHub .
źródło
http://reload.extensions
gdy plik zostanie zmodyfikowany. Działa teraz dokładnie tak samo jak livereload, ale z anonimowym chromowanym oknem otwierającym się za każdym razem, gdy modyfikuję jeden z określonych plików wtyczek: P. Dzięki!Aktualizacja : dodałem stronę opcji, dzięki czemu nie musisz już ręcznie znajdować i edytować identyfikatora rozszerzenia. CRX i kod źródłowy znajdują się na stronie : https://github.com/Rob--W/Chrome-Extension-Reloader
Aktualizacja 2: Dodano skrót (patrz moje repozytorium na Github).
Oryginalny kod, który obejmuje podstawową funkcjonalność, pokazano poniżej .
Utwórz rozszerzenie i użyj metody Działanie przeglądarki w połączeniu z
chrome.extension.management
interfejsem API, aby ponownie załadować rozpakowane rozszerzenie.Poniższy kod dodaje przycisk do Chrome, który po kliknięciu przeładuje rozszerzenie.
manifest.json
bg.js
icon48.png
: Wybierz dowolną ładną ikonę 48 x 48, na przykład:źródło
chrome.i18n.getMessage("@@extension_id")
. Zwraca to jednak identyfikator rozszerzenia bieżącego rozszerzenia, co nie jest przydatne, ponieważ rozszerzenie nie może się ponownie załadować przy użyciumanagement
interfejsu API (po wyłączeniu nie ma szansy na ponowne włączenie rozszerzenia).w dowolnej funkcji lub wydarzeniu
przeładuje twoje rozszerzenie ( dokumenty ). Musisz także zmienić plik manifest.json , dodając:
źródło
chrome.runtime.reload()
, co się właściwie dzieje? czy wiele stron / kart jest odświeżanych?chrome.runtime.reload()
ze skryptu w tleZrobiłem prosty skrypt do osadzenia, wykonując gorący przeładowanie:
https://github.com/xpl/crx-hotreload
Sprawdza zmiany plików w katalogu rozszerzenia. Po wykryciu zmiany ponownie ładuje rozszerzenie i odświeża aktywną kartę (aby ponownie uruchomić zaktualizowane skrypty zawartości).
źródło
npm install crx-hotreload
do katalogu rozszerzenia, a następnie odwołujesz się do skryptu jak"scripts": ["./node_modules/crx-hotreload/hot-reload.js"]
? Popraw mnie, jeśli się mylę.import reloader from 'hot-reload'
w skrypcie reloader.check ()--watch
, ponieważ można go po prostu umieścić w folderze kompilacji, aby był aktualizowany dopiero po zakończeniu procesu kompilacji. Brak skomplikowanych wtyczek poleceń po kompilacji Webpack.Innym rozwiązaniem byłoby utworzenie niestandardowego skryptu livereload (extension-reload.js):
Ten skrypt łączy się z serwerem Livereload za pomocą gniazd sieciowych. Następnie wyda wywołanie chrome.runtime.reload () po ponownym załadowaniu wiadomości z livereload. Następnym krokiem byłoby dodanie tego skryptu, aby działał jako skrypt w tle w pliku manifest.json i voila!
Uwaga: to nie jest moje rozwiązanie. Po prostu to publikuję. Znalazłem go w wygenerowanym kodzie generatora rozszerzeń Chrome (świetne narzędzie!). Zamieszczam to tutaj, ponieważ może to pomóc.
źródło
Rozszerzenia Chrome mają system uprawnień, który na to nie pozwala (niektóre osoby w SO miały taki sam problem jak ty ), więc poproszenie ich o „dodanie tej funkcji” nie zadziała w IMO. Jest wiadomość od Grup dyskusyjnych Google Extensions z rozszerzeniem Chromium proponowanego rozwiązania (Teoria) przy użyciu
chrome.extension.getViews()
, ale nie są gwarantowane do pracy albo.Gdyby można było dodać do
manifest.json
niektórych wewnętrznych stron Chrome, takich jakchrome://extensions/
, możliwe byłoby utworzenie wtyczki, która współdziałałaby zReload
kotwicą, a przy użyciu zewnętrznego programu, takiego jak XRefresh (wtyczka Firefox - istnieje wersja Chrome korzystająca z Ruby i WebSocket ), osiągnąłbyś dokładnie to, czego potrzebujesz:Nie można tego zrobić, ale myślę, że możesz użyć tej samej koncepcji w inny sposób.
Zamiast tego możesz spróbować znaleźć rozwiązania innych firm, które po obejrzeniu modyfikacji w pliku (nie wiem, czy emacs ani Textmate, ale w Emacsie można było powiązać wywołanie aplikacji w ramach akcji „zapisz plik”), po prostu klika określoną współrzędną określonej aplikacji: w tym przypadku jest to
Reload
kotwica z twojego rozszerzenia w fazie rozwoju (pozostawiasz otwarte okna Chrome tylko dla tego przeładowania).(Szalony jak diabli, ale może działać)
źródło
Oto funkcja, której można użyć do oglądania plików pod kątem zmian i ponownego ładowania w przypadku wykrycia zmian. Działa poprzez odpytywanie ich za pomocą AJAX i ponowne ładowanie za pomocą window.location.reload (). Podejrzewam, że nie powinieneś używać tego w pakiecie dystrybucyjnym.
źródło
console.log
komunikaty są wyświetlane).Być może jestem trochę spóźniony na imprezę, ale rozwiązałem go, tworząc https://chrome.google.com/webstore/detail/chrome-unpacked-extension/fddfkmklefkhanofhlohnkemejcbamln
Działa poprzez przeładowanie
chrome://extensions
strony, kiedykolwiekfile.change
zdarzenia przychodzą za pośrednictwem gniazd internetowych.Przykład oparty na Gulp, jak emitować
file.change
zdarzenie po zmianie pliku w folderze rozszerzenia, można znaleźć tutaj: https://github.com/robin-drexler/chrome-extension-auto-reload-watcherPo co przeładowywać całą kartę zamiast używać interfejsu zarządzania rozszerzeniami do przeładowywania / ponownego włączania rozszerzeń? Obecnie wyłączenie i włączenie rozszerzeń ponownie powoduje zamknięcie dowolnego otwartego okna inspekcji (dziennika konsoli itp.), Co okazało się zbyt denerwujące podczas aktywnego programowania.
źródło
Jeśli tworzysz za pomocą webpacka, dostępna jest wtyczka automatycznego przeładowania: https://github.com/rubenspgcavalcante/webpack-chrome-extension-reloader
Zawiera również narzędzie CLI, jeśli nie chcesz modyfikować pliku webpack.config.js:
Uwaga: wymagany jest (pusty) skrypt w tle, nawet jeśli go nie potrzebujesz, ponieważ tam właśnie wstrzykuje kod przeładowania.
źródło
Pliki zawartości, takie jak HTML i pliki manifestu, nie są zmieniane bez instalacji rozszerzenia, ale uważam, że pliki JavaScript są ładowane dynamicznie, dopóki rozszerzenie nie zostanie spakowane.
Wiem o tym, ponieważ pracuję nad bieżącym projektem za pośrednictwem interfejsu API rozszerzeń Chrome i wydaje się, że ładuje się za każdym razem, gdy odświeżam stronę.
źródło
Może nieco spóźniona odpowiedź, ale myślę, że crxreload może dla ciebie działać. To mój wynik z próby przeładowania przy zapisywaniu podczas pracy.
źródło
Używam skrótu, aby przeładować. Nie chcę przeładowywać cały czas, kiedy zapisuję plik
Więc moje podejście jest lekkie i możesz zostawić funkcję przeładowania w
manifest.json
src / bg / background.js
Teraz naciśnij Ctrl + M w przeglądarce Chrome, aby przeładować
źródło
Użyj,
npm init
aby utworzyć plik package.json w katalogu głównym katalogu, a następnienpm install --save-dev gulp-open && npm install -g gulp
następnie utwórz
gulpfile.js
który wygląda jak:
Działa to dla mnie, rozwijając się z CrossRider, możesz obserwować, aby zmienić ścieżkę, w której oglądasz pliki, zakładając również, że masz zainstalowaną npm i węzeł.
źródło
Zastrzeżenie: Sam opracowałem to rozszerzenie.
Clerc - dla klienta Chrome Live Extension Reloading
Większość programistów stron internetowych korzysta z systemu kompilacji z pewnego rodzaju obserwatorem, który automatycznie buduje swoje pliki i restartuje serwer oraz ponownie ładuje stronę.
Opracowywanie rozszerzeń nie powinno być tak różne. Clerc wprowadza tę samą automatyzację do twórców Chrome. Skonfiguruj system kompilacji z serwerem LiveReload, a Clerc będzie nasłuchiwał zdarzeń przeładowania w celu odświeżenia rozszerzenia.
Jedyną dużą gotcha są zmiany w pliku manifest.json. Wszelkie drobne literówki w manifeście prawdopodobnie spowodują, że dalsze próby przeładowania nie powiodą się, i utkniesz przy odinstalowywaniu / ponownym instalowaniu rozszerzenia, aby ponownie załadować zmiany.
Clerc przekazuje kompletną wiadomość przeładowania do twojego rozszerzenia po przeładowaniu, więc możesz opcjonalnie użyć dostarczonej wiadomości, aby uruchomić kolejne kroki odświeżania.
źródło
Wielcy faceci z Mozilli właśnie wydali nowy https://github.com/mozilla/web-ext , którego możesz użyć do uruchomienia
web-ext run --target chromium
źródło
Dzięki @GmonC i @Arik oraz trochę wolnego czasu udaje mi się to uruchomić. Musiałem zmienić dwa pliki, aby to zadziałało.
(1) Zainstaluj LiveReload i rozszerzenie Chrome dla tej aplikacji. To wywoła jakiś skrypt przy zmianie pliku.
(2) Otwórz
<LiveReloadInstallDir>\Bundled\backend\res\livereload.js
(3) zmień linię
#509
nathis.window.location.href = "http://reload.extensions";
(4) Teraz zainstaluj kolejne rozszerzenie,
Extensions Reloader
które ma przydatną funkcję obsługi linków, która przeładowuje wszystkie rozszerzenia programistyczne podczas nawigacji do"http://reload.extensions"
(5) Teraz zmień to rozszerzenie
background.min.js
w ten sposóbif((d.installType=="development")&&(d.enabled==true)&&(d.name!="Extensions Reloader"))
zamienić
Otwórz aplikację LiveReload, ukryj przycisk Extension Reloader i aktywuj rozszerzenie LiveReload, klikając przycisk na pasku narzędzi, teraz będziesz ponownie ładować stronę i rozszerzenia przy każdej zmianie pliku, używając wszystkich innych korzyści z LiveReload (przeładowanie css, przeładowanie obrazu itp.)
Jedyną złą rzeczą w tym jest to, że będziesz musiał powtarzać procedurę zmiany skryptów przy każdej aktualizacji rozszerzenia. Aby uniknąć aktualizacji, dodaj rozszerzenie jako rozpakowane.
Kiedy będę miał więcej czasu, aby się z tym pogubić, prawdopodobnie utworzę rozszerzenie, które wyeliminuje potrzebę korzystania z obu tych rozszerzeń.
Do tego czasu pracuję nad moim rozszerzeniem Projext Axeman
źródło
Właśnie znalazłem nowiutki chrząknięcie projekt oparty który zapewnia ładującego, rusztowania, trochę zautomatyzowanego przetwarzania wstępnego wydziału, a także automatycznego przeładowywania (bez interakcji potrzebne).
Uruchom rozszerzenie przeglądarki Chrome z Websecurify
źródło
Jeśli masz komputer Mac, ¡najprostszym sposobem jest aplikacja Alfred!
Wystarczy pobrać aplikację Alfred z Powerpack , a następnie dodać przepływ pracy podany w poniższym linku i dostosować skrót klawiszowy, który chcesz (lubię używać ⌘ + ⌥ + R). To wszystko.
Teraz, za każdym razem, gdy używasz skrótu, Google Chrome będzie się ładować ponownie, bez względu na to, jaką aplikację aktualnie używasz.
Jeśli chcesz użyć innej przeglądarki, otwórz AppleScript w przepływach pracy Preferencji Alfreda i zamień „Google Chrome” na „Firefox”, „Safari”, ...
Pokażę tutaj również zawartość skryptu / usr / bin / osascript używanego w pliku ReloadChrome.alfredworkflow , abyś mógł zobaczyć, co robi.
Plik przepływu pracy to ReloadChrome.alfredworkflow .
źródło
Chcę ponownie załadować (zaktualizować) moje rozszerzenia z dnia na dzień, tego używam w background.js:
Pozdrawiam, Peter
źródło
Mam rozwidlony LiveJS aby umożliwić żywo przeładunku aplikacje w pakiecie. Wystarczy dołączyć plik do swojej aplikacji i za każdym razem, gdy zapiszesz plik, aplikacja automatycznie się załaduje.
źródło
Jak wspomniano w dokumentacji: następujący wiersz polecenia przeładuje aplikację
więc właśnie utworzyłem skrypt powłoki i wywołałem ten plik z gulp. Super prosty:
uruchom niezbędne skrypty obserwacyjne na skryptach i wywołaj zadanie przeładowania, kiedy chcesz. Czysty, prosty.
źródło
To tutaj świecą oprogramowanie takie jak AutoIt lub alternatywy. Kluczem jest napisanie skryptu, który emuluje bieżącą fazę testowania. Przyzwyczaj się do korzystania z co najmniej jednej z nich, ponieważ wiele technologii nie ma przejrzystych ścieżek przepływu pracy / testów.
Oczywiście zmieniasz kod, aby dopasować go do swoich potrzeb związanych z testowaniem / iteracją. Upewnij się, że kliknięcia karty są zgodne z miejscem, w którym znajduje się tag kotwicy w witrynie rozszerzeń chrome: //. Możesz także użyć względem ruchów myszy w oknie i innych takich makr.
Dodałbym skrypt do Vima w podobny sposób:
Oznacza to, że kiedy jestem w Vimie, naciskam przycisk powyżej ENTER (zwykle odpowiedzialny za: | i \) znany jako przycisk lidera i podążam za nim z dużą literą „A”, co zapisuje i rozpoczyna skrypt fazy testowania.
Pamiętaj, aby odpowiednio wypełnić sekcje {input ...} w powyższym skrypcie Vima / skrótu.
Wiele edytorów pozwoli ci zrobić coś podobnego z klawiszami skrótu.
Alternatywy dla AutoIt można znaleźć tutaj .
W systemie Windows: AutoHotkey
W systemie Linux: xdotool, xbindkeys
W systemie Mac: Automator
źródło
Zajmuję się głównie tworzeniem Firefoksa, w którym
web-ext run
rozszerzenie jest automatycznie ponownie ładowane po zmianie plików. Następnie, gdy będzie gotowy, przeprowadzam ostatnią rundę testów w Chrome, aby upewnić się, że nie ma żadnych problemów, które nie pojawiły się w przeglądarce Firefox.Jeśli jednak chcesz rozwijać się przede wszystkim w Chrome i nie chcesz instalować żadnych rozszerzeń innych firm, kolejną opcją jest utworzenie
test.html
pliku w folderze rozszerzenia i dodanie do niego kilku SSCCE . Plik ten następnie używa normalnego<script>
znacznika do wstrzyknięcia skryptu rozszerzenia.Możesz użyć tego do 95% testów, a następnie ręcznie przeładować rozszerzenie, gdy chcesz przetestować je na aktywnych stronach.
To nie odtwarza środowiska, w którym działa rozszerzenie, ale wystarcza na wiele prostych rzeczy.
źródło
Autor zalecił następną wersję wtyczki webpack: https://github.com/rubenspgcavalcante/webpack-extension-reloader . Działa dla mnie bardzo dobrze.
źródło
Tak, możesz to zrobić pośrednio! Oto moje rozwiązanie.
W manifest.json
Inject.js
Wstrzyknięty skrypt może wstrzyknąć inny skrypt z dowolnej lokalizacji.
Kolejną korzyścią z tej techniki jest to, że możesz po prostu zignorować ograniczenia odizolowanego świata . zobacz środowisko wykonywania skryptu treści
źródło
BROWSER-SYNC
Korzystanie z niesamowitej synchronizacji przeglądarki
Instalacja na MacOS (zobacz pomoc dotyczącą instalacji na innym systemie operacyjnym)
Zainstaluj NVM, abyś mógł wypróbować dowolną wersję Węzła
Jak korzystać z synchronizacji przeglądarki w przypadku witryn statycznych
Zobaczmy dwa przykłady:
Ta
--server
opcja umożliwia uruchomienie lokalnego serwera w dowolnym miejscu terminala i--files
pozwala określić, które pliki będą śledzone pod kątem zmian. Wolę być bardziej szczegółowy dla śledzonych plików, więc w drugim przykładzie używamack
do wyświetlania określonych rozszerzeń plików (ważne jest, aby te pliki nie miały nazw plików ze spacjami), a także używamipconfig
do znajdowania mojego bieżącego adresu IP na MacOS.Jak korzystać z synchronizacji przeglądarki w przypadku witryn dynamicznych
Jeśli używasz PHP, Railsów itp., Masz już uruchomiony serwer, ale nie zmienia się on automatycznie po wprowadzeniu zmian w kodzie. Musisz więc użyć
--proxy
przełącznika, aby poinformować synchronizację przeglądarki, gdzie znajduje się host dla tego serwera.W powyższym przykładzie mam już aplikację Railsową uruchomioną w mojej przeglądarce
192.168.33.12:3000
. To naprawdę działa na maszynie wirtualnej za pomocą Vagrant box, ale mogłem uzyskać dostęp do maszyny wirtualnej za pomocą portu 3000 na tym hoście. Lubię--no-notify
zatrzymać synchronizację przeglądarki, wysyłając mi powiadomienie w przeglądarce za każdym razem, gdy zmieniam kod, i--no-open
zatrzymać zachowanie synchronizacji przeglądarki, które natychmiast ładuje kartę przeglądarki po uruchomieniu serwera.WAŻNE: na wszelki wypadek, gdy używasz Railsów, unikaj używania Turbolinks przy programowaniu, w przeciwnym razie nie będziesz mógł kliknąć swoich linków podczas korzystania z tej
--proxy
opcji.Mam nadzieję, że komuś się przyda. Próbowałem wiele sztuczek, aby odświeżyć przeglądarkę (nawet stary post, który przesłałem na to pytanie StackOverflow przy użyciu AlfredApp dawno temu), ale tak naprawdę jest to właściwy sposób; nigdy więcej hacków, po prostu płynie.
KREDYT: Uruchom lokalny serwer sieciowy do przeładowania za pomocą jednego polecenia
źródło
Nie można tego zrobić bezpośrednio. Przepraszam.
Jeśli chcesz zobaczyć to jako funkcję, możesz poprosić o to na stronie http://crbug.com/new
źródło