Override Javascript file in chrome

Question

I would like to override a javascript file with my own version of the similar javascript file in chrome.

Let me explain:

1. Lets say a site 'http://example.com' calls 'http://example.com/script/somescript.js'.

2. What I would like to do is override the file 'http://example.com/script/somescript.js' with my own version located at 'http://localhost/script/somescript.js'.

3. I need to effectively modify a function in the original Javascript file.

Answer 1

With Chrome 65 this has become trivial.

Using local overrides – Chrome 65

What is it? It is a new feature that allows us to override a websites code/css with a local copy that is persisted across sessions. Once you override a file it shall remain until you remove the override.

How to set it up?

1. Open the Sources panel.
2. Open the Overrides tab. Open overrides tab
3. Click Setup Overrides.
4. Select which directory you want to save your changes to.
5. At the top of your viewport, click Allow to give DevTools read and write access to the directory.
6. Make your changes. After you add a folder you can switch to the network tab and right click on any file and select “Save for overrides”. I have already overridden scripts.js so it shows with a “blue dot”.

Answer 2

There are plugins and tools in Chrome for these purposes:

1. Chrome's DevTools, tab Local Overrides (supported from Chrome 65)
2. Requestly
3. Resource Override
4. You might also want to use Tamper, which is a mitmproxy based devtools extension that lets you edit remote files locally and serve them directly to Chrome. (but it's more headache to install and use it)

Choose the one which is easier to use for you.