How to Create a Chrome Extension for Your Website

Creating an extension that pulls the RSS feed of your blog or website and displays it right from the browser can help boost website traffic and engagement. If you know html, CSS and Javascript languages, this tutorial will be a breeze. For those unaware of these, following a few simple steps will create the extension.

Steps

  1. Image titled Create a Chrome Extension for Your Website Step 1
    1
    Download a HTML editor. Notepad++ is a free, open-source option for windows,[1] and Komodo Edit for Mac.[2]
  2. Image titled Create a Chrome Extension for Your Website Step 2
    2
    Create your extension files. 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.
  3. Image titled Create a Chrome Extension for Your Website Step 3
    3
    Fill up your manifest.json. 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.
  4. Image titled Create a Chrome Extension for Your Website Step 4
    4
    Fill up your popup.html. 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.
  5. Image titled Create a Chrome Extension for Your Website Step 5
    5
    Create popup.js. Add the url to your RSS feed in place of 'myfeedurl' above.
  6. Image titled Create a Chrome Extension for Your Website Step 6
    6
    Make your popup look good. 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.
  7. Image titled Create a Chrome Extension for Your Website Step 7
    7
    Create an icon to represent your extension. 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.
  8. Image titled Create a Chrome Extension for Your Website Step 8
    8
    Put all these files in a folder. Zip them and upload to the Chrome webstore.[3][4]

Article Info

Categories: Computers and Electronics | Internet Browsers