How to develop a simple chrome extension that navigate to a website

Question

I need to create a simple chrome extension which when clicked have to navigate to that website.I have been searching long.But I couldn't find out.Please help me. Here is my manifest.json file

{
 "name": "My First Extension",
 "version": "1.0",
 "description": "The first extension that I made.",
    "manifest_version":2,
     "browser_action": {
   "default_icon": "icon_128.png"
 },
 "background_page": "background.html",
 "permissions": [
  "tabs"
]
}

this is my background.html

   <script>
  chrome.browserAction.onClicked.addListener(function(tab) {
     chrome.tabs.create({'url': "http://calpinemate.com"});
   </script>

I am just trying to navigate into my site.But it is not working.Anyone please help me.I only have these two files in my directory and an image icon_128.png.Please help me

Did you try this link? You may be able to modify it to your needs. Or take the basic premises of it and try to implement it. http://stackoverflow.com/questions/8183696/chrome-extension-open-tab-go-to-url-fill-form-and-submit-form — Kpt.Khaos, Nov 22 '13 at 04:32
@user3016912: BTW, I updated my answer with a demonstration of how to change the extension icon. — gkalpak, Nov 22 '13 at 08:14

score 2 · Accepted Answer · answered Nov 22 '13 at 05:50

2

enter image description here

background_page is no longer supported in manifest_version 2. Instead use the new format. You can also remove the tabs permissions value since chrome.tabs.create doesn't require it.

{
    "name": "My First Extension",
    "version": "1.0",
    "description": "The first extension that I made.",
    "manifest_version": 2,
    "browser_action": {
        "default_icon": "icon_128.png"
    },
    "background": {
        "scripts": ["background.js"]
    }
}

Move background.html to background.js, and remove the <script></script> tags.

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

answered Nov 22 '13 at 05:50

abraham

46,583
10
100
152

thank you abraham.I don't know much about adding extensions..Thank you so much for correcting me. – user3016912 Nov 22 '13 at 05:53
I need to clarify some more doubts.PLease help me.Now it have been navigated to my website.It is a login page.When the user logs on to it, the extension icon should appear green and when the user logs out,it should appear red.how can I do it?Please help me – user3016912 Nov 22 '13 at 05:57
Look at [sending messages from web pages](https://developer.chrome.com/extensions/messaging.html#external-webpage) – abraham Nov 22 '13 at 06:11
should i use cookies or session ?? – user3016912 Nov 22 '13 at 06:40

gkalpak · Answer 2 · 2013-11-22T08:09:52.583

Maybe it is because you are missing theclosibg }) in your background page.
Besides, you don't need any permissions for what you want and it is recommended to use anon-persistent background page (a.k.a. event page).

E.g.:

background.js:

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

manifest.json:

{
    "manifest_version": 2,
    "name":        "Test Extension",
    "description": "...",
    "version":     "0.0",

    "background": {
        "persistent": false,
        "scripts": ["background.js"]
    },

    "browser_action": {
        "default_title": "Test Extension"
        "default_icon": "icon_128.png"
    }
}

BTW, since you seem to be interested in changing the extension icon, you can take a look into chrome.browserAction.setIcon().
Below is an example that toggles the extension icon when the user clicks on the browser-action (you can adapt it according to your specific needs).

background.js:

var icons = ["red.png", "green.png"];

chrome.browserAction.onClicked.addListener(function(tab) {
    var iconIdx = localStorage.getItem("iconIdx");
    var newIdx = iconIdx ? (parseInt(iconIdx) + 1) % 2 : 1;
    chrome.browserAction.setIcon({ path: icons[newIdx] });
    localStorage.setItem("iconIdx", newIdx);
});

How to develop a simple chrome extension that navigate to a website

2 Answers2