2015-06-26 2 views
0

В Chrome Dev Tools вы можете редактировать и делать постоянные изменения элементов стиля.Как отредактировать HTML с сайта, на котором у вас нет доступа к источнику?

https://developer.chrome.com/devtools/docs/workspaces

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

Однако, я хочу настойчиво, для меня, по крайней мере, отредактировать HTML, а не только элементы стиля. Как я могу это сделать?

В частности, я хочу изменить URL-адреса статических ресурсов, как если бы они были на CDN.

Сейчас:

Request: http://www.targetsite.tld/ 
<html> 
<img src="http://www.targetsite.tld/image1.jpg"> 
</html> 

Цель:

Request: http://www.targetsite.tld/ 
<html> 
<img src="http://testcdn.tld/targetsite.tld/image1.jpg"> 
</html> 

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

Я нашел этот скрипт nodejs, но надеюсь, что смог бы сделать что-то более просто на стороне клиента в браузере.

http://www.deanmao.com/2012/08/28/modify-a-site-you-dont-own/

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

Что-то вроде этого существует?

+0

Я думаю, что создание простого прокси с nginx и перенаправление трафика с 'http: // www.targetsite.tld' было бы проще. –

+0

Спасибо, я полагаю, я мог бы, если бы он добавил хмель между мной и истинным сервером для HTTP-запросов, которые мне не нужны, чтобы изменить. Он изменил бы весь маршрут для всего, даже когда я только хочу отредактировать, скажем, 1% вывода HTML. – JayMcTee

+0

Я думаю, что я собираюсь ответить на собственный вопрос ... Google для браузера дополнений с фразами, такими как «html editor» и т. Д., Не принесло ничего полезного. Теперь я понимаю, что правильная семантика - это пользовательские скрипты. Это приводит меня к Greasemonkey для FireFox (я не помню названия) и Tampermonkey для Chrome. Я оставлю это открытым немного больше, чтобы узнать, предлагает ли кто-нибудь другое, кроме тех ... – JayMcTee

ответ

0

Ответ - Пользовательские скрипты. В частности, GreaseMonkey для FireFox и TamperMonkey для Chrome. Это расширения браузера/расширения, которые позволяют вам манипулировать элементами DOM на страницах, которые вы посещаете, используя простой JavaScript для достижения ваших целей.

Этот маршрут, я достиг своей цели с одной оговоркой:

Браузер первый разбирает исходный HTML и, следовательно, затем делает все HTTP-запросы для активов, которые он находит на странице оригинального источника. Только тогда пользовательский скрипт манипулирует содержимым. Любые изменения, которые вы делаете «на лету» со своим пользовательским скриптом, затем загружаются после исходного HTML. Так что в моем случае:

<img src="http://www.targetsite.tld/image1.jpg"> 

Оригинальное изображение запрашивается у исходного хоста. Тогда мой сценарий пользователя в TamperMonkey манипулирует URL,, в результате чего браузер на чем также запросить мой новый IMG:

<img src="http://testcdn.tld/targetsite.tld/image1.jpg"> 

Другими словами, это не так много заменить изображение, он дублирует запрос, изменяя второй один. Это, конечно, имеет последствия для измерений производительности и т. Д. Поэтому будьте осторожны.