Simple Chrome Extension : Open an url in a new tab - google-chrome-extension

Question

I'm looking to create a "new tab" extension like Panda or the Product Hunt Extension: the user can open a new tab with my website inside, with an hidden url.
I've generated my package with the awesome Extensionizr and here is my manifest.json :
manifest.json
{
"name": "My app",
"version": "0.0.1",
"manifest_version": 2,
"description": "My awesome app",
"homepage_url": "http://myapp.com",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"background": {
"scripts": [
"src/bg/background.js"
],
"persistent": false
},
"permissions": [
"tabs",
"http://myapp.com/*"
]
}
My background.js come from this answer, the problem seems really similar.
background.js
chrome.browserAction.onClicked.addListener(function(activeTab) {
var newURL = "http://myapp.com";
chrome.tabs.create({ url: newURL });
});
I'm still getting this error when I try to run the background page from the extension settings : Uncaught TypeError: Cannot read property 'onClicked' of undefined
And when I open a new tab, Google Chrome took the advantage and display me a google search page.
I do it wrong, and I don't know how/where/why

Answer 1

You're completely off-track. You don't want to open a (simple) new tab, you want to replace the "New Tab page".
Daniel's answer correctly explains why your code does not work, but it won't do what you wanted.
To replace Chrome's New Tab page, you need to use Override Pages:
"chrome_url_overrides" : {
"newtab": "myPage.html"
},
Inside that myPage.html, you can add an <iframe> for your remote content.

Answer 2

That's because you need to register the browser action in the manifest. Here is your manifest with the browser action added at the bottom.
{
"name": "My app",
"version": "0.0.1",
"manifest_version": 2,
"description": "My awesome app",
"homepage_url": "http://myapp.com",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"background": {
"scripts": [
"src/bg/background.js"
],
"persistent": false
},
"permissions": [
"tabs",
"http://myapp.com/*"
],
"browser_action": {}
}
Here are the browser action docs: https://developer.chrome.com/extensions/browserAction