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


263

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

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


2
Кажется, это быстрее, когда перезагрузка запускается из интерфейса пользователя, включенного в chrome: // flags / # enable-apps-devtool-app
Eric

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

Где твой форк LiveJS, @Oz Ramos?
Джош

Ах, я вижу: ваша ссылка "LiveJS" на самом деле связана с вашим форком, а не с LiveJS.
Джош

6
Это не отвечает на заданный вопрос, но я хочу упомянуть, что я перестал хотеть этого (или любого другого расширения extension-loading-helper) после того, как понял, что могу легко перезагрузить расширение, нажав ctrl-R или cmd-R ( в зависимости от ОС) в фоновом окне расширения. Я считаю, что это вписывается в мой рабочий процесс лучше, чем что-либо еще, что я пробовал, и это также устраняет проблему автоматической перезагрузки, когда файлы находятся в несовместимом состоянии.
Дон Хэтч

Ответы:


162

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

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

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

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

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

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

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

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

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


3
Пока это лучшее решение, но оно все еще не облегчает обновление расширения каждый раз, когда я изменяю файл, который он использует, что я и искал в идеале.
Андрей Федоров

2
Спасибо. Хотел бы упомянуть, что я использую PhpStorm и что я добавил кнопку на панели инструментов, которая вызывает chrome.exe с URL-адресом «reload.extensions». Всякий раз, когда я хочу проверить код, я нажимаю эту кнопку, и Chrome всплывает с обновленным дополнением.
Арик

30
Вау, мне только что удалось заставить gruntjs работать с этим плагином, используя grunt-open, чтобы открывать, http://reload.extensionsкогда файл модифицируется. Теперь он работает точно так же, как livereload, но при этом каждый раз, когда я изменяю один из указанных файлов плагинов, открывается раздражающее окно Chrome: P. Спасибо!
GabLeRoux

1
@GabLeRoux Я пришел сюда, чтобы узнать, сделал ли это кто-то уже. Работает как часы.
polkovnikov.ph

1
@AlexanderMills, к сожалению, я не смог сделать это, не открывая новую вкладку каждый раз. Если вы найдете лучшее решение. По крайней мере, можно перезагрузить плагины с github.com/arikw/chrome-extensions-reloader
GabLeRoux

58

Обновление : я добавил страницу параметров, чтобы вам больше не приходилось вручную искать и редактировать идентификатор расширения. 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, например:
Гугл Хром Гугл Хром


1
@trusktr Ответ Скотта только перезагружает фоновую страницу. Однако оба ответа могут быть объединены (ответ Скотта + вспомогательное расширение), поэтому расширение автоматически перезагружается при изменении файла расширения. Однако я рекомендую против этой практики, так как devtools закрываются при перезагрузке расширения. Я часто работаю с тестовым расширением и часто сохраняю свои изменения, даже если синтаксис не полный. Это сломало бы мое расширение, если бы была включена реальная автоматическая перезагрузка.
Роб W

@RobW Хороший вопрос. Я часто сохраняю в середине написания кода, чтобы код определенно сломал нужный плагин.
trusktr

1
@Sudarshan Вы предложили использовать chrome.i18n.getMessage("@@extension_id"). Это, однако, возвращает extensionID текущего расширения, что бесполезно, поскольку расширение не может перезагрузить себя с помощью managementAPI (после отключения у него нет возможности снова включить расширение).
Роб W

41

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

chrome.runtime.reload();

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

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

для меня это решение работало, только если я написал chrome.runtime.reload () в сценарии в index.html, где это указано в файле манифеста следующим образом: ** "background": {"page": "index. HTML ", **. В моем js-файле content_script я не смог получить доступ к этой функции. Я считаю, что это для безопасности.
titusfx

Ваш скрипт контента не может общаться с API Chrome. Чтобы это работало, вам нужно использовать сообщения
marcelocra

когда вы звоните chrome.runtime.reload(), что на самом деле происходит? обновить несколько страниц / вкладок?
Александр Миллс

5
Я предполагаю, что мы должны позвонить chrome.runtime.reload()из фонового сценария
Александр Миллс

Работал на меня. Спасибо
MikeMurko

39

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

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

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

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

3
Если вы ищете решение с «глотком», то это оно.
17

1
работал отлично. Рассматривали ли вы сделать пакет npm?
pixelearth

@pixelearth да, почему бы и нет. Хм, а какой тогда будет вариант использования? Вы npm install crx-hotreloadв каталог расширения, а затем ссылаться на скрипт, как "scripts": ["./node_modules/crx-hotreload/hot-reload.js"]? Поправь меня, если я ошибаюсь.
Виталий Гордон

1
@MilfordCubicle Я бы предложил экспортировать объект, у которого есть метод, который можно вызвать в файле background.js. Так что- import reloader from 'hot-reload'то в скрипте reloader.check ()
pixelearth

3
Ответ требует больше голосов. Также хорошо работает в сочетании с Webpack --watch, потому что вы можете просто поместить его в папку сборки, чтобы он обновлялся только после завершения процесса сборки. Нет сложных командных плагинов Webpack после сборки.
В. Рубинетти

10

Другим решением было бы создать собственный скрипт 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 (отличный инструмент!). Я публикую это здесь, потому что это может помочь.


9

У расширений 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 открытыми только для этой перезагрузки).

(Сумасшедший, но это может сработать)


7

Вот функция, которую вы можете использовать для просмотра файлов на предмет изменений и перезагрузки в случае обнаружения изменений. Это работает путем опроса их через 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'));

Можно сделать, добавив: reloadOnChange (chrome.extension.getURL ('/ manifest.json'));
Скотт

Я пробовал pastebin.com/mXbSPkeu , но расширение не обновляется (записи манифеста, скрипт содержимого, действие браузера) (Ubuntu 11.10, Chrome 18). Только обновленный файл фон страницы (измененные console.logсообщения действительно показывают вверх).
Роб W

msgstr "следить за изменениями в файлах и перезагружать их при обнаружении изменений." Для жизни я не могу понять, как это узнает, что файл изменился? Пожалуйста, помогите мне понять, как это звучит здорово!
JasonDavis

oO Теперь я вижу, что он хранит копию содержимого файлов и сравнивает кешированную версию с живой версией ajax .... умно!
JasonDavis

6

Может быть, я немного опоздал на вечеринку, но я решил это для меня, создав 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 управления расширениями для перезагрузки / повторного включения расширений? В настоящее время отключение и включение расширений снова приводит к закрытию любого открытого окна проверки (журнал консоли и т. Д.), Что, по моему мнению, слишком раздражает во время активной разработки.


отлично! Я вижу, у вас есть пиар для новой обновленной функции reload ().
Цезарсол

4

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

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

plugins: [
    new ChromeExtensionReloader()
]

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

npx wcer

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


Архив уже :( указывает на github.com/rubenspgcavalcante/webpack-extension-reloader, который является кросс-браузерным, и все еще находится в активной разработке :)
con--

3

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

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


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

@Zequez: файлы не перезагружаются для меня. :(
Randomblue

Ты прав. Я разрабатывал страницу «Параметры», которая вызывает скрипты из документа и, следовательно, перезагружает их. Скрипты content_script не перезагружаются = /
Zequez

3

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


3

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

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

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


Вы также можете использовать функцию перезагрузки в browserAction, чтобы она перезагрузилась при нажатии кнопки. stackoverflow.com/questions/30427908/…
Powerd

Да, вы можете загрузить chrome.runtime.reload () каждый раз. Я использую: редактор> Ctrl + S> Alt + Tab> Ctrl + M. Открытая консоль background..js. Это быстро, без использования мыши
Йохан Хоксма

2

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


2

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

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

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

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

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

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

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

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



1

Благодаря @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


1

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

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


1

Если у вас 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 .


1

Я хочу перезагрузить (обновить) свои расширения в одночасье, вот что я использую в 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);

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


0

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


0

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

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

Запустите необходимые команды наблюдения для сценариев и при необходимости вызовите задачу перезагрузки. Чисто, просто.


0

Это где программное обеспечение, такое как 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


0

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

Если вы хотите разрабатывать в основном в Chrome, и не хотите устанавливать какие-либо сторонние расширения, тогда другой вариант - создать test.htmlфайл в папке расширения и добавить к нему несколько SSCCE . Этот файл затем использует нормальный<script> тег для внедрения сценария расширения.

Вы можете использовать это для 95% тестирования, а затем вручную перезагрузить расширение, если хотите протестировать его на живых сайтах.

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



-1

Да, вы можете сделать это косвенно! Вот мое решение.

В 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.src = 'foo.js', он будет искать ссылку относительно текущего сайта. Если я пробую полный путь, я получу: Не разрешено загружать локальный ресурс: 'file: ///../foo.js'
Джесси Олдридж

-2

БРАУЗЕР-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 некоторое время назад), но это действительно верный путь; нет больше хаков, это просто течет.

КРЕДИТ: Запустите локальный веб-сервер перезагрузки с помощью одной команды


-4

Это не может быть сделано напрямую. Сожалею.

Если вы хотите увидеть его как функцию, вы можете запросить его на http://crbug.com/new


1
Это может быть сделано, это не правильный ответ. Просто посмотрите на другие ответы, и они скажут вам это.
ICanKindOfCode
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.