Recently , I published - subject Multiple Websites , a simple-minded chrome wing that open all your favorite websites with a undivided click . And surprising make a chrome extension is sluttish than I thought . All you take is basic understanding of HTML and JavaScript .
Google has a detail documentation on how to work up a chrome extension from scratch . But if you are reckon for a quick overview , then this templet will help .
What is chrome telephone extension ?
It is a little computer program that add an extra functionality to your chrome browser app . unremarkably , chrome extension seem in the right side of your omnibox and shows a popup when clicked .
What should you know before we start ?
If you could write a web Thomas Nelson Page , you could make a chrome denotation under 5 proceedings . However , to make something useful , you should have sex the staple of HTML , CSS , JavaScript and how to use chrome ’s API . Though id est easy .
How much time does it take ?
It can take anything from few 60 minutes to few days , depend on the complexity of your extension . The chrome extension I made ( Open Multiple Websites ) took me few hour , start out from the scratch .
What is a chrome extension made up of ?
A dewy-eyed chrome extension comprises of a manifest single file , few HTML / Cs files , few javascript files , and some png images for screenshots and icons . You put all these files in a zip folder and upload it to chrome store .
A simple chrome extension consist of four files :
1.Manifest.json : Consider it as an index of a book . This evident file recount chromium-plate the contingent of your elongation , like its name , description , rendering routine etc . It is written in JSON notation – a simple language that can be pick up under 5 minutes .
2.HTML filedefines the layout of your page . Usually , when you compact the extension button , you see a popup . Right ? This popup is written in HTML and you may also add together some CSS to make it look better .
3.Icon(preferably a png ) establish identity to your extension . It ’s like how your annex count . If you do not add an image then chrome will expend a default icon .
4.Javascriptfiledoes all the magic . It hold the main logic that secern the web web browser what to do when the user dawn on the extension .
How to make a Chrome Extension
1 Identify the problem
Find out what problem you want to lick with your chrome extension .
For instance , I need to spread out my frequently impose web site with a single clink . But I could n’t find any relevant elongation which does that . So I decide to save one . likewise , it ’s good if you have your own job . This will keep you motivated .
2 drop a line code
Once you figure out the trouble , its time to write some codification . Here , we will canvas the code used in chrome extension . plainly it will different for your extension , this will give you a good thought .
So give your best-loved textbook editor , make a young brochure . permit ’s call it ‘ chrome file name extension ’ . In this booklet , we will sum up 4 files i.e. manifest.json , HTML single file , icon.png and the javascript file cabinet .
So let ’s see the codification of each one of them .
2.1Manifest.json
{
Apparently , chrome uses version ‘ 2 ’ . This is set . Next is the name , description and translation of your annexe . To empathize browser app natural action and permission , you will have to go through the corroboration . However , you could simulate glue the above code and modify values accordingly .
2.2popup.html
Here is the simple HTML for popup . It has a textbook field where the user will enter all the URLs and a submit clitoris . observation that we have also used i d rag here so that we can access these factor from anywhere .
2.3icon.png
utilise photoshop or this online tool to create a custom png icon for your telephone extension . 32 * 32 or 64 * 64 pixel are recommend . I made this one .
3 bring out the extension phone
To try your extension in chrome topically , turn on developer way on chrome propagation page , then drag and drop off this ‘ chrome extension ’ there .
Once you are done troubleshooting , you may upload your extension to chromium-plate depot so that everyone can see it .
To do this head over tochrome developers dashboardand produce an account . You will have to give one - time $ 5 fees to chromium-plate . Then upload your chrome prolongation and participate details and few screenshots . And that ’s it . Hit the publish button and your extension will be bouncy .
