Tutorial: How to make a simple pop-up extension for chrome .

Helpful tutorials about how to create Chrome Extensions
6 posts Page 1 of 1
Contributors
User avatar
Danny
VIP - Donator
VIP - Donator
Posts: 621
Joined: Sat Oct 30, 2010 8:21 pm

Hello people,

I decided to make a how to make an google chrome extension tutorial.

we are going to make a hello world popup extension.
first you need to make the hello world page with html, javascript, php or what else you like.
I choose the html version and call it popup.html:

Image

the source I used:
Code: Select all
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Hello world</title>
    <style type="text/css">
a {color:#009DFF}
body {background-color:#E6E6E6;font-family: "Century Gothic",Arial, Helvetica, Sans-Serif;
   font-style: normal;
   font-weight: normal;
   font-size: 13px;
    min-width:300px;}
h1 { font-size:24px;#E6E6E6;font-family: "Century Gothic",Arial, Helvetica, Sans-Serif;
   font-style: normal;
   font-weight: normal;}
</style>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
after that you need to make the manifest.json
that includes the function of the extension but also the description and version.
it will be look like this:

Image
Code: Select all
{
  "name": "ExTENSION NAME",
  "description": "DESCRIPTION.",
  "version": "1",
  "icons": { "32": "icon.png" },
  "permissions": [
    "tabs", "http://*/*", "https://*/*"
  ],
  "browser_action": {
     "default_icon": "icon.png",
    "popup": "popup.html"
  }
}
after you're done with that you need to save it as manifest.json <- very important otherwise it won't work

Image

you think you are done, don't you? well we are almost done!
every extension need an icon, in this tutorial we will call it icon.png.
this is a quick draw in Ms paint, you can do it much beter if you take more time.

Image

so, now you are finally done with the code work etc. But you need to pack it as a .crx file.
first open google chrome -> then go to extra's -> go to extensions -> and turn the development mode on.
you will see this:

Image

click on the second button I have the dutch version so it will say extensie inpakken but I don't know how it is in English.
it ask to upload the map we're we have those files, so we click on browse and select the map.

Image

after that google chrome have packed the files into a .crx file

Image

drag it into the chrome window and you are done!
this is the result!

Image

I hope this tutorial will help you a bit with creating chrome extensions..
~Danny
User avatar
Dummy1912
VIP - Donator
VIP - Donator
Posts: 1969
Joined: Sat Aug 21, 2010 2:17 pm

nice going mate
didn't known you can do this.
maybe i can use it someday.
so how can you do it so other people can import this in there own explorer
to known something about your website.
visit us on:


http://www.softpedia.com/get/System/Lau ... -Run.shtml
Check it out ! http://www.softpedia.com/publisher/I-A- ... 90017.html
Check it out ! http://www.softpedia.com/get/Desktop-En ... lock.shtml
User avatar
Danny
VIP - Donator
VIP - Donator
Posts: 621
Joined: Sat Oct 30, 2010 8:21 pm

guess people dont like this tutorial :/
User avatar
Snyper345
VIP - Donator
VIP - Donator
Posts: 471
Joined: Mon Nov 01, 2010 1:53 am

Ima try this out :P i dont think its that they dont like it, its just no ones really making chrome extentions on here but ima try :P
Image
Image
User avatar
Codex
Coding God
Coding God
Posts: 2028
Joined: Wed Mar 31, 2010 5:50 pm

And this is what you can basically turn it into: viewtopic.php?f=36&t=4573

Image
We shall let the revolution begin.. the revolution for freedom, freedom against censorship. We shall fight in the fields and in the streets, we shall fight in the hills; we shall never surrender
User avatar
Danny
VIP - Donator
VIP - Donator
Posts: 621
Joined: Sat Oct 30, 2010 8:21 pm

I didn't knew that topic
6 posts Page 1 of 1
Return to “Tutorials”