Open a local .html on extension mouse click

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.

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.