How to create a Chrome extension to show meta tags used on a webpage in 5 easy steps

I was wondering the other day if developing a chrome extension is a difficult task. I see thousands of extensions available on chrome web store to make our life easy, but is it really difficult to develop one. There was only one way to find out. It was to actually try and develop one myself.

Best place to learn everything about developing an extension and making your self-familiarize with technical terms is Chrome’s official developer site. After reading all about it, you will realize that you can create new extensions for Chrome with those core technologies that you’re already familiar with from web development: HTML, CSS, and JavaScript. If you’ve ever built a web page, you should feel right at home with extensions pretty quickly.

I opted to create an extension to show meta tags used on a web page. If you are not tech savvy and are not familiar with how to view those, this can be very helpful. To create an extension you need to follow these steps:

Developing Chrome extensions

1. Create an empty folder and add a file named mainfest.json. Basically, this file is an identity for your extension. It determines extensions name, an icon to be used, permission required from users in order for extension to work and much more. You can read about it here. It looked something like this for me.
2. After that add an icon for your extension. This show’s up in your browser next to Omnibox.
3. Create a file named popup.html. This is a view for your extension and will be rendered inside the popup window that’s created in response to a user’s click on the browser action.
4. Create a js file named popup.js. The actual logic of rendering the content of the popup is implemented by this file.
5. I had to go and create an extra file for my meta tag extension named getPageMetas.js. This is basically a content_script which is executed on a web page,  and can be used to interact with extension files. One thing you need to notice is that extension files and web pages files execute separately and are completely isolated to one another. The only way to communicate with each other is using content_scripts. You can read all about it here.

Once you have all these files, you are ready to launch your first chrome extension. Pretty easy, right?

Once you’re done coding, zip your folder, go to your webstore developer dashboard, upload your zip, add necessary details and voila you have successfully launched your first chrome extension.

I have made my extension code open for everyone to see. Here is the complete code for the meta tag extension: https://github.com/abhij89/meta-tags-chrome-extension

Here is my extension link for everyone to download and use: https://chrome.google.com/webstore/detail/meta-tags-seo-tool/miihmfdpfdioogfbfofbnagblnjbjomg