browser - How to replace web page source "on the fly"?

I'm looking for way to replace web page content on the way. What I mean is:

1. I need to set some pattern for web page: where&what html source code to replace


2. Load this webpage and look at the result.

For example, to change background color on the website by my own.

I know, there exist a some possible ways to do it like develop Chrome extensions which can have permissions to do this things, also I have find already built that extensions but it didnt working out and out of date.

So maybe you know methods to do it?

Or maybe there is exist way to call Javascript functions or run JS script on the working page (not saved).

Answer

There are a number of possible approaches for this:

• A browser extension that intercepts the page and allows you to insert your own elements (including scripts). Greasemonkey is the most popular for JavaScript.


• A proxy application that runs on your PC and incercepts traffic between your browser and the Internet. Examples include Fiddler (cross-platform) and Charles Proxy for Mac.


• Inserting code manually using the browser's web development tools (press F12 to show them), you might need some addin's to enhance the tools to allow you to mess with the CSS/HTML/JS.