Как автоматически перезагрузить расширение Chrome, которое я разрабатываю?

Я бы хотел, чтобы мое расширение chrome перезагружалось каждый раз, когда я сохраняю файл в папке расширения, без необходимости явно нажимать «перезагрузить» в chrome: // extensions /. Это возможно?

Редактировать: я знаю, что могу обновить интервал, с которым Chrome перезагружает расширения, что является промежуточным решением, но я бы предпочел либо заставить мой редактор (emacs или textmate) запускать при сохранении перезагрузку, либо просить Chrome отслеживать каталог для изменений.

Вы можете использовать « Расширение Reloader » для Chrome:

Перезагружает все распакованные расширения, используя кнопку на панели инструментов расширения или перейдя по ссылке « http: //reload.extensions »

Если вы когда-либо разрабатывали расширение для Chrome, возможно, вы хотели автоматизировать процесс перезагрузки распакованного расширения без необходимости просматривать страницу расширений.

«Relosions Reloader» позволяет перезагрузить все распакованные расширения двумя способами:

1 - кнопка на панели инструментов расширения.

2 - Просмотр " адресу http: //reload.extensions ».

Значок панели инструментов перезагрузит распакованные расширения одним щелчком мыши.

«Перезагрузка путем просмотра» предназначена для автоматизации процесса перезагрузки с использованием сценариев «после сборки» - просто добавьте обзор к « http: //reload.extensions » с использованием Chrome в свой сценарий, и у вас будет обновленное окно Chrome.

Обновление: по состоянию на 14 января 2015 года расширение является открытым исходным кодом и доступно на GitHub .

Обновление : я добавил страницу параметров, чтобы вам больше не приходилось вручную искать и редактировать идентификатор расширения. CRX и исходный код находятся по адресу: https://github.com/Rob--W/Chrome-Extension-Reloader
Обновление 2: добавлен ярлык (см. Мой репозиторий на Github).
_{Оригинальный код, который включает в себя основные функции , показан ниже .}

Создайте расширение и используйте метод действия браузера вместе с chrome.extension.managementAPI для перезагрузки распакованного расширения.

Код ниже добавляет кнопку в 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.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Выберите любой красивый значок 48x48, например:

в любой функции или событии

chrome.runtime.reload();

перезагрузит ваше расширение ( документы ). Вам также нужно изменить файл manifest.json , добавив:

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

Я сделал простой встраиваемый скрипт, выполняющий горячую перезагрузку:

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

Он отслеживает изменения файлов в каталоге расширения. Когда изменение обнаружено, оно перезагружает расширение и обновляет активную вкладку (чтобы повторно запустить обновленные сценарии содержимого).

• Работает, проверяя временные метки файлов
• Поддерживает вложенные каталоги
• Автоматически отключает себя в производственной конфигурации

Другим решением было бы создать собственный скрипт 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();
    }
  }
};

Этот скрипт подключается к серверу livereload с помощью веб-сокетов. Затем он выдаст вызов chrome.runtime.reload () после перезагрузки сообщения из livereload. Следующим шагом будет добавление этого сценария для запуска в качестве фонового сценария в ваш manifest.json и вуаля!

Примечание: это не мое решение. Я просто публикую это. Я нашел его в сгенерированном коде генератора расширений Chrome (отличный инструмент!). Я публикую это здесь, потому что это может помочь.

У расширений Chrome есть система разрешений , которая не позволяет (некоторые люди в 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событие при изменении файла в папке расширения, можно найти здесь: https://github.com/robin-drexler/chrome-extension-auto-reload-watcher

Зачем перезагружать всю вкладку, а не просто использовать API управления расширениями для перезагрузки / повторного включения расширений? В настоящее время отключение и включение расширений снова приводит к закрытию любого открытого окна проверки (журнал консоли и т. Д.), Что, по моему мнению, слишком раздражает во время активной разработки.

Существует плагин автоматической перезагрузки, если вы разрабатываете с помощью веб-пакета: https://github.com/rubenspgcavalcante/webpack-chrome-extension-reloader

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

plugins: [
    new ChromeExtensionReloader()
]

Также поставляется с инструментом CLI, если вы не хотите изменять webpack.config.js:

npx wcer

Примечание: (пустой) фоновый скрипт необходим, даже если он вам не нужен, потому что именно здесь он вводит код перезагрузки.

Ваши файлы содержимого, такие как html и файлы манифеста, не могут быть изменены без установки расширения, но я уверен, что файлы JavaScript загружаются динамически, пока расширение не будет упаковано.

Я знаю это из-за текущего проекта, над которым я работаю через Chrome Extensions API, и, кажется, загружается каждый раз, когда я обновляю страницу.

Возможно, немного запоздалый ответ, но я думаю, что crxreload может сработать для вас. Это мой результат попыток создать рабочий процесс перезагрузки при сохранении во время разработки.

Я использую ярлык для перезагрузки. Я не хочу перезагружать все время, когда я сохраняю файл

Так что мой подход облегчен, и вы можете оставить функцию перезагрузки в

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, чтобы перезагрузить

Используйте 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 и узел.

Отказ от ответственности: я разработал это расширение самостоятельно.

Clerc - для клиента перезагрузки расширений Chrome Live

Подключитесь к LiveReload-совместимому серверу, чтобы автоматически перезагружать добавочный номер каждый раз, когда вы сохраняете

Бонус: немного поработав с вашей стороны, вы также можете автоматически перезагрузить веб-страницы, которые изменяет ваше расширение.

Большинство разработчиков веб-страниц используют систему сборки со своего рода наблюдателем, который автоматически создает свои файлы, перезагружает сервер и перезагружает веб-сайт.

Разработка расширений не должна быть такой разной. Clerc предлагает эту же автоматизацию разработчикам Chrome. Настройте систему сборки с сервером LiveReload, и Clerc будет прослушивать события перезагрузки, чтобы обновить ваше расширение.

Единственная большая проблема - это изменения в manifest.json. Любые крошечные опечатки в манифесте, вероятно, вызовут дальнейшие попытки перезагрузки, и вы застрянете при удалении / переустановке расширения, чтобы ваши изменения снова загружались.

Clerc перенаправляет сообщение полной перезагрузки на ваш добавочный номер после его перезагрузки, поэтому вы можете при желании использовать предоставленное сообщение для запуска дальнейших шагов обновления.

Великие ребята из Mozilla только что выпустили новый https://github.com/mozilla/web-ext, который вы можете использовать для запускаweb-ext run --target chromium

Благодаря @GmonC и @Arik и некоторому свободному времени мне удалось заставить это работать. Мне пришлось изменить два файла, чтобы сделать эту работу.

(1) Установите LiveReload и Chrome Extension для этого приложения. Это вызовет некоторый скрипт при изменении файла.

(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

Только что нашел новое ворчание проект, основанный на который обеспечивает загрузку, леса, некоторую автоматизированную предварительную обработку, а также автоматическую перезагрузку (взаимодействие не требуется).

Загрузите расширение Chrome от Websecurify

Если у вас Mac, то самый простой способ - это приложение Alfred!

Просто получите Alfred App с Powerpack , затем добавьте рабочий процесс, указанный в ссылке ниже, и настройте нужную горячую клавишу (мне нравится использовать ⌘ + ⌥ + R). Вот и все.

Теперь каждый раз, когда вы используете горячую клавишу, Google Chrome будет перезагружаться независимо от того, какое приложение вы используете в данный момент.

Если вы хотите использовать другой браузер, откройте AppleScript внутри рабочих процессов Alfred Preferences и замените «Google Chrome» на «Firefox», «Safari», ...

Я также покажу здесь содержимое скрипта / usr / bin / osascript, используемого в файле 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);

С уважением, Питер

Я разбудил LiveJS, чтобы разрешить прямую перезагрузку упакованных приложений. Просто включите файл в свое приложение, и каждый раз, когда вы сохраняете файл, приложение автоматически перезагружается.

Как упомянуто в документации: следующая командная строка перезагрузит приложение

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

поэтому я просто создал сценарий оболочки и вызвал этот файл из 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 или альтернативы сияют. Ключ в написании сценария, который имитирует ваш текущий этап тестирования. Привыкайте использовать хотя бы одну из них, так как многие технологии не имеют четких рабочих процессов / путей тестирования.

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: //. Вы также можете использовать относительно движений оконной мыши и других подобных макросов.

Я хотел бы добавить сценарий в Vim таким образом:

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

Это означает, что когда я нахожусь в Vim, я нажимаю кнопку над ENTER (обычно отвечающую за: | и \), известную как кнопка лидера, и следую за ней с заглавной буквой «A», и это сохраняет и начинает мой сценарий фазы тестирования.

Пожалуйста, не забудьте правильно заполнить разделы {input ...} в приведенном выше скрипте Vim / hotkey.

Многие редакторы позволят вам сделать нечто подобное с помощью горячих клавиш.

Альтернативы AutoIt можно найти здесь .

Для Windows: AutoHotkey

Для Linux: xdotool, xbindkeys

Для Mac: Automator

Я в основном развиваюсь в Firefox, где web-ext run автоматически перезагружает расширение после изменения файлов. Затем, когда все будет готово, я проведу последний этап тестирования в Chrome, чтобы убедиться, что в Firefox нет проблем.

Если вы хотите разрабатывать в основном в Chrome, и не хотите устанавливать какие-либо сторонние расширения, тогда другой вариант - создать test.htmlфайл в папке расширения и добавить к нему несколько SSCCE . Этот файл затем использует нормальный<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);
})();

Ваш внедренный скрипт может внедрить другой скрипт из любого места.

Еще одним преимуществом этой техники является то, что вы можете просто игнорировать ограничения изолированного мира . увидеть среду выполнения скриптов контента

БРАУЗЕР-SYNC

Использование удивительной синхронизации браузера

• обновлять браузеры (любые) при изменении исходного кода (HTML, CSS, изображения и т. д.)
• поддержка Windows, MacOS и Linux
• Вы даже можете наблюдать за обновлениями своего кода (в реальном времени), используя свои мобильные устройства

Установка на 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