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

Question

I've been trying to look around the web and have had difficulties finding an answer. I've seen a couple of web extensions such as OneTab that open a local index.html page when you click the browser action button. Does anyone know how I can get my chrome extension to open an index.html page when browser action is pressed?

Answer 1

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") });
});

Answer 2

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") });
});

Answer 3

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.