How do I open a URL in a new tab from within a chrome extension?

Question

I want to use an image as a button (setting.png), and onclick open a URL in a new tab.

My popup.html:

    <html>
  <head>

    <style>
    </style>
  </head>
  <body>
    <a href = "http://google.com" id="link"><img src="setting.png" width="30px" height="auto"></a>
    <script src ="javascript.js"></script>
  </body>
</html>

manifest.json:

{
  "manifest_version": 2,

  "name": "",
  "options_page": "options.html",
  "background": {
        "scripts": [
            "background.js"
        ]
    },
  "description": "",
  "version": "1.5",
  "offline_enabled": true,
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "icons": { "16": "icon16.png",
              "32": "icon32.png",
           "48": "icon48.png",
           "64": "icon64.png",
          "128": "icon128.png" },

  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/",
    "storage",
    "tabs"
  ]
}

javascipt.js:

window.addEventListener('click',function(e){
  if(e.target.href!==undefined){
    chrome.tabs.create({url:e.target.href})
  }
})

So when I click on the image I want to open the URL in a new tab. Thanks!

It explicitly does. You don't use jQuery so the accepted answer does not apply, but there are 2 non-jQuery answers there. — Xan, Dec 09 '15 at 12:58
And of course it's possible that it doesn't suit your needs in a copy&paste way, but then you need to specify your needs more clearly, and show _how_ you tried to apply that answer and failed. — Xan, Dec 09 '15 at 13:05
Alright, thank you. I've updated my code. I tried using http://stackoverflow.com/a/26216955/5586484. But it doesn't seem to work. Could you please tell me where I'm going wrong? — , Dec 09 '15 at 13:10
You have to understand what you're using. That particular answer (and other answers as well) relies on the `href` attribute. You don't have it on your link. — Xan, Dec 09 '15 at 13:11
Comments break formatting, but make sure you add `http://` or `https://` to your links - `chrome.tabs` won't work without a full URL. — Xan, Dec 09 '15 at 13:14
I have that's just the SO comments, please see the code. Thank you. — , Dec 09 '15 at 13:15
Okay, now that the question is different (fixing a particular implementation), I'm removing the duplicate. Just to make sure - did you properly reload the extension after changes? — Xan, Dec 09 '15 at 13:17
Yes I did. When I hover over the image, currently it only acts like an image and it's not clickable. — , Dec 09 '15 at 13:21

score 1 · Accepted Answer · answered Dec 09 '15 at 13:46

1

Chrome sets the innermost clicked element in event.target which is the image.
There's no need for a click handler, just use target="_blank" attribute for the link:

<a href="http://google.com" id="link" target="_blank">

P.S. In case of problems always use the debugger to see what's actually happening (set a breakpoint inside the click handler, click the link, examine the parameters and so on).

answered Dec 09 '15 at 13:46

wOxxOm

65,848
11
132
136

Thank you for you answer @wOxxOm! Alright, so correct me if I'm wrong, I can remove the click handler (i.e. all the JS)? I've used your code, but it still isn't working.. – Dec 09 '15 at 14:03
1. `There's no need for a click handler` as you can see in the answer 2. It works, I've just tested it here – wOxxOm Dec 09 '15 at 14:07
Either post the exact code you're using or upload the entire extension somewhere, e.g. http://tinyupload.com/ – wOxxOm Dec 09 '15 at 14:10
it is adding chrome-extention id before the URL – Nikhil Kulkarni Nov 25 '19 at 07:53
1

@NikhilKulkarni, no, it does not. Make sure your URL specified in `href` has a protocol like shown in the answer. – wOxxOm Nov 25 '19 at 07:55

How do I open a URL in a new tab from within a chrome extension?

1 Answers1