How to modify current url location in chrome via extensions
Solution 1:
Attention: If you develop cross-browser extensions (I hope you do!), I recommend that you use
chrome.tabs.query()
. Please see Jean-Marc Amon's answer for more information. This answer still works in both Firefox and Chrome, butquery()
is more commonly used, has more options, and works in background pages and popup views.
From the chrome.tabs
API, you can use getCurrent()
, query()
, or update()
.
Right now, I prefer update()
as this allows you to update the current tab without needing to do much else.
NB: You cannot use update()
from content scripts.
If updating the url from a content script is required then you should look to use query
instead. Jean-Marc Amon's answer provides a wonderful example of how to get the active tab in this case (don't forget to upvote him!).
update()
let myNewUrl = `https://www.mipanga.com/Content/Submit?url=${encodeURIComponent(tab.url)}&title=${encodeURIComponent(tab.title)}`;
chrome.tabs.update(undefined, { url: myNewUrl });
Here, we have set the first argument of update to undefined. This is the tab id that you're wanting to update. If it's undefined then Chrome will update the current tab in the current window.
Please see Domino's answer for more information on update
and also note that undefined
is not needed. Again, please don't forget to upvote their answer as wellif you find it useful.
getCurrent()
getCurrent
also cannot be called from a non-tab context (eg a background page or popup view).
Once you have the current tab, simply pass update()
.
chrome.tabs.getCurrent(function (tab) {
//Your code below...
let myNewUrl = `https://www.mipanga.com/Content/Submit?url=${encodeURIComponent(tab.url)}&title=${encodeURIComponent(tab.title)}`;
//Update the url here.
chrome.tabs.update(tab.id, { url: myNewUrl });
});
NB: In order to use this this functionality, you must ensure that you have the tabs
permission enabled in your manifest.json
file:
"permissions": [
"tabs"
],
Solution 2:
You can use chrome.tabs.query too
chrome.tabs.query({currentWindow: true, active: true}, function (tab) {
chrome.tabs.update(tab.id, {url: your_new_url});
});
Solution 3:
The chrome.tabs.update
method will automatically run on the current active tab if no tab id is passed.
This has the added advantage of not requiring the tabs
permission. Extensions with this permission warn the user that they can read the browsing history, so you should avoid asking for it if you don't need to.
Changing the current tab's URL is as simple as writing this:
chrome.tabs.update(undefined, {url: 'http://example.com'});
Or as mentionned by farwayer in the comments, you don't need to put two arguments at all.
chrome.tabs.update({url: 'http://example.com'});