Last Updated: February 16, 2016

How to create google chrome extension in 3 simple steps?

Description: In this post I'm gonna show you 3 simple steps to create your own google chrome extension.You can simply follow the steps with tips and note listed in between the post.

So lets get started.




Step 1: Create a folder namely('chrome_extension_demo') with 4 files in it index.html, main.js, manifest.json & extension.css.

Step 2: Lets add code into above files.
Tip: you can simply open the folder in any editor like(Sublime or Notepad++ for ease to write code)

  • index.html(contains our basic html code with few buttons on it)

<html>
<head>
 <title>Code2Concept extension demo</title>
 <script src="main.js"></script>
 <link rel="stylesheet" type="text/css" href="extension.css">
</head>
<body background="bg.png">
 <h1 align="center" id="code2concept"><a href=""><font color="white">Code2Concept</font></a></h1>
 <center>
  <div class="buttonContainer">
   <div>
    <button id="home" class="button">Home</button>
    <br/>
    <br/>
   </div>
   <div >
    <button id="twitter" class="button">Twitter</button>
    <br/>
    <br/>
   </div>
   <div>
    <button id="my_linkedin" class="button">My LinkedIn</button>
    <br/>
    <br/>
   </div>
   <div>
    <button id="stackoverflow" class="button">Stackoverflow</button>
    <br/>
   </div>
  </div>
  <hr/>
  <h5> <font color="white">This is the demo to create google chrome extension.</font></h5>
 </center>
</body>
</html>



  • manifest.json(simple json file which is needed by chrome to add extension)
{
  "manifest_version": 2,

  "name": "Code2Concept extension demo",
  "description": "This is the Code2Concept extension to demostrate chrome extension",
  "version": "1.0",

  "background":{
  "scripts": ["main.js"]
  },
  
  "browser_action": {
   "default_icon": "icon.png",
   "default_popup": "index.html"
  },
  "permissions": [
   "activeTab"
   ]
}

  • main.js(javascript code to add listener to our buttons)
document.addEventListener('DOMContentLoaded', function() {

 //home
  var home = document.getElementById('home');
  home.addEventListener('click', function() { 
    openUrl('http://bit.ly/1LqS9ku');
  }, false);

   //twitter
  var twitter = document.getElementById('twitter');
  twitter.addEventListener('click', function(){
    openUrl('http://bit.ly/20XuV1K');
  }, false)

  //stackoverflow.
  var stackoverflow = document.getElementById('stackoverflow');
  stackoverflow.addEventListener('click', function(){
   openUrl('http://bit.ly/1olt4D5');
  }, false)

//my linkedIn public dir.
  var my_linkedin = document.getElementById('my_linkedin');
  my_linkedin.addEventListener('click', function(){
   openUrl('http://bit.ly/1Tn6BBJ');
  }, false)


  //open url function in new tab
  function openUrl(newURL) {
    chrome.tabs.create({ url: newURL});
  }

}, false);



  • extension.css(css for buttons)
.button {
 border: 1px solid #13cbbb;
    border-radius: 3px;
    color: #FFFFFF;
    display: inline-block;
    float: center;
    font-size: 12px;
    margin-right: 3.2%;
    background-color: #13cbbb;
    padding: 7px 4.0%;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}
.button:hover {
 background-color:#13cbbb;
 opacity: 0.7;
}
.button:active {
 position:relative;
 top:1px;
}

.buttonContainer{
    width: 160px;
}

Note: You can download bg.png from here  and  icon.png  from here and place in the folder created in step 1:




Step 3: The most important step is how to add our code in chrome browser. Open chrome settings from hamburger icon on the right of  browser. Settings --> extensions --> load unpacked extension(select your folder created instep 1) --> fig.1


Chrome extension code2concept

Finally you'll see the your extension add to the chrome as shown in fig.2.
Chrome extension
fig.2

  • If you find some issue implementing simply download and follow step 3.

  • To upload on chrome web store go here since we have developed this into developer mode.

Bingo!!! you have created your first chrome extension successfully.

81 comments :

  1. Replies
    1. IEEE Final Year projects Project Centers in Chennai are consistently sought after. Final Year Students Projects take a shot at them to improve their aptitudes. IEEE Final Year project centers ground for all fragments of CSE & IT engineers hoping to assemble.Final Year Projects for CSE

      Spring Framework has already made serious inroads as an integrated technology stack for building user-facing applications. Spring Framework Corporate TRaining .

      Specifically, Spring Framework provides various tasks are geared around preparing data for further analysis and visualization. Spring Training in Chennai

      The Angular Training covers a wide range of topics including Angular Directives, Angular Services, and Angular programmability.Angular Training

      Delete
  2. Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained! Buy Pinterest Followers

    ReplyDelete
  3. Thank you so much for this nice information. Hope so many people will get aware of this and useful as well. And please keep update like this.

    Big Data Consulting Services

    Data Lake Solutions

    Advanced Analytics

    Full Stack Development Solutions

    ReplyDelete
  4. Data migration services offered by your company have helped in passing all the series of functions entirely, which are necessary for data transformation.

    ReplyDelete
  5. Google cloud big data services should understand the need of Data, and they should work to build more appropriate services to meet the requirements of their clients.

    ReplyDelete
  6. I recently came across your blog and read along. I thought I would leave my first comment. I don’t know what to say except what I’ve enjoyed reading. Great blog I will be visiting this blog very easily. Buy Negative Google Reviews

    ReplyDelete
  7. hi, your site is fantastic. I truly do many thanks for operate web design new york

    ReplyDelete
  8. This is very interesting, You are a very professional blogger. I’ve joined your rss feed and look ahead to in search of more of your wonderful post. Also, I’ve shared your website in my social networks! new york web designs

    ReplyDelete
  9. Amaze! Thank you! I constantly wished to produce in my internet site a thing like that. Can I take element of the publish to my blog? san francisco brand agency

    ReplyDelete
  10. The Texas Transportation Institute has estimated the cost of traffic congestion at USD 87.2 billion in wasted fuel and lost productivity. artificial intelligence courses in hyderabad

    ReplyDelete
  11. This is always happy to know about Salesforce training in Gurgaon whose certification program helps many to get certificed. I strongly urge you to join now in Salesforce Training in Hyderabad | Course Price | Training institute and enroll for free demo at Salesforce Training in Bangalore | Course Certification Cost and Job Placement Assistance . I have gone through this Salesforce Certification Training. Why done you enroll for a free demo at Salesforce training institutes in Chennai [updated] | Course Price

    ReplyDelete
  12. Step-by-Step create website Easy to Customize, Publish Now! Custom domain name. Multiple payment methods. Free multilingual fonts. 24/7 support center. 1000s of free images. Top industry hosting. 100s of Apps. Easy-to-add blog. Mobile optimized. Create Website

    ReplyDelete
  13. Hey, great blog, but I don’t understand how to add your site in my reader. Can you Help me please?
    Tropic Diva

    ReplyDelete
  14. You have done a great job. I will definitely dig it and personally recommend to my friends. I am confident they will be benefited from this site.
    Tropic Diva

    ReplyDelete
  15. This program is viewed as a serious application however it is helpless against getting defiled or harmed. Clients have vouched for seeing many Chrome blunder messages. Brighter Guide homepage

    ReplyDelete
  16. Hey, great blog, but I don’t understand how to add your site in my reader. Can you Help me please?
    bandar slot terpercaya

    ReplyDelete
  17. When you use a genuine service, you will be able to provide instructions, share materials and choose the formatting style. cfa pdf

    ReplyDelete

  18. Firstly talking about the Blog it is providing the great information providing by you . Thanks for that .Hope More articles from you . Next i want to share some information about Salesforce training in Banglore .

    ReplyDelete



  19. Firstly talking about the Blog it is providing the great information providing by you . Thanks for that .Hope More articles from you . Next i want to share some Information about Salesforce training in Hyderabad .

    ReplyDelete
  20. Thanks for the post. It was very interesting and meaningful. I really appreciate it! Keep updating stuff like this.
    Data Science
    Selenium
    ETL Testing
    AWS
    Python Online Classes

    ReplyDelete
  21. I recently found many useful information in your website especially this blog page.nice informastion. Thanks for sharing .
    Buy Negative Google Reviews

    ReplyDelete
  22. I recently found many useful information in your website especially this blog page. Among the lots of comments on your articles. Thanks for sharing. BUY GOOGLE REVIEWS

    ReplyDelete
  23. Great article! Among the lots of comments on your articles. Thanks for sharing.
    Get Facebook reviews

    ReplyDelete
  24. I’m going to read this. I’ll be sure to come back. thanks for sharing. and also This article gives the light in which we can observe the reality. this is very nice one and gives indepth information. thanks for this nice article... google meet extension

    ReplyDelete
  25. Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon. Big thanks for the useful info. google meet extension

    ReplyDelete
  26. Thank you because you have been willing to share information with us. we will always appreciate all you have done here because I know you are very concerned with our. joker auto

    ReplyDelete
  27. This is my first time i visit here. I found so many interesting stuff in your blog especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here keep up the good work https://hostinglelo.in/

    ReplyDelete
  28. Wow! Such an amazing and helpful post this is. I really really love it. It's so good and so awesome. I am just amazed. I hope that you continue to do your work like this in the future also google ads tricks

    ReplyDelete
  29. I’m going to read this. I’ll be sure to come back. thanks for sharing. and also This article gives the light in which we can observe the reality. this is very nice one and gives indepth information. thanks for this nice article... agencje rekrutacyjne it

    ReplyDelete
  30. I recently found many useful information in your website especially this blog page.nice informastion. Thanks for sharing .
    Buy US Verified PayPal Accounts

    ReplyDelete
  31. Friend, this web site might be fabolous, i just like it. บาคาร่าออนไลน์

    ReplyDelete
  32. Thank you because you have been willing to share information with us. we will always appreciate all you have done here because I know you are very concerned with our. buy google reviews

    ReplyDelete
  33. Discovering pictures to remember for your digital book is simpler than any time in recent memory with a straightforward public domain search by means of Google since it's pressed brimming with them!
    https://onohosting.com/

    ReplyDelete
  34. Plenty of different types of hosting services are available in the market now. You can find dedicated, free, reseller, shared and many other types of hosting. https://onohosting.com/

    ReplyDelete
  35. SSD hosting is faster and more reliable than HDD. Here is an explanation of why that is the case, and a simple guide on how to choose the best host for your WordPress website or blog. https://hostinglelo.in/

    ReplyDelete
  36. Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon. Big thanks for the useful info. dark web links

    ReplyDelete
  37. office cleaning edinburgh I precisely needed to thank you so much yet again. I do not know the things I would’ve taken care of without these secrets contributed by you regarding this problem. It seemed to be a very frightful crisis for me, but encountering a new well-written tactic you processed it forced me to jump with contentment. Now i am happier for the work and hope you are aware of an amazing job you happen to be getting into educating people through your web blog. Probably you haven’t come across any of us.

    ReplyDelete
  38. lezaalava I precisely needed to thank you so much yet again. I do not know the things I would’ve taken care of without these secrets contributed by you regarding this problem. It seemed to be a very frightful crisis for me, but encountering a new well-written tactic you processed it forced me to jump with contentment. Now i am happier for the work and hope you are aware of an amazing job you happen to be getting into educating people through your web blog. Probably you haven’t come across any of us.

    ReplyDelete
  39. back pain I’m not that much of a internet reader to be honest but your blogs really nice, keep it up! I’ll go ahead and bookmark your site to come back in the future. All the best

    ReplyDelete
  40. Home depot health check I precisely needed to thank you so much yet again. I do not know the things I would’ve taken care of without these secrets contributed by you regarding this problem. It seemed to be a very frightful crisis for me, but encountering a new well-written tactic you processed it forced me to jump with contentment. Now i am happier for the work and hope you are aware of an amazing job you happen to be getting into educating people through your web blog. Probably you haven’t come across any of us.

    ReplyDelete
  41. online casino real money I precisely needed to thank you so much yet again. I do not know the things I would’ve taken care of without these secrets contributed by you regarding this problem. It seemed to be a very frightful crisis for me, but encountering a new well-written tactic you processed it forced me to jump with contentment. Now i am happier for the work and hope you are aware of an amazing job you happen to be getting into educating people through your web blog. Probably you haven’t come across any of us.

    ReplyDelete
  42. online casino real money canada His or her shape of unrealistic tats were initially threatening. Lindsay utilized gun first basic, whereas this girl snuck outside by printer ink dog pen. I used absolutely sure the all truly on the shade, with the tattoo can be taken from the body shape. make an own temporary tattoo

    ReplyDelete
  43. I read your article , your content is well and I like it Thank you For this.Buy Verified PayPal Account

    ReplyDelete
  44. You are the only person whom I follow for Blogs and Articles. You deliver your message and positivity in such a Great manner that it is easy to understand. Thank You and Keep it up.Buy Verified PayPal Accounts

    ReplyDelete
  45. Excellent Blog! I would like to thank for the efforts you have made in writing this post. I really like your writing style, wonderful information, thank you for posting. Quality content is what always gets the visitors coming.Buy Facebook Ads Accounts

    ReplyDelete
  46. Buy Verified PayPal Account PayPal is the main means of transferring money worldwide. You can quickly transfer money from one place to another in a very short time. No problem. PayPal account is one of the most popular business in the world. PayPal is a very popular means of payment system. People become helpless without PayPal. PayPal has given the opportunity to transact money from one place to another all over the world. PayPal is a very popular payment system that allows you to easily transfer money from one place to another.

    ReplyDelete
  47. I precisely needed to thank you so much yet again. I do not know the things I would’ve taken care of without these secrets contributed by you regarding this problem. It seemed to be a very frightful crisis for me, but encountering a new well-written tactic you processed it forced me to jump with contentment. Now i am happier for the work and hope you are aware of an amazing job you happen to be getting into educating people through your web blog. Probably you haven’t come across any of us. covens in maryland

    ReplyDelete
  48. Excellent Blog! I would like to thank for the efforts you have made in writing this post. I really like your writing style, wonderful information, thank you for posting. Quality content is what always gets the visitors coming. https://topromoter.com/service/buy-facebook-ads-accounts/

    ReplyDelete
  49. I precisely needed to thank you so much yet again. I do not know the things I would’ve taken care of without these secrets contributed by you regarding this problem. It seemed to be a very frightful crisis for me, but encountering a new well-written tactic you processed it forced me to jump with contentment. Now i am happier for the work and hope you are aware of an amazing job you happen to be getting into educating people through your web blog. Probably you haven’t come across any of us. บาคาร่า

    ReplyDelete
  50. Choose from our great range of the finest Kilt Jackets. Browse our collection of Evening, Day and Argyll Kilt Jackets. Buy your Kilt Jacket online now.Utility kilts

    ReplyDelete
  51. Good job on this article! I really like how you presented your facts and how you made it interesting and easy to understand. Thank you. คาสิโน

    ReplyDelete
  52. https://www.coderconsole.com/2016/02/how-to-create-google-chrome-extension.html

    ReplyDelete
  53. I read your article.very good and informative content.thanks for itKilt for sale

    ReplyDelete
  54. Nice to be visiting your blog once more, it continues to be months for me. Nicely this post that i’ve been waited for so lengthy. I want this article to total my assignment in the university, and it has same topic together with your post. Thanks, terrific share. baccarat

    ReplyDelete
  55. Shop incredible deals at Element вейпове, a progressive online retail establishment serving the vaping community with mod kits



    ReplyDelete
  56. Buy your Man of the Match Trophies from the UK's largest online retailer of trophies, player of the match trophy.

    ReplyDelete
  57. Best go karting st albansIn St Albans, Hertfordshire · TeamSport Indoor Karting Watford · TeamSport Indoor Karting Dunstable

    ReplyDelete
  58. The number one retail store of hold fragrances in Pakistan, stockpiling a strong brand portfolio such as Chanel, Dior, John Ford, and Paco Rabanne.alfaris perfume price in pakistan

    ReplyDelete
  59. Couvreur 95 c'est une Entreprise familiale depuis 30 ans, spécialiste des couvertures toitures.Nous connaissons tous les types de toitures et notre expérience fait de nous une référence dans le métier.

    ReplyDelete
  60. I read your essay and found it to be well-written and interesting. Thank you for this.Buy Verified PayPal Account

    ReplyDelete
  61. Learn to build powerful models to solve business problems by generating useful insights and discover the various scientific processes and methods used to transform the information available in huge datasets into meaningful results. master all the tools and techniques in Data Science and gain domain-specific knowledge which will help you to add more value to your profile. Sign up for the Data Science course in Bangalore with Placements and multiple your chances of working across all industries and job functions. data science course in chennai with placement

    ReplyDelete
  62. Your essay was well-written and entertaining, and I liked reading it. Thank you once again.Buy Verified PayPal Account

    ReplyDelete
  63. I read your post and found it to be well-written and interesting.Buy Verified PayPal Accounts

    ReplyDelete
  64. Couvreur Marseille, c'est un artisan depuis plus de 30 ans avec une extrême attention et un savoir-faire que vous retrouver uniquement avec un Couvreur Zingueur expérimenté comme lui.beautour patrice

    ReplyDelete

Your comments are valuable for us !!!