Chrome Extensions creating a .html page accessible by clicking browser action.

It seems there are two parts for your question

1. Respond to browserAction clicked event

    chrome.browserAction.onClicked.addListener(function () {
        // Your code here
    });

2. Open a local html page

You can get the local page url via chrome.runtime.getURL("index.html")

Then you can use chrome.tabs.create({ url: chrome.runtime.getURL("index.html") }); to open the local html page.

You should take a look at chrome.browserAction and chrome.runtime.getURL.

manifest.json

{
    "name": "Your Extension Name",
    "description": "Your Extension Description",
    "version": "0.1",
    "manifest_version": 2,
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "browser_action": {
         "title": "Your Browser Action Name"
    }
}

background.js

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

There are two ways to open your local HTML page by a 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 Google Chrome browser

manifest.json

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

background.js

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