How to add a URL to a Chrome Browser Extension?

Question

I've created a Browser Extension for Chrome. I have added an HTML Table to the browser_action.html as a Popup as shown below.

enter image description here

What I want is, when I click on a Table Cell, it should take me to a link. Different links when clicked on different cells.

This is part of my code :

<tr>
<td class="tg-z3w6 hvr-underline-from-center"><a href="http://ew/Environment/Detail?envid=2715"></a>TEST</td>
<td class="tg-ges6">2715</td>
</tr>

But it doesn't work. Any idea why? or a workaround for this issue?

Do you want the link to be opened in popup.html or in chrome tab? — Siddharth, Jul 17 '15 at 07:51

score 3 · Answer 1 · answered Jul 17 '15 at 09:17

3

In your popup.html assuming you are using jquery-

$(document).ready(function(){
   $('body').on('click', 'a', function(){
     chrome.tabs.create({url: $(this).attr('href')});
     return false;
   });
});

answered Jul 17 '15 at 09:17

Siddharth

6,966
2
19
34

Thanks :) I couldn't actually get this to work, so I did it without jQuery – wishman Jul 17 '15 at 11:29

score 2 · Accepted Answer · answered Jul 17 '15 at 11:28

Here is my solution for my own question. Create popup.js and link it in the page:

<script src="popup.js" ></script>

Add the following code to popup.js:

document.addEventListener('DOMContentLoaded', function () {
    var links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        (function () {
            var ln = links[i];
            var location = ln.href;
            ln.onclick = function () {
                chrome.tabs.create({active: true, url: location});
            };
        })();
    }
});

That's all, links should work after that.

This works like a charm!! Thank You <3 – mrpbennett Feb 02 '22 at 19:06 — mrpbennett, Feb 02 '22 at 19:06

score 1 · Answer 3 · answered Jul 17 '15 at 08:22

1

TEST should be between <a>and </a>.

answered Jul 17 '15 at 08:22

Will White

133
1
9

I tried, the URL is also "clickable" but it won't work yet. – wishman Jul 17 '15 at 09:08

score -1 · Answer 4 · answered Jul 18 '15 at 20:50

-1

it's so easy you just need to add target="#" to your a tag

like

<td class="tg-z3w6 hvr-underline-from-center"><a href="http://ew/Environment/Detail?envid=2715" target="#" ></a>TEST</td>

answered Jul 18 '15 at 20:50

badr aldeen

448
7
22

Setting aside whether this will work in an extension, `target="#"` isn't a great idea for any webpage. You want to use `target="_blank"` or make your target name some semantically meaningful name. See [here](http://stackoverflow.com/q/4964130/2336725). – Teepeemm Jul 19 '15 at 14:48

How to add a URL to a Chrome Browser Extension?

4 Answers4