Creating a Chrome Extension that has button links to websites

Question

I've written code for an extension that should launch given websites and the HTML file when launched works properly; however, when I click on the extension, the buttons do not do anything.

<!doctype html>
<html>
<head>
<title>Google Apps Launcher</title>
<script src="popup.js"></script>
</head>
<body>
<h1>Google Apps Launcher</h1>
<FORM>
    <INPUT Type="BUTTON" Value="Gmail" Onclick="window.location.href='https://www.gmail.com'"> 
    <INPUT Type="BUTTON" Value="Google Drive" Onclick="window.location.href='https://drive.google.com/drive/u/0/'"> 
    <INPUT Type="BUTTON" Value="Google Calendar" Onclick="window.location.href='https://calendar.google.com/calendar/render#main_7'"> 
    <INPUT Type="BUTTON" Value="Google Docs" Onclick="window.location.href='https://docs.google.com/document/u/0/'"> 
<FORM/>
</body>
</html>

How would you recommend I do it? – cwittenb Oct 26 '16 at 12:27 — cwittenb, Oct 26 '16 at 12:27

score 3 · Answer 1 · edited May 23 '17 at 12:00

First off, please learn how to help yourself by learning how to debug extension popups. It involves right-clicking the button and selecting Inspect popup.

If you do that, the first thing you'll see is something along those lines:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

That's because Chrome's restrictive Content Security Policy for extensions doesn't allow setting click handlers with a string of text in the HTML itself. See onClick within Chrome Extension not working for more information.

Furtherfore, what do your handlers try to achieve? If you click on this in a popup window, window refers to the popup itself. I doubt you want to load said sites in the popup itself, you probably want to open a new tab instead. I don't think you can navigate the popup window itself to an external website.

You are presented with a choice in fixing this:

The path of least resistance is to use pure HTML links instead of JS:
```
<a href="https://www.gmail.com" target="_blank">Gmail</a>
```
You could then style this <a> element as you wish - it can look like a button.
If you specifically want <input type="button"> elements, you need to follow the standard procedure using addEventListener for "click" events in your popup.js. See CSP documentation and the onClick question linked above - as well as code in the other answer.

You'll want to use chrome.tabs.create instead to open links in new tabs, for example:
```
chrome.tabs.create({url: "https://gmail.com"});
```
See also this question: Open new tab without losing popup focus.

score 1 · Answer 2 · answered Oct 26 '16 at 13:01

You need to set up event listeners. Something like this:

document.querySelectorAll('INPUT[Type="BUTTON"]').forEach(button =>
  button.addEventListener('click', event => {
    window.location.href = event.target.dataset.location
  })
)

<!doctype html>
<html>
<head>
<title>Google Apps Launcher</title>
<script src="popup.js"></script>
</head>
<body>
<h1>Google Apps Launcher</h1>
<FORM>
    <INPUT Type="BUTTON" Value="Gmail" data-location="https://www.gmail.com"> 
    <INPUT Type="BUTTON" Value="Google Drive" data-location="https://drive.google.com/drive/u/0/"> 
    <INPUT Type="BUTTON" Value="Google Calendar" data-location="https://calendar.google.com/calendar/render#main_7"> 
    <INPUT Type="BUTTON" Value="Google Docs" data-location="https://docs.google.com/document/u/0/"> 
<FORM/>

<!-- insert script file, with content from JavaScript section -->
      
</body>
</html>

Your code smells for me. Consider these sections from Google Style Guide:

These may be basic questions, but where would that "document.query..." section go? In the Manifest? And wouldn't any JavaScript need to go in the background.js file? — cwittenb, Oct 26 '16 at 13:14
Append it to `popup.js` and move `` to the bottom of the page — terales, Oct 26 '16 at 13:32

Creating a Chrome Extension that has button links to websites

2 Answers2