Search code examples
javascriptgoogle-chrome

Override Javascript file in chrome

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.

Solution

  • With Chrome 65 this has become trivial.

    Using local overrides – Chrome 65 (docs)

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