Я бы хотел, чтобы расширение chrome обновлялось каждый раз, когда я сохраняю файл в папке расширения, без необходимости явно указывать "перезагружать" в chrome://extensions/. Возможно ли это?
Изменить: я знаю, что я могу обновить интервал, при котором Chrome перезагружает расширения, что является решением на полпути, d вместо того, чтобы заставить мой редактор (emacs или textmate) активировать перезагрузку или просить Chrome отслеживать каталог изменений.
Вы можете использовать "Extensions Reloader" для Chrome:
Перезагружает все распакованные расширения с помощью кнопки панели инструментов расширения или просматривая страницу http://reload.extensions
Если вы когда-либо разрабатывали расширение Chrome, возможно, вам захотелось автоматизировать процесс перезагрузки вашего распакованного расширения без необходимо пройти страницу расширений.
"Extensions Reloader" позволяет перезагружать все распакованные расширения используя два способа:
1 - Кнопка панели инструментов расширения.
2 - Просмотр на "http://reload.extensions".
Значок панели инструментов перезагружает распакованные расширения одним нажатием.
"Перезагрузка при просмотре" предназначена для автоматизации процесса перезагрузки используя скрипты post post - просто добавьте "http://reload.extensions" используя Chrome для вашего script, и вы будете имеют обновленное окно Chrome.
Обновление:. По состоянию на 14 января 2015 года расширение доступно с открытым исходным кодом и доступно на GitHub.
Обновление: я добавил страницу параметров, чтобы вам больше не приходилось вручную искать и редактировать идентификатор расширения. CRX и исходный код находятся по адресу: https://github.com/Rob--W/Chrome-Extension-Reloader
Обновление 2: добавлен ярлык (см. мой репозиторий на Github).
Оригинальный код, который включает в себя основные функции, показан ниже.
Создайте расширение и используйте метод Browser Action в сочетании с chrome.extension.management API для перезагрузки распакованного расширения.
Приведенный ниже код добавляет кнопку в Chrome, которая перезагрузит расширение при нажатии.
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.jsvar 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: выберите любой красивый значок 48x48, например:
в любой функции или событии
chrome.runtime.reload();
перезагрузит ваше расширение (документы). Вам также нужно изменить файл manifest.json, добавив:
...
"permissions": [ "management" , ...]
...
Я сделал простой встраиваемый script выполнение горячей перезагрузки:
https://github.com/xpl/crx-hotreload
Он отслеживает изменения файлов в каталоге расширений. Когда обнаружено изменение, он перезагружает расширение и обновляет активную вкладку (для повторного запуска обновленных сценариев содержимого).
Другим решением могло бы стать создание пользовательской функции загрузки script (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();
}
}
};
Этот script подключается к серверу загрузки с помощью websockets. Затем он выдает запрос chrome.runtime.reload() при перезагрузке сообщения из папки "загрузка". Следующим шагом было бы добавить этот script для запуска в качестве фона script в вашем manifest.json и voila!
Примечание: это не мое решение. Я просто отправляю его. Я нашел его в сгенерированном коде Генератор расширений Chrome (Отличный инструмент!). Я размещаю это здесь, потому что это может помочь.
У Chrome Extensions есть система разрешений, которая не позволит это (некоторые люди в SO имел ту же проблему, что и вы), поэтому запрос "добавить эту функцию" не будет работать с IMO. Там есть почта из Chromium Extensions Google Groups с предлагаемое решение (теория) с использованием chrome.extension.getViews(), но также не гарантируется работа.
Если бы можно было добавить к manifest.json некоторые внутренние страницы Chrome, такие как chrome://extensions/, было бы возможно создать плагин, который будет взаимодействовать с якорем Reload, и, используя внешнюю программу, такую как XRefresh (плагин Firefox - там версия Chrome используя Ruby и WebSocket), вы достигнете именно того, что вам нужно:
XRefresh - это плагин для браузера, который обновит текущую веб-страницу из-за изменение файла в выбранных папках. Эта позволяет сделать живую страницу редактирование с помощью вашего любимого HTML/CSS редактор.
Это невозможно сделать, но я думаю, что вы можете использовать эту же концепцию по-другому.
Вместо этого вы можете найти сторонние решения, после просмотра изменений в файле (я не знаю emacs, ни Textmate, но в Emacs можно было бы связать вызов приложения в действии "сохранить файл" ), просто нажимает определенную координату конкретного приложения: в этом случае привязка Reload от вашего расширения в разработке (вы оставляете окна Chrome открытыми только для этой перезагрузки).
(Сумасшедший, но это может сработать)
Здесь функция, которую вы можете использовать для просмотра файлов для изменений, и перезагружайте, если обнаружены изменения. Он работает, опросив их через AJAX и перезагружая через window.location.reload(). Я полагаю, вы не должны использовать это в дистрибутиве.
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'));
Может быть, я немного опоздал на вечеринку, но я решил это для меня, создав https://chrome.google.com/webstore/detail/chrome-unpacked-extension/fddfkmklefkhanofhlohnkemejcbamln
Он работает путем перезагрузки страницы chrome://extensions всякий раз, когда события file.change поступают через веб-сокеты.
На основе Gulp пример того, как file.change событие file.change при изменении файла в папке расширений, можно найти здесь: https://github.com/robin-drexler/chrome-extension-auto-reload-watcher
Зачем перезагружать всю вкладку вместо того, чтобы просто использовать API управления расширениями для перезагрузки/повторного включения расширений? В настоящее время отключение и включение расширений снова приводит к закрытию любого открытого окна проверки (журнал консоли и т.д.), Что, по моему мнению, слишком раздражает во время активной разработки.
Файлы вашего контента, такие как html и файлы манифеста, не изменяются без установки расширения, но я верю, что файлы JavaScript динамически загружаются до тех пор, пока расширение не будет упаковано.
Я знаю это из-за текущего проекта im, работающего с помощью API расширений Chrome, и, кажется, каждый раз загружает страницу.
Может быть, немного поздно ответить, но я думаю, crxreload может сработать для вас. Это мой результат попыток создать рабочий процесс перезагрузки при сохранении.
Существует плагин автоматической перезагрузки, если вы разрабатываете с помощью веб-пакета: https://github.com/rubenspgcavalcante/webpack-chrome-extension-reloader
const ChromeExtensionReloader = require('webpack-chrome-extension-reloader');
plugins: [
new ChromeExtensionReloader()
]
Также поставляется с инструментом CLI, если вы не хотите изменять webpack.config.js:
npx wcer
Примечание: (пустой) фоновый скрипт необходим, даже если он вам не нужен, потому что он вставляет код перезагрузки.
Используйте npm init для создания package.json в корне каталога, затем
npm install --save-dev gulp-open && npm install -g gulp
затем создайте gulpfile.js
который выглядит следующим образом:
/* 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"}));
});
Это работает для меня с помощью CrossRider, вы можете наблюдать за изменением пути, по которому вы смотрите файлы, а также при условии, что у вас установлены npm и node.
Отказ от ответственности: я сам разработал это расширение.
Подключитесь к серверу, совместимому с LiveReload, для автоматической перезагрузки расширения при каждом сохранении.
Бонус: с небольшой дополнительной работой с вашей стороны вы также можете автоматически перезагружать веб-страницы, которые изменяет ваше расширение.
Большинство разработчиков веб-страниц используют систему сборки с каким-то наблюдателем, который автоматически создает свои файлы и перезагружает свой сервер и перезагружает веб-сайт.
Разработка расширений не должна быть такой разной. Clerc предоставляет такую же автоматизацию для разработчиков Chrome. Настройте систему сборки с сервером LiveReload, и Clerc будет прослушивать события перезагрузки, чтобы обновить расширение.
Единственная большая ошибка - это изменения в manifest.json. Любые крошечные опечатки в манифесте, вероятно, вызовут дальнейшие попытки перезагрузки, и вы будете вынуждены удалить/переустановить расширение, чтобы снова загрузить ваши изменения.
Clerc перенаправляет полное сообщение перезагрузки на ваше расширение после перезагрузки, поэтому вы можете дополнительно использовать предоставленное сообщение для запуска последующих шагов обновления.
Я использую ярлык для перезагрузки. Я не хочу перезагружать все время, когда я сохраняю файл
Так что мой подход легкий, и вы можете оставить функцию перезагрузки в
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();
}
})
Теперь нажмите Ctrl + M в браузере Chrome, чтобы перезагрузить
Только что нашел новый проект grunt, который обеспечивает загрузку, строительные леса, некоторую автоматическую предварительную обработку, а также автоматическую перезагрузку (без взаимодействия).
Bootstrap Расширение Chrome из Websecurify
Если у вас есть Mac, ¡самый простой способ - с помощью приложения Alfred!
Просто получите приложение Alfred с Powerpack, затем добавьте рабочий процесс, указанный в ссылке ниже, и настройте горячую клавишу, которую вы хотите (мне нравится использовать ⌘ + ⌥ + R). Это все.
Теперь, каждый раз, когда вы используете горячую клавишу, Google Chrome перезагружается, независимо от того, какое приложение вы находитесь в данный момент.
Если вы хотите использовать другой браузер, откройте AppleScript внутри рабочих процессов Alfred Preferences и замените "Google Chrome" на "Firefox", "Safari",...
Я также покажу здесь содержимое /usr/bin/osascript script, которое используется в файле ReloadChrome.alfredworkflow, чтобы вы могли видеть, что он делает.
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
Файл рабочего процесса ReloadChrome.alfredworkflow.
Я хочу перезагрузить (обновить) свои расширения за одну ночь, это то, что я использую в 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);
С уважением, Питер
Благодаря @GmonC и @Arik и некоторому свободному времени я занимаюсь этим. Мне пришлось изменить два файла, чтобы сделать эту работу.
(1) Установите LiveReload и расширение Chrome для этого приложения. Это вызовет некоторое script при смене файла.
(2) Откройте <LiveReloadInstallDir>\Bundled\backend\res\livereload.js
(3) измените строку #509 на
this.window.location.href = "http://reload.extensions";
(4) Теперь установите еще одно расширение Extensions Reloader, у которого есть полезный обработчик ссылок, который перезагружает все расширения разработки при навигации по "http://reload.extensions"
(5) Теперь измените это расширение background.min.js таким образом
if((d.installType=="development")&&(d.enabled==true)&&(d.name!="Extensions Reloader"))
заменить
if((d.installType=="development")&&(d.enabled==true)&&(d.name!="Extensions Reloader")&&(d.name!="LiveReload"))
Откройте приложение LiveReload, скройте кнопку Extension Reloader и активируйте расширение LiveReload, нажав кнопку на панели инструментов, теперь вы перезагружаете страницы и расширения при каждом изменении файла, используя все остальные лайки из LiveReload (перезагрузка css, перезагрузка изображения и т.д.)
Только плохая вещь в том, что вам придется повторить процедуру изменения сценариев при каждом обновлении расширения. Чтобы избежать обновлений, добавьте расширение как распакованное.
Когда у меня будет больше времени, чтобы объединиться с этим, я, вероятно, создам расширение, которое устраняет необходимость в обоих этих расширениях.
До тех пор я работаю над расширением Projext Axeman
Я расколол LiveJS, чтобы разрешить живую перезагрузку Упакованных приложений. Просто включите файл в свое приложение и каждый раз, когда вы сохраняете файл, приложение будет загружать автозагрузку.
Как упоминалось в документах: следующая командная строка перезагрузит приложение
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --load-and-launch-app=[path to the app ]
поэтому я только что создал оболочку script и вызвал этот файл из gulp. Супер простой:
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);
}
);});
запустите необходимые команды просмотра на скриптах и вызовите задачу перезагрузки, когда захотите. Чистый, простой.
Здесь используется программное обеспечение, такое как AutoIt или альтернативы. Ключ записывает script, который эмулирует текущую фазу тестирования. Привыкайте к использованию хотя бы одного из них, так как многие технологии не имеют четких путей документооборота/тестирования.
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("^`")
Очевидно, вы меняете код в соответствии с потребностями тестирования/итерации. Убедитесь, что щелчки на вкладке верны, где тег привязки находится на сайте chrome://extensions. Вы также можете использовать относительно движений мыши и других таких макросов.
Я бы добавил script в Vim способом, подобным этому:
map <leader>A :w<CR>:!{input autoit loader exe here} "{input script location here}"<CR>
Это означает, что когда я нахожусь в Vim, я нажимаю кнопку выше ENTER (обычно отвечающую за: | и \), известную как кнопка лидера, и следую за ней с помощью капитала "A", и она сохраняет и начинает мою фазу тестирования script.
Обязательно заполните соответствующие разделы {input...} в приведенной выше Vim/hotkey script.
Многие редакторы позволят вам сделать что-то подобное с помощью горячих клавиш.
Альтернативы AutoIt можно найти здесь.
Для Windows: AutoHotkey
Для Linux: xdotool, xbindkeys
Для Mac: Automator
Я в основном разрабатываю для Firefox, где web-ext run автоматически перезагружает расширение после изменения файлов. Затем, когда все будет готово, я проведу последний этап тестирования в Chrome, чтобы убедиться, что в Firefox нет проблем.
Однако если вы хотите разрабатывать в основном в Chrome и не хотите устанавливать какие-либо сторонние расширения, тогда другой вариант - создать файл test.html в папке расширений и добавить в него несколько SSCCE. Затем этот файл использует обычный <script> для добавления <script> расширения.
Вы можете использовать это для 95% тестирования, а затем вручную перезагрузить расширение, если вы хотите протестировать его на живых сайтах.
Это не идентично воспроизводит среду, в которой работает расширение, но достаточно для многих простых вещей.
Автор рекомендовал следующую версию этого плагина для веб-пакетов: https://github.com/rubenspgcavalcante/webpack-extension-reloader. Это работает очень хорошо для меня.
Да, вы можете сделать это косвенно! Вот мое решение.
В 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);
})();
Введенный script может вставлять другие script из любого места.
Еще одно преимущество этой техники заключается в том, что вы можете просто игнорировать ограничение изолированного мира. см. контент script среда выполнения
БРАУЗЕР-SYNC
Используя удивительную Browser-Sync
Установка на MacOS (см. Их помощь для установки на другие ОС)
Установите NVM, чтобы вы могли попробовать любую версию Node
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
Как использовать браузер-синхронизацию для статических сайтов
Давайте посмотрим на два примера:
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
Опция --server позволяет вам запускать локальный сервер в любом месте вашего терминала, а --files позволяет вам указать, какие файлы будут отслеживаться на предмет изменений. Я предпочитаю быть более конкретным для отслеживаемых файлов, поэтому во втором примере я использую ack для перечисления конкретных расширений файлов (важно, чтобы у этих файлов не было имен файлов с пробелами), а также использую ipconfig чтобы найти мой текущий IP-адрес в MacOS.
Как использовать браузер-синхронизацию для динамических сайтов
Если вы используете PHP, Rails и т.д., У вас уже есть работающий сервер, но он не обновляется автоматически, когда вы вносите изменения в свой код. Поэтому вам нужно использовать переключатель --proxy чтобы синхронизировать браузер, где находится хост для этого сервера.
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
В приведенном выше примере у меня уже есть приложение Rails, запущенное в моем браузере 192.168.33.12:3000. Он действительно работает на виртуальной машине с использованием Vagrant, но я мог получить доступ к виртуальной машине через порт 3000 на этом хосте. Мне нравится --no-notify чтобы остановить синхронизацию браузера, отправляя мне уведомление о предупреждении в браузере каждый раз, когда я изменяю свой код, и --no-open чтобы остановить поведение синхронизации браузера, которое немедленно загружает вкладку браузера при запуске сервера.
ВАЖНО: на всякий случай, если вы используете Rails, избегайте использования Turbolinks при разработке, иначе вы не сможете нажимать на ссылки при использовании опции --proxy.
Надеюсь, это будет кому-то полезно. Я перепробовал много хитростей, чтобы обновить браузер (даже старый пост, который я отправил по этому вопросу StackOverflow, используя AlfredApp некоторое время назад), но это действительно верный путь; нет больше хаков, это просто течет.
КРЕДИТ: Запустите локальный веб-сервер перезагрузки с помощью одной команды
Это невозможно сделать напрямую. К сожалению.
Если вы хотите увидеть его как функцию, вы можете запросить его на http://crbug.com/new