CODEWITHSUNDEEP
htmledit
JayMcTee
JayMcTee

Reputation: 131

How to edit HTML from a site you don't have access to source of?

In Chrome Dev Tools you can edit and make persistent changes to style elements.

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

You can also edit any HTML from any site and preview it live, sort of editing any site including ones you don't own or have access to.

However, I want to persistently, for me at least, edit the HTML, not just the style elements. How can I do this?

More specifically, I want to change the URLs of the static resources as if they're on a CDN.

Now:

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

Goal:

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

Hosts file editing won't work as the initial request will then not resolve to the right server. I really want to load the document from the existing server, not save the entire source off somewhere, then edit that.

I've found this nodejs script but remain hopeful I could achieve something more simply on the client side within the browser.

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

I probably need some kind of browser extension that allows me to tag certain dom element nodes, write some rewrites for them, save this profile and then reload the page.

Does something like this exist?

Upvotes: 0

Views: 3627

Answers (1)

JayMcTee
JayMcTee

Reputation: 131

The answer is User Scripts. In particular, GreaseMonkey for FireFox and TamperMonkey for Chrome. These are browser add-ons/extensions which allow you to manipulate DOM elements on the pages you visit, using simple JavaScript to achieve your goals.

This route, I achieved my goal with one caveat:

The browser first parses the original HTML and hence then makes all the HTTP requests for the assets it finds on the original source page. Only then does the User Script manipulate the content. Any edits you make on-the-fly with your user script then gets loaded after the the original HTML. So in my case:

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

The original image gets requested from the original host. Then my user script in TamperMonkey manipulates the URLs, causing the browser to than also request my new img:

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

In other words, it doesn't so much replace the image, it duplicates the request, altering the second one. This, of course, has implications for performance measurements etc. So beware.

Upvotes: 0

Related Questions