Как я могу редактировать встроенный JavaScript в HTML-файл во время выполнения?
Я использую браузер Chrome и пытаюсь редактировать работающий JavaScript, который находится непосредственно в файле HTML (файл HTML обслуживается внешним хостом). Мне бы хотелось, чтобы это было просто, как изменение HTML/CSS, да, я знаю, что JavaScript отличается, потому что он с состоянием и его нельзя сравнивать с HTML/CSS, но все же Chrome поддерживает изменение внешних js-файлов, просто не нравится, когда вы вмешиваться в встроенный JavaScript.
Возможные решения, о которых я уже думал:
Greasemonkey / TamperMonkey / Внедрение моего собственного во время выполнения: не решит мои проблемы, потому что скрипт вложен в анонимную область и не может быть доступен извне.
Человек в середине прокси-сервера: в долгосрочной перспективе это невозможно, и для того, чтобы сделать то, что я должен сделать, требуется слишком много времени (я оставлю это как последнее средство).
Как я могу решить эту проблему?
2 ответа
Модификация Javascript
Javascript может быть проанализирован с acorn или же esprima,
Результатом является формат AST в формате ESTree (также известный как Mozilla Parser API).
Затем вы можете внести изменения в AST. estraverse и другие проекты estools могут быть полезны.
Некоторые рекомендации по автоматическому изменению стороннего Javascript:
- Вы не хотите, чтобы в вашем коде появлялись ошибки, распространяющиеся вверх по стеку и влияющие на другой код. Кроме того, вы почти всегда хотите получать уведомления о таких ошибках. Поэтому вы должны окружить весь введенный код блоком try-catch.
- Если вы объявляете переменные в своем введенном коде, вы не хотите, чтобы они мешали другому коду (как это может происходить через
varподъем) Поэтому вы должны обернуть весь введенный код в IIFE. - Старайтесь не изменять что-либо и не вызывать побочных эффектов во введенном коде. Это усложнит обнаружение ваших изменений.
Как только вы закончите, преобразуйте AST обратно в код Javascript с помощью escodegen,
Разработка прокси
Поскольку очевидно, что вы не можете изменить Javascript во время выполнения, вы должны изменить его до выполнения - до его загрузки. Следовательно, вам понадобится HTTP-прокси "человек посередине".
Как вы будете использовать библиотеки Javascript, такие как acorn а также escodegen, прокси также должен быть написан на Javascript. В частности, Node.js
Браузер запросит полный URL у прокси. Например, если есть запрос http://www.google.com, Chrome отправит что-то вроде этого на прокси:
GET http://www.google.com HTTP/1.1
Host: www.google.com
Proxy-Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8
Когда прокси-сервер получает запрос, он должен сделать такой же запрос на исходный сервер, прокси-сервер вдоль большинства заголовков, которые он получил. Следует удалить Host, Remote-Addr, Http-Client-IP, а также Proxy-Connection Заголовки отправляются браузером, так как они предназначены для прокси. Следует также отправить Accept-Encoding: identity на исходный сервер, чтобы отключить сжатие HTTP, что раздражает иметь дело.
После того, как прокси-сервер загрузит исходный ресурс, он может изменить его любым способом, прежде чем отправить его обратно в браузер.
Настройка Chrome для использования прокси
По понятным причинам вы не хотите постоянно связываться с настройками прокси-сервера системы или настройками прокси-сервера браузера. Вы не хотите, чтобы весь ваш сетевой трафик направлялся через ваш рукописный, возможно хакерский, прокси.
API расширения Chrome chrome.proxy Таким образом, будет полезно для вас по следующим причинам:
- Прокси будет влиять только на Chrome, а не на другие приложения.
- Вы можете использовать обходной список, чтобы гарантировать, что через прокси проходит только определенный трафик.
- Вы можете включить или отключить прокси в любое время.
Чтобы использовать этот API, вы должны создать собственное расширение Chrome.
Лучший способ: создание специального приложения
Текущее решение включает в себя три компонента:
- Chrome, браузер.
- Прокси, приложение Node.js, которое модифицирует Javascript.
- Конфигуратор прокси, расширение Chrome, которое говорит Chrome использовать прокси.
Если вы ожидаете, что все это станет очень сложным, вы можете создать специальное приложение для этого, используя NW.js. NW.js очень универсален, и вы можете использовать его как программируемый Chrome.
Преимущества этого подхода:
- NW.js отключает перекрестную политику для доверенного кода. Таким образом, вы можете создать перекрестное происхождение
iframe(не забудьте добавитьnwdisableа такжеnwfaketopатрибуты), и программно взаимодействовать с ним через jQuery. - NW.js поддерживает все API-интерфейсы Node.js. Вы можете сделать прокси неотъемлемой частью вашего приложения. Вам больше не нужно беспокоиться о том, чтобы запускать и убивать его вручную, как если бы прокси был внешним приложением Node.js.
- NW.js поддерживает все API расширения Chrome, включая
chrome.proxy, Вы можете сделать конфигуратор прокси интегрированной частью вашего приложения.
Используйте фрагмент:
Рекомендации