Reposition URLs in Chrome Extensions and Stop Initial Request

Question

I made an extension whose purpose is to redirect URLs. Ie: www.google.com becomes: www.mysite.com/?url=www.google.com

I came across this post: How to change the current URL location in chrome via extensions

The problem I am facing is that the url is being processed. The tab first loads google.com, and only after its completion is my request displayed (www.mysite.com/?url=www.google.com). Is there a way to stop processing the initial request?

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 are looking for a web navigation API .

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

In the example below, when the user goes to www.google.com , onBeforeNavigate even launched before the page launches, and you can redirect the user to the CSS validation page for this 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 "webNavigation" to the extension manifest to enable this functionality.

Answer 2

chrome.tabs.onUpdated run twice for each load on the tab - after the tab starts loading and at another time when it finishes loading. If you attach your update to a tab load download event, it should work relatively quickly. You will still see the source url loading for a short time, but it will not wait until it finishes, as you describe.

 chrome.tabs.onUpdated.addListener(function(tabId,obj,tab){ if(obj.status == "loading") { chrome.tabs.update(tabId,{url:....}, function callback); } }); 

I do not think that at the moment there is a more effective solution.