CODEWITHSUNDEEP
google-chromegoogle-chrome-extension
Ron
Ron

Reputation: 23

Chrome extension - start point

Where I can find an example code of chrome extension which shows the current address in a popup?

Thanks. Ron

Upvotes: 2

Views: 980

Answers (3)

Christian
Christian

Reputation: 2200

It looks like all these answers are outdated so here is a manifest 2 example. You will need jQuery for this example. I have included all the files in a gist.

manifest.json

{
  "manifest_version": 2,

  "name": "Hello World",
  "version": "1.0",

  "author": "Christian Juth",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },

  "permissions": [
    "activeTab"
  ]
}

popup.html

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

    <span id="address"></span>

  </body>
</html>

popup.js

$(document).ready(function(){

  //define query
  var query = { active: true, currentWindow: true };

  //query tabs
  chrome.tabs.query(query, function (tabs) {
    currentAddress = tabs[0].url;
    $('#address').text(currentAddress);
  });

});

Upvotes: 0

martin
martin

Reputation: 96899

Try this code in your popup, it works for me (Google Chrome 14-beta):

chrome.windows.getCurrent(function(window) {
    chrome.tabs.getSelected(window.id, function(tab) {
        console.log(tab);
        console.log(tab.url); // url of the current tab
    });
});

For more information check: http://code.google.com/chrome/extensions/tabs.html#method-getSelected

Upvotes: 1

neocotic
neocotic

Reputation: 2131

Documentation: http://code.google.com/chrome/extensions/getstarted.html
Samples: http://code.google.com/chrome/extensions/samples.html

This is the official documentation and sample code for Google Chrome extensions. In your manifest you want to declare a popup for either a page or browser action (whichever best suites your extension). In your popup HTML file you probably want something like the following;

<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript">
            function initPopup() {
                chrome.tabs.getSelected(null, function (tab) {
                    document.body.appendChild(document.createTextNode(tab.url));
                });
            }
        </script>
    </head>
    <body onload="initPopup();"></body>
</html>

This very simply appends the URL of the selected tab to the body of the popup.

Your manifest should look like the following;

{
    "name": "My First Extension",
    "version": "1.0",
    "description": "The first extension that I made.",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "permissions": [
        "tabs"
    ]
}

The file structure for this example is a single folder containing manifest.json, popup.html and icon.png.

On the Extensions page (chrome://extensions) you should click Load unpacked extension... and navigate to this folder. If you make any changes to the manifest be sure to click the Reload link to pick up these changes.

I hope this helps but I strongly suggest reading through the documentation I mentioned above to get a better understanding of what you're doing.

EDIT: Added missing null argument to code and included an example manifest and file structure based on additional information gathered from comments.

Upvotes: 1

Related Questions