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.