55

I want to create an extension that redirects the user to another website if he clicks on the extension button. So far I have only seen extensions which create a new tab for each click.

Is it possible to redirect the user to another website using the active tab?

I tried something like this:

chrome.browserAction.onClicked.addListener(function(tab) {
    var url = "https://www.mipanga.com/Content/Submit?url="
        + encodeURIComponent(tab.url)
        + "&title=" + encodeURIComponent(tab.title);

    document.location.href = url; // <-- this does not work
});

4 Answers 4

91

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, but query() is more commonly used, has more options, and works in background pages and popup views.

Additional: Be aware that you cannot use the Tabs API from content scripts. As per the documentation page - "The Tabs API can be used by the service worker and extension pages, but not content scripts". If you have a need to use the Tabs API using content scripts then I would suggest looking at the Messaging API.

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.

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 well if 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"
],

Messaging API

As per the documentation page - The Tabs API can be used by the service worker and extension pages, but not content scripts.

See the answer by TimS which alludes to this. Please upvote them!

Example of interacting with the Tabs API using a service worker via the Messaging API: https://github.com/Omicron18/nitter-extension

13
  • 1
    can we include this code in our external js file? or it has to be on the chrome popup.html? thanks! Commented Feb 20, 2011 at 22:00
  • @Toni - Yes, it can be called from an external file. Commented Feb 21, 2011 at 10:39
  • @Dan I suggest you have a look at the documentation on tabs, as it may have changed somewhat. That said, this same code works on the latest dev build of Chrome (21.0.1171.0 dev-m) for me without issue. To be honest, I'd be surprised if it didn't as Google do keep developers up to date, and my own extensions use the same sort of logic as well. If such a major part of the extensions functionality suddenly changed without warning, there'd be something of a backlash. Docs: code.google.com/chrome/extensions/tabs.html Commented Jun 13, 2012 at 8:20
  • 2
    I had the same issue with chrome.tabs.getCurrent(function(tab){}) , I used chrome.tabs.getSelected(null, function(tab){}) instead and it works fine
    – jobwat
    Commented Nov 13, 2013 at 23:44
  • 1
    For posterity, I removed getSelected which was deprecated in v33. You should only use query or getCurrent. Commented Feb 26, 2019 at 14:00
49

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});
});
5
  • 4
    This should be the accepted answer. 'getSelected' has been deprecated
    – Gibolt
    Commented Jan 6, 2016 at 19:53
  • 3
    @Jean-Marc Amon tab param is actually an array type, so it should be tabs[0].id
    – elquimista
    Commented Feb 20, 2017 at 11:39
  • Is there a way to take chrome.tabs.update(tab.id ); and add a string of text to the URL? ie. like adding '&sandbox=true' to the current URL? Commented Mar 9, 2017 at 16:17
  • Not tried yet but i think it will work so try and tell me Commented Mar 27, 2018 at 23:25
  • I have tried this method, but the url turns turn out to be unexpected: chrome://extension/<my_extension_id>/<new_url> How to remove the unwanted prefix? Commented Mar 22, 2019 at 13:36
13

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'});
11
  • Works. Thanks you!
    – Karl Pokus
    Commented Feb 7, 2017 at 15:04
  • can you use that code to add a text string to the current URL? ie. add '&sandbox=true' to the current URL? Commented Mar 9, 2017 at 16:19
  • @scott.schaffer I think you'll need the tabs permission for that, since you'll need to retrieve the current URL of the tab before adding to it.
    – Domino
    Commented Mar 9, 2017 at 19:02
  • 2
    You can even skip first parameter chrome.tabs.update({url: 'http://example.com'});
    – farwayer
    Commented Aug 30, 2017 at 3:15
  • 1
    @CảnhToànNguyễn Sounds like you might be passing a relative URL to chrome.tabs.update. Make sure you pass in a full url including a protocol. If that's not it, then you should probably open your own StackOverflow question.
    – Domino
    Commented Mar 22, 2019 at 14:56
3

The answers given here no longer work: the Chrome Tabs API can no longer be used by content scripts, only by service workers and extension pages.

Instead, you can send a message to a service worker to get it to update the location of the current tab: see https://stackoverflow.com/a/62461987.

See this for a simple working example.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.