Open a URL in Chrome Extension

Question

I'm writing my first Chrome extension which is a couple of links to open URLs. One opens a site through JavaScript and the other is a hard coded link. Neither work. Not sure what I'm doing wrong here.

manifest.json

{
  "manifest_version": 2,

  "web_accessible_resources": [
    "popup.html", "popup.js"
  ],

  "name": "Open URL",
  "description": "Opens a URL.",
  "version": "1.0.0",

  "permissions": ["tabs"],

  "browser_action": {
      "default_icon": "icon.png",
      "default_popup": "popup.html",
      "default_title": "Open a URL"
  }
}

popup.html

<!DOCTYPE html>
<html>

<head>
    <title>Open URL</title>
    <script src="popup.js"></script>
</head>

<body style="width: 100px;">
    <p>Open URL</p>
    <p><a href="javascript:OpenURL('http://www.google.com')">Google</a></p>
    <p><a href="http://www.stackoverflow.com">Stack Overflow</a></p>
</body>

</html>

popup.js

function OpenURL(location) {
    chrome.tabs.create({ url: location });
}

Inline js doesn't work in chrome extensions pages. See [OnClick event doesn't work in my chrome extension](//stackoverflow.com/a/29735177) — wOxxOm, Jul 20 '17 at 19:48
NOTE: This question actually contains two issues: A) the use of inline JavaScript in a popup's HTML, and B) the use of a link to a non-extension URL without `target="_blank"`. A) Is covered by many duplicate questions including [The Chrome extension popup is not working, click events are not handled](https://stackoverflow.com/q/17601615). Issue B, I have not found a duplicate for. This type of situation is why Stack Overflow questions are supposed to be 1 question per Question. If this was just A we could close this as a duplicate. If it was just B, (continued) — Makyen, Jul 22 '17 at 15:52
the question could be upvoted and used as a duplicate-target, should the issue be asked about again. Unfortunately, with both issues in a single Question, it makes using this as a duplicate-target confusing, unless someone is asking about both issues. Another time, please ask about only one issue per question. If there was not already an answer which would be partially invalidated, I would suggest editing the question to just the `_blank` issue, but that's inappropriate when doing so would invalidate an answer. — Makyen, Jul 22 '17 at 15:53

score 2 · Answer 1 · answered Jul 20 '17 at 21:32

Let me explain:

TYPE 1: Plain Anchor Link

Solution: Please add the target attribute("_blank") to it in order to open the URL in a new pop-up. Try the below:

<a href="http://www.stackoverflow.com" target="_blank">Stack Overflow</a>

TYPE 2: Anchor Link With Javascript Function Handler

Issue: Inline script executions are prohibited in extensions. So, you need to handle it explicitly and open the pop-up for URLs. Try these steps:

Step 1: Add an #id to that anchor link

<p><a href="http://www.google.com" id="linkId123">Google</a></p>

Step 2: Handle that anchor link with id and call the function popupWindow(). Put these in your content scripts.

$(function() {
    $('#linkId123').click(function() {
        popupWindow($(this).attr('href'), 'Title',"800px","600px");
    });
});

function popupWindow(url, title, w, h) {
    var left = (screen.width / 2) - (w / 2);
    var top = (screen.height / 2) - (h / 2);
    var win = window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
    win.focus();
}

I tested these two solutions and it worked fine. Hope it helps!

Hi Veeresh. TYPE 1 works great, but TYPE 2 doesn't open the URL in Chrome. Not sure why it doesn't work in my browser. I've even tried replacing popupWindow ( ... ) with window.open ('http://www.google.com') which didn't work either. — UltraJ, Jul 21 '17 at 21:36
@UltraJ, got it, you are using invalid URL format with window.open. It should start with "http". I tested it again and worked perfectly fine by opening that URL("http://www.google.com") in a new window. You can also verify this in the browser console also. — Veeresh Devireddy, Jul 21 '17 at 22:05

Open a URL in Chrome Extension

1 Answers1