Расширение Chrome для изменения страницы script включает в себя и JS

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

Для этого мне нужно изменить script include, чтобы указать на мой dev-сервер, а затем переопределить метод load(), который вызывается на странице, чтобы добавить дополнительный параметр, чтобы сообщить ему, на каком сервере указывать, когда удаленные вызовы.

Похоже, я могу добавить JS на страницу с использованием расширения chrome, но я не вижу способа изменить страницу до ее загрузки. Есть ли что-то, что мне не хватает, или хромированные расширения не разрешают делать такие вещи?

Ответы

Ответ 1

Я сделал большой объем разработки расширений Chrome, и я не думаю, что есть какой-либо способ редактировать источник страницы до того, как он будет отображаться браузером. Двумя ближайшими параметрами являются:

Скрипты содержимого позволяют добавлять лишние файлы JavaScript и CSS. Вы могли бы использовать эти сценарии для перезаписи существующих тегов script на странице, но я не уверен, что это сработает, поскольку теги script, видимые для вашего script через DOM, уже загружены или загружается.
WebRequest позволяет захватывать HTTP-запросы, поэтому у вас может быть расширение, перенаправляющее запрос для library.js в library_dev.js.

Предполагая, что ваш сайт - www.mysite.com, и вы сохраняете свои скрипты в каталоге /js:

chrome.webRequest.onBeforeRequest.addListener(
    function(details) {
        if( details.url == "http://www.mysite.com/js/library.js" )
            return {redirectUrl: "http://www.mysite.com/js/library_dev.js" };
    },
    {urls: ["*://www.mysite.com/*.js"]},
    ["blocking"]);

Источник HTML будет выглядеть одинаково, но документ, набранный <script src="library.js"></script>, теперь будет другим файлом. Это должно достичь того, чего вы хотите.

Ответ 2

Вам могут быть интересны крючки, доступные в браузере Opera. Opera использовала * очень мощные крючки, доступные как для пользовательских файлов JavaScript (однофайловые вещи, очень легко писать и разворачивать), так и для расширений. Некоторые из них:

BeforeExternalScript:

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

Один приятный трюк - отменить его загрузку, загрузить внешний script в AJAX-вызов, выполнить замену текста на нем, а затем повторно ввести его на веб-страницу в качестве тега script или использовать eval.

window.opera.defineMagicVariable:

Этот метод может использоваться пользовательскими скриптами Java для переопределения глобальных переменных, определенных обычными сценариями. Любая ссылка на глобальное имя, которое будет переопределено, вызовет предоставленные функции getter и setter.

window.opera.defineMagicFunction:

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

*: Opera недавно переключилась на движок Webkit, и кажется, что они удалили некоторые из этих крючков. Тем не менее, вы можете найти Opera 12 для загрузки на своем веб-сайте.

Ответ 3

Здесь вы можете изменить содержимое до его загрузки на страницу с помощью WebRequest API. Это требует, чтобы содержимое загружалось в строковую переменную до того, как возвращается слушатель onBeforeRequest. Этот пример предназначен для javascript, но он должен работать одинаково хорошо для других типов контента.

chrome.webRequest.onBeforeRequest.addListener(
    function (details) {
        var javascriptCode = loadSynchronously(details.url);
        // modify javascriptCode here
        return { redirectUrl: "data:text/javascript," 
                             + encodeURIComponent(javascriptCode) };
    },
    { urls: ["*://*.example.com/*.js"] },
    ["blocking"]);

loadSynchronously() может быть реализована с помощью обычного XMLHttpRequest. Синхронная загрузка блокирует цикл событий и устарела в XMLHttpRequest, но, к сожалению, с этим решением, к сожалению, трудно избежать.

Ответ 4

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