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...

buræquete
  • 14,226
  • 4
  • 44
  • 89
Alon Gubkin
  • 56,458
  • 54
  • 195
  • 288

3 Answers3

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 });
});
Nicu Surdu
  • 8,172
  • 9
  • 68
  • 108
Abhishek Mehta
  • 1,447
  • 1
  • 14
  • 16
  • This is the better, more current and more accurate answer, FYI – Zack Shapiro Jul 06 '13 at 23:51
  • 5
    @DehanWjiesekara Put it in e.g. background.js and have `"background": { "scripts": [ "background.js" ] }` in your manifest. – simonp Mar 28 '17 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. – Stephen Tetreault Sep 08 '18 at 00: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. – Mahmoud Felfel Apr 17 '19 at 20:35
  • You had to do this, didn't you? – Shankar Jul 03 '19 at 08:52
  • 1
    This is working fine but opening multiple tabs on subsequent clicks. How can I prevent this? – san Dec 18 '21 at 06: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.

Sam Hanley
  • 4,707
  • 7
  • 35
  • 63
Mohamed Mansour
  • 39,445
  • 10
  • 116
  • 90
  • 2
    Beware that adding "tabs" permissions will show a "Read your browsing history" permission warning to the user on install. The docs say that most `chrome.tabs` don't require this permission https://developer.chrome.com/extensions/tabs Because I didn't pay close attention to this, I recently lost hundreds of users from https://chrome.google.com/webstore/detail/inbox-by-gmail-checker/mpjmeeikbbgccbjkbfabocnjcaejdpmj – Joe Mar 02 '17 at 03:00
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');
cuixiping
  • 24,167
  • 8
  • 82
  • 93
  • 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 Apr 27 '16 at 07:52
  • This seems to work for me (although I've only tried it in a local unbundled extension that I'm working on). – simonp Mar 28 '17 at 17:02