CODEWITHSUNDEEP
google-chrome-extension
user704739
user704739

Reputation: 131

Creating a Chrome Extension to open a link in a new tab

I would like to create a simple chrome extension that when clicked opens a url in a new browser tab. This is what I have for the manifest.json

{
    "name": "Sprout Social",
    "description": "Shortcut to Sprout Social",
    "permissions": [
        "tabs"
    ],
    "icons": {
        "128": "128.png"
    },
    "launch": {
        "web_url": "http://www.sproutsocial.com"
    }
}

Any help would be great.

Upvotes: 13

Views: 22044

Answers (3)

IvanRF
IvanRF

Reputation: 7265

Simpler solution, you do not need HTML.

Add this to manifest.json

"browser_action": {
    "default_icon": "images/icon38.png",
    "default_title": "Your title"
},
"background": {
    "scripts": ["background.js"],
    "persistent": false
}

Create the background.js file, with this code:

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.create({ url: "http://www.yoursite.com" });
});

Note: I do not add "permissions": ["tabs"] in manifest.json since it adds the Permission Warning: "Read your browsing history" and that can be confusing to the user. The extension still works.

Upvotes: 5

Alejandro Silvestri
Alejandro Silvestri

Reputation: 3784

Ok, first of all, manifest.json (not jason) has a strict structure, you can't mess with it.

https://developer.chrome.com/extensions/manifest.html

You have to create a Browser Action extension, that means your extension will have a button near the tool button.

https://developer.chrome.com/extensions/browserAction.html

You don't need any popup.html, you can skip that part. You need to write your background page, many people name it background.html This HTML file will have your code, in this form:

<html><head><script> your script here (use as many lines as you want)  </script></head>/html>

This HTML won't never show up.

And the code can be anything you want, like the code in the other answer:

chrome.browserAction.onClicked.addListener(function() {
    chrome.tabs.create({'url': "http://www.sproutsocial.com"});
});

And that's it.

Upvotes: 14

FlavorScape
FlavorScape

Reputation: 14319

I think the method you want to define in your schema is

  chrome.tabs.create

 chrome.browserAction.onClicked.addListener(function() {

      chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}, function(tab) {

      });

 });

Upvotes: 2

Related Questions