77

How can I create an extension for Chrome that adds an icon to the toolbar, and when you click it, it opens a new tab with some local web page (for example: f.html)?

I saw this question, but it doesn't really explains what should I add in the manifest file...

0

3 Answers 3

106

This is not true for newer chrome apps.

Newer chrome apps having manifest_version: 2 requires the tabs be opened as:


chrome.browserAction.onClicked.addListener(function(activeTab)
{
    var newURL = "http://www.youtube.com/watch?v=oHg5SJYRHA0";
    chrome.tabs.create({ url: newURL });
});

7
  • This is the better, more current and more accurate answer, FYI Commented Jul 6, 2013 at 23:51
  • 5
    @DehanWjiesekara Put it in e.g. background.js and have "background": { "scripts": [ "background.js" ] } in your manifest.
    – simonp
    Commented Mar 28, 2017 at 17:01
  • will tabs.create fire when used in onInstalled in the context of loading an unpacked extension that basically just has a local index.html, and a background.js that right now purely opens the index.html in a new tab? for some reason that's not working for me right now, must be something simple im missing. Commented Sep 8, 2018 at 0:44
  • 1
    Just keep in mind that using a "tabs" permission will show the user a warning upon installation that the chrome extension needs to "Read your browsing history", but if you just wanna open a new tab then just use "activeTab" permission instead, it won't trigger that warning. Commented Apr 17, 2019 at 20:35
  • 1
    This is working fine but opening multiple tabs on subsequent clicks. How can I prevent this?
    – san
    Commented Dec 18, 2021 at 6:53
55

Well, in the extensions docs, it states in manifest, you would need to include "tabs" as its permission. Same way they explain the hello world application:

Manifest File:

{
  "name": "My Extension",
  "version": "1.0",
  "description": "Opens up a local webpage",
  "icons": { "128": "icon_128.png" },
  "background_page": "bg.html",
  "browser_action": {
    "default_title": "",
    "default_icon": "icon_19.png"
  },
  "permissions": [
    "tabs"
  ],
}

Within the background page, you listen to the mouse click event on the browser action.

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.create({'url': chrome.extension.getURL('f.html')}, function(tab) {
    // Tab opened.
  });
});

As you noticed above, you will see that I used the question you saw in the other post. Note, this isn't tested, but I believe it should work.

1
8

chrome.tabs.create need the permission of "tabs".

Simply using window.open in extension without need of any permission. and the code is shorter. I suggest this solution.

window.open(url,'_blank');
2
  • i did use same code in my extension to open new tab on click of notification button . but now after 3 months i am getting aw..snap page error when clicking on that button. do you have any idea why this happened ? P.s : it works fine if i use another url like : www.google.com but it's not working with my site.
    – Sona
    Commented Apr 27, 2016 at 7:52
  • This seems to work for me (although I've only tried it in a local unbundled extension that I'm working on).
    – simonp
    Commented Mar 28, 2017 at 17:02

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.