Jak mogę automatycznie ponownie załadować rozwijane rozszerzenie Chrome?


263

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.


2
Wydaje się być szybszy, gdy przeładowanie jest uruchamiane z interfejsu użytkownika włączonego w chrome: // flags / # enable-apps-devtool-app
Eric

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.
Oz Ramos,

Gdzie jest twój widelec LiveJS, @Oz Ramos?
Josh

Ach, rozumiem: twój link „LiveJS” jest faktycznie połączony z twoim widelcem, a nie z LiveJS.
Josh

6
To nie odpowiada na zadane pytanie, ale chcę wspomnieć, że przestałem chcieć tego (lub innego rozszerzenia pomocnika ładującego rozszerzenie) po tym, jak zdałem sobie sprawę, że mogę łatwo ponownie załadować rozszerzenie, naciskając ctrl-R lub cmd-R ( w zależności od systemu operacyjnego) w oknie tła rozszerzenia. Uważam, że pasuje to do mojego przepływu pracy lepiej niż cokolwiek innego, co próbowałem, a także pozwala uniknąć problemu automatycznego ponownego ładowania, gdy pliki są niespójne.
Don Hatch

Odpowiedzi:


162

Możesz użyć Reloader rozszerzeń dla Chrome:

Przeładowuje wszystkie rozpakowane rozszerzenia za pomocą przycisku paska narzędzi rozszerzenia lub przeglądając stronę „ http: //reload.extensions

Jeśli kiedykolwiek opracowałeś rozszerzenie do Chrome, być może chciałbyś zautomatyzować proces ponownego ładowania rozpakowanego rozszerzenia bez konieczności przeglądania strony z rozszerzeniami.

„Extensions Reloader” pozwala przeładować wszystkie rozpakowane rozszerzenia na dwa sposoby:

1 - przycisk paska narzędzi rozszerzenia.

2 - Przejście do „ http: //reload.extensions ”.

Ikona paska narzędzi przeładuje rozpakowane rozszerzenia jednym kliknięciem.

„Przeładuj przez przeglądanie” ma na celu zautomatyzowanie procesu przeładowywania za pomocą skryptów „po kompilacji” - wystarczy dodać do skryptu przeglądanie do „ http: //reload.extensions ” za pomocą Chrome, a otrzymasz odświeżone okno Chrome.

Aktualizacja: od 14 stycznia 2015 r. Rozszerzenie jest otwarte i dostępne na GitHub .


3
Jest to jak dotąd najlepsze rozwiązanie, ale wciąż nie ułatwia aktualizacji rozszerzenia za każdym razem, gdy modyfikuję plik, którego używa, i właśnie tego szukałem.
Andriej Fiodorow

2
Dzięki. Chciałem wspomnieć, że korzystam z PhpStorm i dodałem przycisk paska narzędzi, który wywołuje chrome.exe z adresem URL „reload.extensions”. Ilekroć chcę przetestować kod, naciskam ten przycisk, a Chrome wyświetla wyskakujące okienko z zaktualizowanym dodatkiem.
Arik,

30
Woaw, właśnie udało mi się zmusić gruntjs do pracy z tą wtyczką, używając grunt-open do otwarcia, http://reload.extensionsgdy 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!
GabLeRoux,

1
@GabLeRoux Przybyłem tu tylko po to, aby sprawdzić, czy ktoś już to zrobił. To działa jak urok.
polkovnikov.ph

1
@AlexanderMills niestety nie byłem w stanie tego zrobić bez otwierania nowej karty za każdym razem. Jeśli znajdziesz lepsze rozwiązanie. Przynajmniej można ponownie załadować wtyczki za pomocą github.com/arikw/chrome-extensions-reloader
GabLeRoux

58

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.managementinterfejsem API, aby ponownie załadować rozpakowane rozszerzenie.

Poniższy kod dodaje przycisk do Chrome, który po kliknięciu przeładuje rozszerzenie.

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: Wybierz dowolną ładną ikonę 48 x 48, na przykład:
Google Chrome Google Chrome


1
@trusktr Odpowiedź Scotta przeładowuje tylko stronę w tle. Obie odpowiedzi można jednak łączyć (odpowiedź Scotts + rozszerzenie pomocnika), dzięki czemu rozszerzenie jest automatycznie ładowane ponownie po zmianie pliku rozszerzenia. Odradzam jednak tę praktykę, ponieważ devtools są zamykane po przeładowaniu rozszerzenia. Często majstruję przy testowym rozszerzeniu i często zapisuję moje zmiany, nawet jeśli składnia jest niepełna. Spowodowałoby to awarię mojego rozszerzenia, gdyby włączone było prawdziwe automatyczne ładowanie.
Rob W

@RobW Dobra uwaga. Często zapisuję w środku pisania kodu, więc kod na pewno zepsuje daną wtyczkę.
trusktr

1
@Sudarshan Sugerujesz użyć 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życiu managementinterfejsu API (po wyłączeniu nie ma szansy na ponowne włączenie rozszerzenia).
Rob W

40

w dowolnej funkcji lub wydarzeniu

chrome.runtime.reload();

przeładuje twoje rozszerzenie ( dokumenty ). Musisz także zmienić plik manifest.json , dodając:

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

dla mnie to rozwiązanie działało tylko wtedy, gdy napisałem chrome.runtime.reload () w skrypcie w pliku index.html, gdzie jest określony w pliku manifestu w następujący sposób: ** „tło”: {„strona”: „indeks. html ”, **. W moim pliku js content_script nie mogłem uzyskać dostępu do tej funkcji. Uważam, że dotyczy to resetonów bezpieczeństwa.
titusfx

Twój skrypt treści nie może komunikować się z interfejsami API Chrome. Aby to zadziałało, musisz użyć wiadomości
marcelocra,

kiedy dzwonisz chrome.runtime.reload(), co się właściwie dzieje? czy wiele stron / kart jest odświeżanych?
Alexander Mills

5
Zgaduję, że powinniśmy zadzwonić chrome.runtime.reload()ze skryptu w tle
Alexander Mills

Pracował dla mnie. Dzięki
MikeMurko,

39

Zrobił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).

  • Działa poprzez sprawdzanie znaczników czasu plików
  • Obsługuje zagnieżdżone katalogi
  • Automatycznie wyłącza się w konfiguracji produkcyjnej

3
Jeśli szukasz rozwiązania „o smaku przełknięcia”, to jest to.
ow3n

1
działało świetnie. Czy zastanawiałeś się nad stworzeniem pakietu npm?
pixelearth

@pixelearth tak, dlaczego nie. Hmm, ale jaki byłby wtedy przypadek użycia? Wchodzisz npm install crx-hotreloaddo 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ę.
Witalij Gordon,

1
@MilfordCubicle Sugeruję wyeksportowanie obiektu, który ma metodę, którą można wywołać w pliku background.js. Więc coś import reloader from 'hot-reload'w skrypcie reloader.check ()
pixelearth

3
Odpowiedź wymaga więcej głosów pozytywnych. Działa również w połączeniu z pakietem Webpack --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.
V. Rubinetti,

10

Innym rozwiązaniem byłoby utworzenie niestandardowego skryptu livereload (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();
    }
  }
};

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.


9

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.jsonniektórych wewnętrznych stron Chrome, takich jak chrome://extensions/, możliwe byłoby utworzenie wtyczki, która współdziałałaby z Reloadkotwicą, 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:

XRefresh to wtyczka do przeglądarki, która odświeży bieżącą stronę internetową ze względu na zmianę plików w wybranych folderach. Umożliwia to edycję strony na żywo za pomocą ulubionego edytora HTML / CSS.

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


7

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.

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

Można zrobić, dodaj: reloadOnChange (chrome.extension.getURL ('/ manifest.json'));
Scott

Próbowałem pastebin.com/mXbSPkeu , ale rozszerzenie nie jest aktualizowane (wpisy manifestu, skrypt treści, działanie przeglądarki) (Ubuntu 11.10, Chrome 18). Tylko zaktualizowany plik jest strona tła (zmiana console.logkomunikaty są wyświetlane).
Rob W

„obserwuj pliki pod kątem zmian i ładuj ponownie, jeśli zmiany zostaną wykryte”. Przez całe życie nie widzę, skąd miałby wiedzieć, że plik się zmienił? Pomóż mi zrozumieć, ponieważ brzmi niesamowicie!
JasonDavis,

oo Teraz widzę, że przechowuje kopię zawartości plików i porównuje wersję z pamięci podręcznej z wersją na żywo ajax .... sprytne!
JasonDavis,

6

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://extensionsstrony, kiedykolwiekfile.change zdarzenia przychodzą za pośrednictwem gniazd internetowych.

Przykład oparty na Gulp, jak emitować file.changezdarzenie po zmianie pliku w folderze rozszerzenia, można znaleźć tutaj: https://github.com/robin-drexler/chrome-extension-auto-reload-watcher

Po 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.


miły! Widzę, że masz PR dla nowej, ulepszonej funkcji reload ().
caesarsol

4

Jeśli tworzysz za pomocą webpacka, dostępna jest wtyczka automatycznego przeładowania: https://github.com/rubenspgcavalcante/webpack-chrome-extension-reloader

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

plugins: [
    new ChromeExtensionReloader()
]

Zawiera również narzędzie CLI, jeśli nie chcesz modyfikować pliku webpack.config.js:

npx wcer

Uwaga: wymagany jest (pusty) skrypt w tle, nawet jeśli go nie potrzebujesz, ponieważ tam właśnie wstrzykuje kod przeładowania.


Zarchiwizowane już :( wskazując na github.com/rubenspgcavalcante/webpack-extension-reloader, który działa w różnych przeglądarkach i wciąż jest w fazie rozwoju :)
con--

3

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ę.


Nie wiem, jakiej wersji używałeś, ale jako 16.0.912.63 m Chrome automatycznie ładuje ponownie wszystkie pliki. Z wyjątkiem manifestu.
Zequez

@Zequez: Pliki nie są dla mnie ponownie ładowane. :(
Randomblue,

Masz rację. Rozwijałem stronę Opcje, która wywołuje skrypty z dokumentu, a zatem przeładowuje je. Skrypty content_script nie są ponownie ładowane = /
Zequez 30.01.12

3

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.


3

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

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

Teraz naciśnij Ctrl + M w przeglądarce Chrome, aby przeładować


Możesz także użyć funkcji przeładowania w przeglądarceAction, aby przeładować po kliknięciu przycisku. stackoverflow.com/questions/30427908/…
powerd

Tak, możesz ładować chrome.runtime.reload () co każde. Używam: edytor> ctrl + s> alt + tab> ctrl + m. Po otwarciu konsoli background..js. Jest szybki, bez użycia myszy
Johan Hoeksma

2

Użyj, npm initaby utworzyć plik package.json w katalogu głównym katalogu, a następnie

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

następnie utwórz gulpfile.js

który wygląda jak:

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

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ł.


2

Zastrzeżenie: Sam opracowałem to rozszerzenie.

Clerc - dla klienta Chrome Live Extension Reloading

Połącz się z serwerem zgodnym z LiveReload, aby automatycznie przeładowywać swoje rozszerzenie za każdym razem, gdy zapisujesz.

Premia: przy odrobinie dodatkowej pracy z Twojej strony możesz także automatycznie ponownie załadować strony internetowe, które zmienia Twoje rozszerzenie.

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.



1

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ę #509na

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

(4) Teraz zainstaluj kolejne rozszerzenie, Extensions Reloaderktó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.jsw ten sposób

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

zamienić

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

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



1

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.

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

Plik przepływu pracy to ReloadChrome.alfredworkflow .


1

Chcę ponownie załadować (zaktualizować) moje rozszerzenia z dnia na dzień, tego używam w 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);

Pozdrawiam, Peter


0

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.


0

Jak wspomniano w dokumentacji: następujący wiersz polecenia przeładuje aplikację

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

więc właśnie utworzyłem skrypt powłoki i wywołałem ten plik z gulp. Super prosty:

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

uruchom niezbędne skrypty obserwacyjne na skryptach i wywołaj zadanie przeładowania, kiedy chcesz. Czysty, prosty.


0

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.

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

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:

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

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


0

Zajmuję się głównie tworzeniem Firefoksa, w którym web-ext runrozszerzenie 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.htmlpliku 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.



-1

Tak, możesz to zrobić pośrednio! Oto moje rozwiązanie.

W manifest.json

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

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

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


Nie działa dla mnie? Jeśli spróbuję script.src = 'foo.js', szuka adresu URL względem bieżącej witryny. Jeśli wypróbuję pełną ścieżkę, otrzymuję: Nie wolno ładować zasobu lokalnego: „file: ///../foo.js”
Jesse Aldridge

-2

BROWSER-SYNC

Korzystanie z niesamowitej synchronizacji przeglądarki

  • aktualizuj przeglądarki (dowolne), gdy zmienia się kod źródłowy (HTML, CSS, obrazy itp.)
  • obsługuje Windows, MacOS i Linux
  • możesz nawet oglądać aktualizacje kodu (na żywo) za pomocą urządzeń mobilnych

Instalacja na MacOS (zobacz pomoc dotyczącą instalacji na innym systemie operacyjnym)

Zainstaluj NVM, abyś mógł wypróbować dowolną wersję Węzła

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

Jak korzystać z synchronizacji przeglądarki w przypadku witryn statycznych

Zobaczmy dwa przykłady:

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

Ta --serveropcja umożliwia uruchomienie lokalnego serwera w dowolnym miejscu terminala i --filespozwala 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żywam ackdo 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ć --proxyprzełącznika, aby poinformować synchronizację przeglądarki, gdzie znajduje się host dla tego serwera.

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

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-notifyzatrzymać synchronizację przeglądarki, wysyłając mi powiadomienie w przeglądarce za każdym razem, gdy zmieniam kod, i --no-openzatrzymać 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 --proxyopcji.

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


-4

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


1
Można to zrobić, to nie jest poprawna odpowiedź. Wystarczy spojrzeć na inne odpowiedzi, a one ci to powiedzą.
ICanKindOfCode
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.