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.

Answer 3

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.

Answer 4

you can load your file into the page by adding (or executing in the console) this script.

window.onload = function () {
  var script = document.createElement('script');
  script.src = '//localhost/your/script';
  script.onload = function() {
    console.log('your script have been loaded');
  }
  document.body.appendChild(script);
}

If the file that you want to override contains global functions/variables will be override with the new version in your file or if the elements that you want to override are namespaced just follow the path (e.g My.namespace.method = myNewMethod)

Answer 5

According to dharam's answer above,Resource Override works.

For people who doesn't have access to Chrome store,you can download the source here:

https://github.com/kylepaulsen/ResourceOverride

in Chrome,get into chrome://extensions/ ,enable developer mode,then load the extracted source root directory(which contains the file manifest.json) into Chrome.

tested for Chrome 73.0.3683.86 on Windows 10 .I can't post anything on StackOverflow before because https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js is blocked.Then in the settings of ResourceOverride,I map it to https://localhost/jquery-1.12.4.min.js and it finally works.

I run an ASP.NET Core 2.1 project with SSL enabled and localhost certificate enabled to serve jquery-1.12.4.min.js from local disk.

In the launchSettings.json,there is

"applicationUrl": "https://localhost:443;http://localhost:80",

in the Kestral profile(not IIS profile).