CODEWITHSUNDEEP
google-chrome-extension
tchret
tchret

Reputation: 142

Simple Chrome Extension : Open an url in a new tab

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

Upvotes: 2

Views: 3947

Answers (2)

Xan
Xan

Reputation: 77502

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.

Upvotes: 2

Daniel Herr
Daniel Herr

Reputation: 20458

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

Upvotes: 1

Related Questions