How to Create a Chrome Extension for Your Website
Download a HTML editor., Create your extension files., Fill up your manifest.json., Fill up your popup.html., Create popup.js., Make your popup look good., Create an icon to represent your extension., Put all these files in a folder.
Step-by-Step Guide
-
Step 1: Download a HTML editor.
Notepad++ is a free, open-source option for windows,and Komodo Edit for Mac., Open your text editor and create four new files and name them manifest.json, popup.html, popup.css, popup.js.
Leave them blank for now. , In the code above, fill in the name, description and default title fields according to what you would like to call your extension and how you would describe it. , Add your extension's title in the title field in the above code.
This will create a webpage that will be attached to your extension's icon in the browser.
When the icon is clicked, this popup shows up.
Now we fill up this webpage with content from your RSS feed. , Add the url to your RSS feed in place of 'myfeedurl' above. , Add the code above to your popup.css file.
This will create a basic look for your popup.
You can always add a lot more style to it as per your requirements. , You will need to design png images of four dimensions
- 128x128, 64x64, 48x48 and 26x26.
Name them
128.png,
64.png,
48.png and icon.png respectively. , Zip them and upload to the Chrome webstore. -
Step 2: Create your extension files.
-
Step 3: Fill up your manifest.json.
-
Step 4: Fill up your popup.html.
-
Step 5: Create popup.js.
-
Step 6: Make your popup look good.
-
Step 7: Create an icon to represent your extension.
-
Step 8: Put all these files in a folder.
Detailed Guide
Notepad++ is a free, open-source option for windows,and Komodo Edit for Mac., Open your text editor and create four new files and name them manifest.json, popup.html, popup.css, popup.js.
Leave them blank for now. , In the code above, fill in the name, description and default title fields according to what you would like to call your extension and how you would describe it. , Add your extension's title in the title field in the above code.
This will create a webpage that will be attached to your extension's icon in the browser.
When the icon is clicked, this popup shows up.
Now we fill up this webpage with content from your RSS feed. , Add the url to your RSS feed in place of 'myfeedurl' above. , Add the code above to your popup.css file.
This will create a basic look for your popup.
You can always add a lot more style to it as per your requirements. , You will need to design png images of four dimensions
- 128x128, 64x64, 48x48 and 26x26.
Name them
128.png,
64.png,
48.png and icon.png respectively. , Zip them and upload to the Chrome webstore.
About the Author
Raymond White
Professional writer focused on creating easy-to-follow crafts tutorials.
Rate This Guide
How helpful was this guide? Click to rate: