Override Javascript file in chrome

You can create a chrome extension yourself. It is surprisingly easy and takes only a few minutes if you use a tool like yeoman chrome extension. Create a new directory and run the generator

yo chrome-extension

Enter a name for your extension and a short description. Select Page Action and that you want to use Content Scripts. You can ignore other options - follow this excellent guide if you come in doubt, but it is really straight forward.

? What would you like to call this extension? insert-script
? How would you like to describe this extension? replace a function with another function
? Would you like to use UI Action? Page Action
? Would you like more UI Features? Content Scripts
? Would you like to set permissions? 

..etc. Now you have a directory structure like this

app
  bower_components
  images
  _locales
  scripts.babel
      background.js
      chromereload.js
      contentscript.js

You cannot replace an existing loaded remote script with another script, since the script already is loaded into the DOM. But you can insert a new script at the end of body which overrides the function you want to replace. Functions is variables, if you add a new function to the document with the same name as an existing function, the new function will be executed instead of the old, exactly as if you declared a new variable with the same name as an existing variable. Now open and edit contentscript.js :

'use strict';

console.log('\'Allo \'Allo! Content script');

The code could look like this

'use strict';

var code = `
    function foo() {
        alert('foo');
    }
`;

var script = document.createElement('script');
script.textContent = code;
document.body.appendChild(script);

Notice the template literal. We need to insert the code as a string, but with backticks it is more readable. Replace foo() with the function you want to override.

There is no need for deployment or bundling. You can install your extension right away from the path where you runned the generator

1. go to chrome://extensions
2. check developer mode
3. click upload unpacked extension
4. select manifest.json from your path
5. after that you just have to hit reload on the extensions page when you have made changes to contentscript.js.

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.

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”.