Make your own Google Chrome Extension in just 5 minutes
We just recently discussed about Google Chrome Sorezki extension that helps you to monitor your website performance,Search Engine optimization(SEO),and every thing that you must know about your website.Now the question is that, can we make own working Google Chrome plugin , I searched a lot about this topic and at last I found one video tutorial from camerongray about How to making own working Google Chrome Extension .I am explaining you a step by step.
How to create working Google Chrome Extension:
Camerongray has explained about Making own Google Chrome Extension for en.mobile.wikipedia.org, so we will discuss about making an Google Chrome extension for the same topic to prevent you from any confusion.
First of all you need to create a folder with an name of your Google Chrome application with icon you wish to have for your plugin on Google Chrome browser.
If you don't know how to create folder for your Google chrome extension, you can download both the files online as per the instruction in this video provided here.
I am explaining you theoretically, you need to create 2 files first one is manifest.json file & second one is main.html.Remember the extension for both, from which one file has *.json extension and another one has *.htm extension both can be opened and edited in notepad file.
You can also make your *.json file your self, for that you need to open notepad.there paste the code given below and save it as manifest.json name.
You have done, now another file is remaining is main.html you can also create that file by pasting the following coding in your notepad file and save it as main.htm, you have done.
Now save both of that file with an icon you wish to have in your Google chrome extension and you have to play with the above coding.Just open the manifest.json file with notepad and there write your extension name (We are discuss about wikipedia, so write about mobile wikipedia there,however you can write different name also if you wish to make else).
EXTENSION NAME HERE must be replaced by your Google Chrome extension name.Now DESCRIPTION GOES HERE should be replaced by your application or Google Chrome extension description about which you are wishing to create your Google Chrome extension.
ICON FILENAME (including file extension) GOES HERE should be replaced by your icon if you wish to have icon for your Google Chrome extension.
Now save that manifest.json file and now it is turn for main.thml file.So open main.html file in notepad and create your application with that.
URL OF PAGE TO LOAD HERE should be replaced by url which should be displayed by clicking on your Google Chrome extension, here we are disscussiing about wikipedia so we will replace that with mobile.Wikipedia.org
width and height can also be maintained if you wish or you can change as per your wish.now save that file too.
Now the turn for running your Google Chrome extension in your own Google Chrome web-browser .For testing your Google Chrome extension is working or not , just open your Google Chrome and in address bar, just type chrome://extensions
It will load one page there you need to click on the developer mode and there select load unpacked extension from top left position of your browser.
![]()
Now select the folder which you have recently saved menifest file and main file with icon in it.It will load and you will see at the top right side or right side of your chrome web-browser that there is one new extension has been installed,if you have made an icon so that icon will also be appeared there.Just click on your icon and you will see running your own Google Chrome extension.
Related : Google updating Chrome for Apple's Mac OS X Lion
How to create working Google Chrome Extension:
Camerongray has explained about Making own Google Chrome Extension for en.mobile.wikipedia.org, so we will discuss about making an Google Chrome extension for the same topic to prevent you from any confusion.
First of all you need to create a folder with an name of your Google Chrome application with icon you wish to have for your plugin on Google Chrome browser.
If you don't know how to create folder for your Google chrome extension, you can download both the files online as per the instruction in this video provided here.
I am explaining you theoretically, you need to create 2 files first one is manifest.json file & second one is main.html.Remember the extension for both, from which one file has *.json extension and another one has *.htm extension both can be opened and edited in notepad file.
You can also make your *.json file your self, for that you need to open notepad.there paste the code given below and save it as manifest.json name.
{
"name": "EXTENSION NAME HERE",
"version": "1.0",
"description": "DESCRIPTION GOES HERE",
"browser_action": {
"default_icon": "ICON FILENAME (including file extension) GOES HERE",
"popup": "main.html"
}
}
"name": "EXTENSION NAME HERE",
"version": "1.0",
"description": "DESCRIPTION GOES HERE",
"browser_action": {
"default_icon": "ICON FILENAME (including file extension) GOES HERE",
"popup": "main.html"
}
}
You have done, now another file is remaining is main.html you can also create that file by pasting the following coding in your notepad file and save it as main.htm, you have done.
<html>
<body>
<!-- Please fill in the blanks below - This extension template was made by Cameron Gray - www.camerongray.me -->
<iframe src="URL OF PAGE TO LOAD HERE" width="WIDTH OF POPUP HERE (PIXELS)" height="HEIGHT OF POPUP HERE (PIXELS)" frameborder="0">
</iframe>
</body>
</html>
<body>
<!-- Please fill in the blanks below - This extension template was made by Cameron Gray - www.camerongray.me -->
<iframe src="URL OF PAGE TO LOAD HERE" width="WIDTH OF POPUP HERE (PIXELS)" height="HEIGHT OF POPUP HERE (PIXELS)" frameborder="0">
</iframe>
</body>
</html>
Now save both of that file with an icon you wish to have in your Google chrome extension and you have to play with the above coding.Just open the manifest.json file with notepad and there write your extension name (We are discuss about wikipedia, so write about mobile wikipedia there,however you can write different name also if you wish to make else).
EXTENSION NAME HERE must be replaced by your Google Chrome extension name.Now DESCRIPTION GOES HERE should be replaced by your application or Google Chrome extension description about which you are wishing to create your Google Chrome extension.
ICON FILENAME (including file extension) GOES HERE should be replaced by your icon if you wish to have icon for your Google Chrome extension.
Now save that manifest.json file and now it is turn for main.thml file.So open main.html file in notepad and create your application with that.
URL OF PAGE TO LOAD HERE should be replaced by url which should be displayed by clicking on your Google Chrome extension, here we are disscussiing about wikipedia so we will replace that with mobile.Wikipedia.org
width and height can also be maintained if you wish or you can change as per your wish.now save that file too.
Now the turn for running your Google Chrome extension in your own Google Chrome web-browser .For testing your Google Chrome extension is working or not , just open your Google Chrome and in address bar, just type chrome://extensions
It will load one page there you need to click on the developer mode and there select load unpacked extension from top left position of your browser.
Related : Google updating Chrome for Apple's Mac OS X Lion
Loading
