Як автоматично перезавантажити розроблене розширення Chrome?

Я хотів би, щоб моє розширення Chrome перезавантажувалося кожного разу, коли я зберігаю файл у папці розширень, без явного натискання кнопки «перезавантажити» у chrome: // extensions /. Чи можливо це?

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

Ви можете використовувати " Перевантажувач розширень " для Chrome:

Перезавантажує всі розпаковані розширення за допомогою кнопки на панелі інструментів розширення або перейшовши на " http: //reload.extensions "

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

"Перевантажувач розширень" дозволяє перезавантажити всі розпаковані розширення двома способами:

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

2 - Перегляд " http: //reload.extensions ".

Піктограма панелі інструментів перезавантажить розпаковані розширення одним натисканням кнопки.

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

Оновлення: станом на 14 січня 2015 року розширення відкрите та доступне на GitHub .

Оновлення : я додав сторінку параметрів, так що вам більше не доведеться знаходити та редагувати ідентифікатор розширення вручну. CRX та вихідний код знаходяться за адресою: https://github.com/Rob--W/Chrome-Extension-Reloader
Update 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

Він спостерігає за змінами файлів у каталозі розширення. Коли виявлена ​​зміна, вона перезавантажує розширення та оновлює активну вкладку (для повторного запуску оновлених скриптів вмісту).

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

Іншим рішенням було б створити користувацький скрипт завантаження (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();
    }
  }
};

Цей сценарій підключається до сервера завантаження за допомогою веб-розеток. Потім він надішле виклик chrome.runtime.reload () під час перезавантаження повідомлення з завантаження. Наступним кроком буде додавання цього скрипту для запуску як фонового сценарію у manifest.json та voila!

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

У розширеннях Chrome є система дозволів, яка не дозволила б їй (деякі люди в SO мали ту саму проблему, що і ви ), тому просити їх "додати цю функцію" IMO не працює. Там ви отримали пошту від Chromium Extensions Групи Google з а запропонованим рішенням (теорією) із використанням 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 динамічно завантажуються до розширення.

Я знаю це через поточний проект, над яким працюю через API розширень Chrome, і, здається, завантажується щоразу, коли я оновлюю сторінку.

Можливо, трохи пізня відповідь, але я думаю, що 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 у хромованому браузері, щоб перезавантажити

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 - для клієнта для перезавантаження клієнта з розширенням Live Live

Підключіться до сумісного сервера LiveReload, щоб автоматично перезавантажувати розширення щоразу, коли ви зберігаєте.

Бонус: маючи додаткову роботу з вашого боку, ви також можете автоматично перезавантажувати веб-сторінки, які змінює ваше розширення.

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

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

Єдиний великий gotcha - це зміни в manifest.json. Будь-які крихітні помилки в маніфесті, ймовірно, спричинить невдачу подальших спроб перезавантажити, і ви будете застрягнути видалення / перевстановлення розширення, щоб знову змінити завантаження.

Clerc пересилає повне повідомлення для перезавантаження у ваше розширення після його перезавантаження, тому ви можете необов'язково використовувати надане повідомлення для запуску подальших кроків оновлення.

Чудові хлопці компанії mozilla щойно випустили новий https://github.com/mozilla/web-ext, який ви можете використовувати для запускуweb-ext run --target chromium

Завдяки @GmonC та @Arik та деякому вільному часу я вдається зробити це робочим. Мені довелося змінити два файли, щоб зробити цю роботу.

(1) Встановіть LiveReload та розширення Chrome для цього додатка. Це викликає деякий сценарій зміни файлу.

(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, прихойте кнопку розширення Reloader та активуйте розширення LiveReload, натиснувши кнопку на панелі інструментів, тепер ви перезавантажите сторінку та розширення для кожної зміни файлу, використовуючи всі інші смаколики LiveReload (перезавантаження CSS, перезавантаження зображень тощо)

Тільки погано в цьому те, що вам доведеться повторювати процедуру зміни скриптів при кожному оновленні розширення. Щоб уникнути оновлень, додайте розширення як розпаковане.

Коли у мене буде більше часу, щоб повозитися з цим, я, мабуть, створять розширення, що позбавить потреби в обох цих розширеннях.

До цього часу я працюю над своїм розширенням Projext Axeman

Щойно знайшли новий проект, що базується на грунті, що забезпечує завантаження, риштування, деякі автоматизовані факультети попередньої обробки, а також автоматичне перезавантаження (взаємодія не потрібно).

Завантажте розширення Chrome із Websecurify

Якщо у вас Mac, ¡найпростіший спосіб - за допомогою програми Alfred!

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

Я додав би сценарій до Vim таким чином:

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

Це означає, що коли я перебуваю у Vim, я натискаю кнопку над ENTER (зазвичай відповідає за: | та \), відому як кнопку "лідер", і слідую за нею з великої літери "А", і це економить і починає мій сценарій фази тестування.

Будь ласка, не забудьте належним чином заповнити розділи {input ...} у вищевказаному скрипті Vim / hotkey.

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

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

Для Windows: AutoHotkey

Для Linux: xdotool, xbindkeys

Для Mac: Автоматизатор

Я насамперед розвиваюсь у 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);
})();

Ваш введений сценарій може вводити інший сценарій з будь-якого місця.

Ще одна перевага від цієї техніки полягає в тому, що ви можете просто ігнорувати обмеженість ізольованого світу . див. середовище виконання вмісту скриптів

BROWSER-SYNC

Використання дивовижної браузера-синхронізації

• оновити веб-переглядачі (будь-які) при зміні вихідного коду (HTML, CSS, зображення тощо)
• підтримка Windows, MacOS та Linux
• ви навіть можете дивитись оновлення коду (наживо) за допомогою своїх мобільних пристроїв

Встановлення на MacOS (перегляньте їх допомогу для встановлення на іншій ОС)

Встановіть NVM, щоб ви могли спробувати будь-яку версію вузла

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. Він дійсно працює на VM за допомогою коробки Vagrant, але я міг отримати доступ до віртуальної машини, використовуючи порт 3000 на цьому хості. Мені подобається --no-notifyзупиняти синхронізацію браузера, надсилаючи мені сповіщення про браузер щоразу, коли я змінюю свій код, і --no-openзупиняю поведінку синхронізації браузера, яка негайно завантажує вкладку браузера при запуску сервера.

ВАЖЛИВО: На всякий випадок, коли ви використовуєте Rails, уникайте використання Turbolinks при розробці, інакше ви не зможете натискати на ваші посилання під час використання --proxyопції.

Сподіваюся, комусь це буде корисно. Я пробував багато хитрощів для оновлення браузера (навіть старий пост, який я подав на це питання StackOverflow, використовуючи час AlfredApp), але це справді шлях; більше не хакі, воно просто тече.

КРЕДИТ: Запустіть локальний веб-сервер для перезавантаження з однієї команди

Це неможливо зробити безпосередньо. Вибачте.

Якщо ви хочете розглянути його як функцію, можете надіслати запит на веб-сайті http://crbug.com/new