Chrome extension: How to open a specified link in a new tab by clicking a button in the html popup?

Question

I'm trying to dip my feet into the water of the pool that is creating chrome extensions. I tried to start off with something I thought would be simple but it has proven to stump me as I don't really know where I can read information on this sort of thing.

Anyhow, currently my goal is to have a chrome extension that does the following: You click the extension icon -> an HTML popup file opens displaying a singular button -> when you click this button it opens a specified link in a new chrome tab and changes that to be your active tab.

From my searching, I have found that I might have to use a background script so that I don't violate a policy regarding Manifest version 2 or something of the sorts, I tried it and it didn't really work for me. I really don't want to wander into creating a whole new script if that's not the problem.

Here's my manifest.json file followed by my popup.html file.

 {
  "manifest_version": 2,

  "name": "strong text",
  "author": "authorname",
  "description": "desctext",
  "version": "1.4",

  "permissions": [
    "tabs"
  ],

"icons": { "16": "icon16.png",
           "48": "icon48.png",
          "128": "icon128.png" },


  "browser_action": {
    "default_popup": "popup.html"
  }
}

<!doctype html>
<html>
<head>
    <title>Hovertext</title>
    <script src="popup.js"></script>
</head>
<body>

    <div id="header">
    <h1>Header</h1>
    </div>
    <div id="divider">
        <p><button type="button" id="buttonA">Button Text</button>
 <script>
 var button1 = document.getElementById("buttonA");
 button1.addEventListener("click", function() {
    chrome.tabs.create({url: "http://www.google.com/"});
 });
 </script>
    </div>
        <div id="footer">
            footer stuff here
            </div>
</body>
<style>
    body {
        background-image: url("https://s-media-cache-ak0.pinimg.com/736x/51/3e/4f/513e4f5274ec48f29b894b0b8409658f.jpg");
    }
    #header {
        background-color:rgb(96, 222, 72);
        text-align:center;
        padding:1px;
    }
    #footer {
        background-color:rgb(96, 222, 72);
        clear:both;
        text-align:center;
        padding:1px;
    }
    #divider {
        text-align:center;
    }
    #buttonA {
        color:white;
        background-color:rgb(0, 152, 255);
        border-width:3px;
        border-color:white;
    }
    #buttonA:hover {
        color:rgb(0, 152, 255);
        background-color:white;
        border-width:3px
        border-color:rgb(0, 152, 255);
    }
</style>
</html>

I'm new to this type of stuff and stack-overflow in general so if I didn't clarify something correctly just let me know, Thanks for the help in advance!

Check this question http://stackoverflow.com/questions/3188384/google-chrome-extensions-open-new-tab-when-clicking-a-toolbar-icon — Rio, Mar 01 '17 at 03:07
The link is much-appreciated @Rio, although I'm not quite sure how I would change the snippet `chrome.browserAction.onClicked.addListener(function(activeTab) { var newURL = "http://www.google.com/"; chrome.tabs.create({ url: newURL }); });` to be used upon my button in popup.html. I'm starting to think I might need a background script to listen in the background for the button push. — Cyclicz, Mar 01 '17 at 17:22

score 3 · Accepted Answer · answered Mar 02 '17 at 02:31

A simple code to open new tab on click some button. Try to use it on your extension.

manifest.json:

{
  "name": "Test",
  "version": "1.1",
  "description":
    "Description",
  "permissions": [
    "notifications",
    "fontSettings"
  ],
  "options_page": "options.html",
  "manifest_version": 2
}

option.html:

<!doctype html>
<html>
  <head>
    <title>Demo</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="options.js"></script>
  </head>
  <body>
    <input type="button" id="btnOpenNewTab" value="Click to open new tab"/>
  </body>
</html>

option.js:

window.addEventListener('DOMContentLoaded', function() {
    // your button here
    var link = document.getElementById('btnOpenNewTab');
    // onClick's logic below:
    link.addEventListener('click', function() {
        var newURL = "http://stackoverflow.com/";
        chrome.tabs.create({ url: newURL });
    });
});

Thank you very much, Rio, for helping me figure this out, this works seamlessly and will be perfect in helping me to move forward. — Cyclicz, Mar 05 '17 at 23:21

score 0 · Answer 2 · answered Mar 01 '17 at 03:06

0

You use this source code for your popup's button

window.opener.open("http://www.google.com/");

answered Mar 01 '17 at 03:06

Chien_Khmt

257
2
8

I appreciate the help you have given me, although the source code you have provided I do believe is used to open a new window, not a new tab. – Cyclicz Mar 01 '17 at 17:27
I was also looking into this post here: http://stackoverflow.com/questions/4907843/open-a-url-in-a-new-tab-and-not-a-new-window-using-javascript?rq=1 which states that there may be no way to open a link in a new tab in javascript and that its all browser preference. – Cyclicz Mar 01 '17 at 17:38

Chrome extension: How to open a specified link in a new tab by clicking a button in the html popup?

2 Answers2