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
Quick Profile
Information
Posts: 621
Joined: Sat Oct 30, 2010 8:21 pm View Full Profile
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:
that includes the function of the extension but also the description and version.
it will be look like this:
![Image]()
![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
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:
the source I used:
Code: Select all
after that you need to make the manifest.json<?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>
that includes the function of the extension but also the description and version.
it will be look like this:
Code: Select all
after you're done with that you need to save it as manifest.json <- very important otherwise it won't work{
"name": "ExTENSION NAME",
"description": "DESCRIPTION.",
"version": "1",
"icons": { "32": "icon.png" },
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
}
}
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.
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:
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.
after that google chrome have packed the files into a .crx file
drag it into the chrome window and you are done!
this is the result!
I hope this tutorial will help you a bit with creating chrome extensions..
~Danny
Quick Profile
Information
Posts: 1969
Joined: Sat Aug 21, 2010 2:17 pm View Full Profile
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.
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
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
Quick Profile
Information
Posts: 621
Joined: Sat Oct 30, 2010 8:21 pm View Full Profile
guess people dont like this tutorial :/
Quick Profile
Information
Posts: 471
Joined: Mon Nov 01, 2010 1:53 am View Full Profile
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
Quick Profile
Information
Posts: 2028
Joined: Wed Mar 31, 2010 5:50 pm View Full Profile
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
Quick Profile
Information
Posts: 621
Joined: Sat Oct 30, 2010 8:21 pm View Full Profile
I didn't knew that topic
6 posts
Page 1 of 1
Copyright Information
Copyright © Codenstuff.com 2020 - 2023