Search code examples
google-chromegoogle-chrome-extensionfirefox-addondeveloper-tools

Tool to replace URL with custom content


Is there a development tool or Chrome / Firefox extension that lets you replace the contents of a specific URL with my own custom content?

I'm not looking for a simple /etc/hosts file change, because I want to replace a URL, not just a domain.


Solution

  • chrome.tab API will let you to make any related changes to a tab in a window.

    References:

    a) Tabs API

    b) Basic Chrome Extension architecture.

    You can refer this Sample Extension for changing all URL's in a current tab to Google.co.in

    manifest.json

    This is a core file where we register all chrome extension content, ensure it is with all permissions.

    {
    "name":"Tabs Demo",
    "description":"This Demonstrates Demo of Tabs",
    "browser_action":{
    "default_icon":"screen.png",
    "default_popup":"popup.html"
    },
    "permissions":["tabs"],
    "manifest_version":2,
    "version":"1"
    }
    

    popup.html

    Trivial HTML file referring to a JS file to pass CSP.

    <!doctype html>
    <html>
    <head>
    <script src="popup.js"></script>
    </head>
    <body>
    </body>
    </html>
    

    popup.js

    function tabsfunction() {
        //fetching all tabs in window
        chrome.tabs.getAllInWindow(function (tabs) {
            // Iterating through tabs
            for (tab in tabs) {
                //Updating each tab URL to custom url 
                chrome.tabs.update(tabs[tab].id, {
                    "url": /*You can place any URL you want here*/
                    "https://www.google.co.in/"
                }, function () {
                    //Call back
                    console.log("Completed");
                });
            }
        });
    }
    //Binging a function on document events 
    document.addEventListener("DOMContentLoaded", tabsfunction);
    

    Let me know if you need more information.