{"id":202,"date":"2017-08-13T05:34:00","date_gmt":"2017-08-13T05:34:00","guid":{"rendered":"http:\/\/blog.staginginstance.com\/?p=202"},"modified":"2017-11-21T17:53:16","modified_gmt":"2017-11-21T17:53:16","slug":"creating-first-chrome-extension-show-meta-tags-used-webpage-5-easy-steps","status":"publish","type":"post","link":"https:\/\/geekabhi.com\/blog\/creating-first-chrome-extension-show-meta-tags-used-webpage-5-easy-steps\/","title":{"rendered":"How to create a Chrome extension to show meta tags used on a webpage in 5 easy steps"},"content":{"rendered":"

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.<\/p>\n

Best place to learn everything about developing an extension and making your self-familiarize with technical terms is Chrome’s official developer site<\/a>. After reading all about it, you will realize that\u00a0you 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.<\/p>\n

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:<\/p>\n

Developing Chrome extensions<\/h2>\n
    \n
  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<\/a>. It looked something like this <\/a>for me.<\/li>\n
  2. After that add an icon for your extension. This show’s up in your browser next to Omnibox.<\/li>\n
  3. Create a file named popup.html<\/strong><\/a>. This is a view for your extension\u00a0and will be rendered inside the popup window that’s created in response to a user’s click on the browser action.<\/li>\n
  4. Create a js file named popup.js<\/strong><\/a>. The actual logic of rendering the content of the popup is implemented by this file.<\/li>\n
  5. I had to go and create an extra file for my meta tag extension named getPageMetas.js<\/strong><\/a>. This is basically a content_script which is executed on a web page,\u00a0 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<\/a>.<\/li>\n<\/ol>\n

    Once you have all these files, you are ready to launch your first chrome extension. Pretty easy, right?<\/p>\n

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

    I have made my extension code open for everyone to see. Here is the complete code for the meta tag extension:\u00a0https:\/\/github.com\/abhij89\/meta-tags-chrome-extension<\/a><\/p>\n

    Here is my extension link for everyone to download and use:\u00a0https:\/\/chrome.google.com\/webstore\/detail\/meta-tags-seo-tool\/miihmfdpfdioogfbfofbnagblnjbjomg<\/a><\/p>\n

     <\/p>\n","protected":false},"excerpt":{"rendered":"

    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.… Continue reading How to create a Chrome extension to show meta tags used on a webpage in 5 easy steps<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[15,12,14],"yoast_head":"\nHow to create a Chrome extension to show meta tags used on a webpage in 5 easy steps - Learner at life<\/title>\n<meta name=\"description\" content=\"Abhishek Jain teaches you how to create your first Chrome Extension in 5 easy steps, introducing the topic in a simple and easy to follow manner.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/geekabhi.com\/blog\/creating-first-chrome-extension-show-meta-tags-used-webpage-5-easy-steps\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 steps to create your first chrome extension\" \/>\n<meta property=\"og:description\" content=\"Abhishek Jain teaches you how to create a Chrome Extension in 5 easy steps, introducing the topic in a simple and easy to follow manner.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/geekabhi.com\/blog\/creating-first-chrome-extension-show-meta-tags-used-webpage-5-easy-steps\/\" \/>\n<meta property=\"og:site_name\" content=\"Learner at life\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/abhij89\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-13T05:34:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-21T17:53:16+00:00\" \/>\n<meta name=\"author\" content=\"Abhishek Jain\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"5 steps to create your first chrome extension\" \/>\n<meta name=\"twitter:description\" content=\"Creating first chrome extension to show meta tags used on a webpage in 5 easy steps with code available on https:\/\/github.com\/abhij89\/\" \/>\n<meta name=\"twitter:image\" content=\"http:\/\/blog.staginginstance.com\/wp-content\/uploads\/2017\/08\/meta_ss01.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@abhij89\" \/>\n<meta name=\"twitter:site\" content=\"@abhij89\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abhishek Jain\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/geekabhi.com\/blog\/creating-first-chrome-extension-show-meta-tags-used-webpage-5-easy-steps\/\",\"url\":\"https:\/\/geekabhi.com\/blog\/creating-first-chrome-extension-show-meta-tags-used-webpage-5-easy-steps\/\",\"name\":\"How to create a Chrome extension to show meta tags used on a webpage in 5 easy steps - Learner at life\",\"isPartOf\":{\"@id\":\"https:\/\/geekabhi.com\/blog\/#website\"},\"datePublished\":\"2017-08-13T05:34:00+00:00\",\"dateModified\":\"2017-11-21T17:53:16+00:00\",\"author\":{\"@id\":\"https:\/\/geekabhi.com\/blog\/#\/schema\/person\/75cf5ee8cc7d8c1a9ba81628bb57443e\"},\"description\":\"Abhishek Jain teaches you how to create your first Chrome Extension in 5 easy steps, introducing the topic in a simple and easy to follow manner.\",\"breadcrumb\":{\"@id\":\"https:\/\/geekabhi.com\/blog\/creating-first-chrome-extension-show-meta-tags-used-webpage-5-easy-steps\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/geekabhi.com\/blog\/creating-first-chrome-extension-show-meta-tags-used-webpage-5-easy-steps\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/geekabhi.com\/blog\/creating-first-chrome-extension-show-meta-tags-used-webpage-5-easy-steps\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/geekabhi.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create a Chrome extension to show meta tags used on a webpage in 5 easy steps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/geekabhi.com\/blog\/#website\",\"url\":\"https:\/\/geekabhi.com\/blog\/\",\"name\":\"Learner at life\",\"description\":\"Blog to help you learn stuff\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/geekabhi.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/geekabhi.com\/blog\/#\/schema\/person\/75cf5ee8cc7d8c1a9ba81628bb57443e\",\"name\":\"Abhishek Jain\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/geekabhi.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/85387a40fe2c6954082743d1a8aa6c0f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/85387a40fe2c6954082743d1a8aa6c0f?s=96&d=mm&r=g\",\"caption\":\"Abhishek Jain\"},\"description\":\"Techie with 10+ years of experience and counting.\",\"sameAs\":[\"http:\/\/www.geekabhi.com\",\"https:\/\/twitter.com\/abhij89\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create a Chrome extension to show meta tags used on a webpage in 5 easy steps - Learner at life","description":"Abhishek Jain teaches you how to create your first Chrome Extension in 5 easy steps, introducing the topic in a simple and easy to follow manner.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/geekabhi.com\/blog\/creating-first-chrome-extension-show-meta-tags-used-webpage-5-easy-steps\/","og_locale":"en_US","og_type":"article","og_title":"5 steps to create your first chrome extension","og_description":"Abhishek Jain teaches you how to create a Chrome Extension in 5 easy steps, introducing the topic in a simple and easy to follow manner.","og_url":"https:\/\/geekabhi.com\/blog\/creating-first-chrome-extension-show-meta-tags-used-webpage-5-easy-steps\/","og_site_name":"Learner at life","article_publisher":"http:\/\/abhij89","article_published_time":"2017-08-13T05:34:00+00:00","article_modified_time":"2017-11-21T17:53:16+00:00","author":"Abhishek Jain","twitter_card":"summary_large_image","twitter_title":"5 steps to create your first chrome extension","twitter_description":"Creating first chrome extension to show meta tags used on a webpage in 5 easy steps with code available on https:\/\/github.com\/abhij89\/","twitter_image":"http:\/\/blog.staginginstance.com\/wp-content\/uploads\/2017\/08\/meta_ss01.jpg","twitter_creator":"@abhij89","twitter_site":"@abhij89","twitter_misc":{"Written by":"Abhishek Jain","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/geekabhi.com\/blog\/creating-first-chrome-extension-show-meta-tags-used-webpage-5-easy-steps\/","url":"https:\/\/geekabhi.com\/blog\/creating-first-chrome-extension-show-meta-tags-used-webpage-5-easy-steps\/","name":"How to create a Chrome extension to show meta tags used on a webpage in 5 easy steps - Learner at life","isPartOf":{"@id":"https:\/\/geekabhi.com\/blog\/#website"},"datePublished":"2017-08-13T05:34:00+00:00","dateModified":"2017-11-21T17:53:16+00:00","author":{"@id":"https:\/\/geekabhi.com\/blog\/#\/schema\/person\/75cf5ee8cc7d8c1a9ba81628bb57443e"},"description":"Abhishek Jain teaches you how to create your first Chrome Extension in 5 easy steps, introducing the topic in a simple and easy to follow manner.","breadcrumb":{"@id":"https:\/\/geekabhi.com\/blog\/creating-first-chrome-extension-show-meta-tags-used-webpage-5-easy-steps\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/geekabhi.com\/blog\/creating-first-chrome-extension-show-meta-tags-used-webpage-5-easy-steps\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/geekabhi.com\/blog\/creating-first-chrome-extension-show-meta-tags-used-webpage-5-easy-steps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/geekabhi.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to create a Chrome extension to show meta tags used on a webpage in 5 easy steps"}]},{"@type":"WebSite","@id":"https:\/\/geekabhi.com\/blog\/#website","url":"https:\/\/geekabhi.com\/blog\/","name":"Learner at life","description":"Blog to help you learn stuff","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/geekabhi.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/geekabhi.com\/blog\/#\/schema\/person\/75cf5ee8cc7d8c1a9ba81628bb57443e","name":"Abhishek Jain","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/geekabhi.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/85387a40fe2c6954082743d1a8aa6c0f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/85387a40fe2c6954082743d1a8aa6c0f?s=96&d=mm&r=g","caption":"Abhishek Jain"},"description":"Techie with 10+ years of experience and counting.","sameAs":["http:\/\/www.geekabhi.com","https:\/\/twitter.com\/abhij89"]}]}},"_links":{"self":[{"href":"https:\/\/geekabhi.com\/blog\/wp-json\/wp\/v2\/posts\/202"}],"collection":[{"href":"https:\/\/geekabhi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geekabhi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geekabhi.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geekabhi.com\/blog\/wp-json\/wp\/v2\/comments?post=202"}],"version-history":[{"count":9,"href":"https:\/\/geekabhi.com\/blog\/wp-json\/wp\/v2\/posts\/202\/revisions"}],"predecessor-version":[{"id":213,"href":"https:\/\/geekabhi.com\/blog\/wp-json\/wp\/v2\/posts\/202\/revisions\/213"}],"wp:attachment":[{"href":"https:\/\/geekabhi.com\/blog\/wp-json\/wp\/v2\/media?parent=202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekabhi.com\/blog\/wp-json\/wp\/v2\/categories?post=202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekabhi.com\/blog\/wp-json\/wp\/v2\/tags?post=202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}