I'm creating my first chrome extension. When the extension icon is clicked, I wish that chrome will open a new tab, and open there a local .html page I have created.

Following the instructions on Google's documentation, I have created the following:

manisfest.json

{
  "manifest_version": 2,

  "name": "Notes",
  "version": "1.0",

  "browser_action": {
    "default_icon": "ninjaicon.png",
    "default_popup": "notes.html"
},

  "background": {
    "scripts": ["background.js"]
},

  "permissions": [
    "tabs"
 ]
}

background.js

chrome.browserAction.onClicked.addListener(function(activeTab){
  chrome.tabs.create({'url': chrome.extension.getURL('notes.html')}, function(tab)
  });
});

When I press my extensions icon, there is a popup with "notes.html" content, but no new tab is opened like I wished.

How am I suppose to do it correctly? been looking up on a lot of solutions here but non worked. I just wish to create an extension that when clicked opens a new tab with a local web application.

Thanks for the answers.

I'm creating my first chrome extension. When the extension icon is clicked, I wish that chrome will open a new tab, and open there a local .html page I have created.

Following the instructions on Google's documentation, I have created the following:

manisfest.json

{
  "manifest_version": 2,

  "name": "Notes",
  "version": "1.0",

  "browser_action": {
    "default_icon": "ninjaicon.png",
    "default_popup": "notes.html"
},

  "background": {
    "scripts": ["background.js"]
},

  "permissions": [
    "tabs"
 ]
}

background.js

chrome.browserAction.onClicked.addListener(function(activeTab){
  chrome.tabs.create({'url': chrome.extension.getURL('notes.html')}, function(tab)
  });
});

When I press my extensions icon, there is a popup with "notes.html" content, but no new tab is opened like I wished.

How am I suppose to do it correctly? been looking up on a lot of solutions here but non worked. I just wish to create an extension that when clicked opens a new tab with a local web application.

Thanks for the answers.

• javascript
• html
• google-chrome
• google-chrome-extension

• 1 have you tried to remove "default_popup" part from browser_action – wong2 Commented Mar 7, 2016 at 14:53
• I have tried to create another .html file, and call this new .html from the background.js.. didn't work also. – pwnphpown Commented Mar 7, 2016 at 15:03
• Also tried to remove it completely (having no pop up), still doesn't work.. – pwnphpown Commented Mar 7, 2016 at 15:06
• have you reloaded the extension after remove "default_popup"? – wong2 Commented Mar 7, 2016 at 15:12
• Yes. I have reloaded it and it's not working. – pwnphpown Commented Mar 7, 2016 at 15:13

4 Answers 4

For this to work, the notes.html should be in your extension's root directory.

Remove the default_popup from the manifest file as

The onClicked event is fired when a browser action icon is clicked but this event will not fire if the browser action has a popup as it overrides this event.

This is mentioned in the documentation here, scroll to the last to read the same.

Also, have you tried to see your background page's console. I see the code you have written is wrong. There is no opening brace in your chrome.tabs.create callback function. Fix it if you want to add code to your callback function, if not you can simply write like this:

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.create({url: chrome.extension.getURL('notes.html')});
});

I hope this helps.

there is two way to open your local html page by the browser action.

1. As a popup

manifest.json

"browser_action":   {
                            "default_icon"  :   "128.png",
                            "default_popup" :   "localPage.html",
                            "default_title" :   "localPage title"
                        }

2. As a normal page in chrome browser

manifest.json

"background": {
        "scripts": ["background.js"]
    },

background.js

chrome.browserAction.onClicked.addListener(function () {
    chrome.tabs.create({ url: chrome.runtime.getURL("localpage.html") });
});

use this

chrome.action.onClicked.addListener(function() {
  chrome.tabs.create({url: 'index.html'});
});

In manifest_version 3 use this

chrome.action.onClicked.addListener((tab) => {
  chrome.tabs.create({
    url: "your_html_.html"
  });
 })