Modify url location in chrome extensions & stop the initial request

Question

I've made an extension who's purpose is to redirect urls. I.e: www.google.com becomes: www.mysite.com/?url=www.google.com

I came across this post: How to modify current url location in chrome via extensions

The problem I'm having is that the url's are both processed. The tab initially loads up google.com and only after it's finished my request is shown ( www.mysite.com/?url=www.google.com). Is there any way to stop the initial request from being processed?

Something like:

   chrome.tabs.onUpdated.addListener(function(tabId,obj,tab){
    update.stop() // ??????????? Here I'm missing...
    chrome.tabs.update(tabId,{url:....}, function callback); // My update stuff..
   });

Thoughts?

thank you all.

Answer 1

You're looking for the webNavigation API.

You can register listeners to handle user navigation by modifying or blocking the request on the fly.

In the example below, when a user navigate to www.google.com, before the page even start loading onBeforeNavigate is fired and you can redirect the user to the CSS validation page for that URL:

chrome.webNavigation.onBeforeNavigate.addListener((details) => {
    if(details.url.indexOf("www.google.com") !== -1)) {
        chrome.tabs.update(details.tabId, {
            url: "https://jigsaw.w3.org/css-validator/validator?uri=" + details.url
        });
    }
});

Remember to add the "webNavigation" permission to your extension manifest to get this functionality enabled.