{"id":15484,"date":"2016-12-22T12:15:28","date_gmt":"2016-12-22T10:15:28","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=15484"},"modified":"2016-12-19T22:11:00","modified_gmt":"2016-12-19T20:11:00","slug":"build-chrome-extension","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/","title":{"rendered":"How to build a chrome extension"},"content":{"rendered":"<p>Chrome extensions allow you to add a new functionality to Chrome without having any knowledge about the actual browser source code. New extensions can be implemented using <code>HTML<\/code>, <code>CSS<\/code> and <code>JavaScript<\/code>.\u00a0In the following example, we implement a word counter extension which\u00a0helps to count characters, words, syllables and sentences of a selected text in the page. It also calculates the<\/p>\n<p>Flesch readability score of the text. The Flesch readability score distinguishes the level of understanding of a text for audiences. If the score is less than 30, the text is distinguished difficult. If the score is greater than 90, the text is distinguished easy and if it is between 30 and 90 it is moderate.<\/p>\n<h2>1. Building a new extension<\/h2>\n<p>First, create a directory to implement the extension. Then, create a manifest file named <code>manifest.json<\/code>. This manifest is nothing more than a metadata file in JSON format that contains properties like extension\u2019s name, description, version number and so on. At a high level, it will be used to declare to Chrome what the extension is going to do, and what permissions it requires in order to do those things.<\/p>\n<p>In this example\u2019s manifest, we declare a <a href=\"https:\/\/developer.chrome.com\/extensions\/browserAction\">browser action<\/a>, the <a href=\"https:\/\/developer.chrome.com\/extensions\/activeTab\">activeTab permission<\/a> to see the URL of the current tab, and the host <a href=\"https:\/\/developer.chrome.com\/extensions\/declare_permissions\">permission<\/a> to access the external Google Image search API.<\/p>\n<pre class=\"brush:js\">{\r\n  \"manifest_version\": 2,\r\n  \"name\": \"Word counter\",\r\n  \"short_name\":\"Word count\",\r\n  \"description\": \"This extension helps to count words and sentences of a selected text in the page.\",\r\n  \"version\": \"4.0\",\r\n  \"icons\":\r\n  {\r\n  \t\"128\":\"icon.png\",\r\n  \t\"16\":\"icon.png\",\r\n  \t\"48\":\"icon.png\"\r\n  },\r\n  \"browser_action\": {\r\n    \"default_icon\": \"icon.png\",\r\n    \"default_popup\": \"popup.html\",\r\n    \"default_title\": \"Word counter\"\r\n  },\r\n  \"permissions\": [\r\n    \"activeTab\",\r\n    \"https:\/\/ajax.googleapis.com\/\"\r\n  ]\r\n}<\/pre>\n<p>In the browser_action, two resources are defined\u00a0<code>icon.png<\/code> and <code>popup.html<\/code>.\u00a0Both files must exist in the same directory that you created.<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/screen-shot-2016-12-19-at-9-53-57-pm.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-15485\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/screen-shot-2016-12-19-at-9-53-57-pm.png\" alt=\"\" width=\"300\" height=\"153\" \/><\/a><\/p>\n<ul class=\"imaged\">\n<li><code>icon.png<\/code> will be displayed next to the Omnibox, waiting for user interaction. It is a 19px-square PNG file.<\/li>\n<li><code>popup.html<\/code> will be rendered inside the popup window and will be displayed in response to a user\u2019s click on the browser action. It\u2019s a standard HTML file.<\/li>\n<\/ul>\n<pre class=\"brush:xml\">&lt;!doctype html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;title&gt;Word Counter Extension's Popup&lt;\/title&gt;\r\n    &lt;style&gt;\r\n      body {\r\n        font-family: \"Segoe UI\", \"Lucida Grande\", Tahoma, sans-serif;\r\n        font-size: 100%;\r\n      }\r\n      #text {\r\n        white-space: pre;\r\n        text-overflow: clip;\r\n        overflow: hidden;\r\n        font-family: Tahoma, sans-serif;\r\n        font-size: 12px;\r\n        max-width: 400px;\r\n      }\r\n    &lt;\/style&gt;\r\n    http:\/\/popup.js\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    \r\n\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<ul class=\"imaged\">\n<li>The actual logic of rendering the content of the popup is implemented in\u00a0<a href=\"https:\/\/developer.chrome.com\/extensions\/examples\/tutorials\/getstarted\/popup.js\">popup.js<\/a>.<\/li>\n<\/ul>\n<pre class=\"brush:js\">\/**\r\n * Get the current URL.\r\n *\r\n * @param {function(string)} callback - called when the URL of the current tab\r\n *   is found.\r\n *\/\r\nfunction getCurrentTabUrl(callback) {\r\n  var queryInfo = {\r\n    active: true,\r\n    currentWindow: true\r\n  };\r\n\r\n  chrome.tabs.query(queryInfo, function(tabs) {\r\n    var tab = tabs[0];\r\n    var url = tab.url;\r\n\r\n    console.assert(typeof url == 'string', 'tab.url should be a string');\r\n    callback(url);\r\n  });\r\n}\r\n\r\nfunction getNumberOfSyllables(text){\r\n  var n = 0;\r\n  var arr = text.split(\" \");\r\n  for (var i = arr.length - 1; i &gt;= 0; i--) {\r\n    var word = arr[i];\r\n    word = word.toLowerCase();                                     \r\n    if(word.length &lt;= 3) { n += 1; continue; }                     \r\n    word = word.replace(\/(?:[^laeiouy]es|ed|[^laeiouy]e)$\/, '');   \r\n    word = word.replace(\/^y\/, '');                                 \r\n    n += word.match(\/[aeiouy]{1,2}\/g).length;  \r\n  }\r\n  return n;\r\n}\r\n\r\nfunction renderText(text) {\r\n  var w = text.split(\/[^\\s]+\/).length - 1;\r\n  var st = text.split(\/[^.!?]+\/).length - 1;\r\n  var c = text.length - 1;\r\n  var cw = text.replace(\/\\s+\/g, '').length;\r\n  var sy = getNumberOfSyllables(text);\r\n  var fr = 206.835 - 1.015 * (w\/st) - 84.6 * (sy\/w);\r\n  var readability;\r\n  if(fr &lt;= 30) {     readability = \"Difficult\";   } else if(fr &gt;= 90){\r\n    readability = \"Easy\";\r\n  } else{\r\n    readability = \"Moderate\";\r\n  }\r\n\r\n  var finalText = \"Number of characters with space: \" + c + \"\\n\" + \r\n                    \"Number of characters without space: \" + cw + \"\\n\" + \r\n                    \"Number of words: \" + w + \"\\n\" + \r\n                    \"Number of syllables: \" + sy + \"\\n\" +\r\n                    \"Number of sentences: \" + st + \"\\n\" +\r\n                    \"Flesch readability score: \" + readability + \" \";\r\n\r\n  document.getElementById('text').textContent = finalText;\r\n}\r\n\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n  getCurrentTabUrl(function(url) {\r\n\r\n    chrome.tabs.executeScript( {\r\n      code: \"window.getSelection().toString();\"\r\n    }, function(selection) {\r\n      if(!selection || selection == ''){\r\n        document.getElementById('text').textContent = \"Please select your text!\";\r\n      }else\r\n        renderText(selection[0]);\r\n    });\r\n\r\n  });\r\n});<\/pre>\n<p><em><strong>Note: <\/strong><\/em>To add a tooltip for the extension, set the <code>default_title<\/code> key in the manifest file in the browser_action.<\/p>\n<p>You should now have four files in your working directory: <a href=\"https:\/\/developer.chrome.com\/extensions\/examples\/tutorials\/getstarted\/icon.png\"><code>icon.png<\/code><\/a>, <a href=\"https:\/\/developer.chrome.com\/extensions\/examples\/tutorials\/getstarted\/manifest.json\"><code>manifest.json<\/code><\/a>, <a href=\"https:\/\/developer.chrome.com\/extensions\/examples\/tutorials\/getstarted\/popup.html\"><code>popup.html<\/code><\/a>,<a href=\"https:\/\/developer.chrome.com\/extensions\/examples\/tutorials\/getstarted\/popup.js\"><code>popup.js<\/code><\/a>. Now let\u2019s load the new extension files into Chrome.<\/p>\n<h2 id=\"unpacked\" class=\"has-permalink\">2. How to load the extension<\/h2>\n<p>To load the extension on the browser, follow these steps:<\/p>\n<ol>\n<li>Visit <code>chrome:\/\/extensions<\/code>\u00a0on browser or open up the Chrome menu by clicking the icon to the far right of the Omnibox: <img decoding=\"async\" src=\"https:\/\/developer.chrome.com\/static\/images\/hotdogmenu.png\" alt=\"The menu's icon is three horizontal bars.\" width=\"29\" height=\"29\" \/> and select <strong>Extensions<\/strong> under the <strong>Tools<\/strong> menu to get to the same place.<\/li>\n<li>Ensure that the <strong>Developer mode<\/strong> checkbox in the top right-hand corner is checked.<\/li>\n<li>Click <strong>Load unpacked extension\u2026<\/strong> to pop up a file-selection dialog.<\/li>\n<li>Navigate to the directory in which your extension files live, and select it.<\/li>\n<\/ol>\n<p>If the extension is valid, it\u2019ll be loaded up and active right away! If it\u2019s invalid, an error message will be displayed at the top of the page. Then, correct the error, and try again.<\/p>\n<p><em><strong>Note:\u00a0<\/strong><\/em>The manifest file is parsed only once the extension is loaded. If you want to see the new changes in action, the extension has to be reloaded. Visit the extensions page (go to <strong>chrome:\/\/extensions<\/strong>, or <strong>Tools &gt; Extensions\u00a0<\/strong>under the Chrome menu), and click <strong>Reload<\/strong> under the extension. All extensions are also reloaded when the extensions page is reloaded, e.g. after hitting <kbd>F5<kbd> or <kbd>Ctrl<\/kbd>-<kbd>R<\/kbd>.<\/kbd><\/kbd><\/p>\n<h2>3. Source code<\/h2>\n<p>You can\u00a0download the source code <a href=\"https:\/\/github.com\/ImaMiri\/word-counter\">here<\/a>. Also, the published version of the chrome extension can be found here: <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/word-counter\/cgfjdjopdhopjgbcinafnfpcpjfeaidm\">https:\/\/chrome.google.com\/webstore\/detail\/word-counter\/cgfjdjopdhopjgbcinafnfpcpjfeaidm<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Chrome extensions allow you to add a new functionality to Chrome without having any knowledge about the actual browser source code. New extensions can be implemented using HTML, CSS and JavaScript.\u00a0In the following example, we implement a word counter extension which\u00a0helps to count characters, words, syllables and sentences of a selected text in the page. &hellip;<\/p>\n","protected":false},"author":208,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[120],"class_list":["post-15484","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-chrome"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to build a chrome extension - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Chrome extensions allow you to add a new functionality to Chrome without having any knowledge about the actual browser source code. New extensions can be\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to build a chrome extension - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Chrome extensions allow you to add a new functionality to Chrome without having any knowledge about the actual browser source code. New extensions can be\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2016-12-22T10:15:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ima Miri\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ima Miri\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/\"},\"author\":{\"name\":\"Ima Miri\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/a6065d8401330116d740211cb2a5e698\"},\"headline\":\"How to build a chrome extension\",\"datePublished\":\"2016-12-22T10:15:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/\"},\"wordCount\":558,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"keywords\":[\"Chrome\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/\",\"name\":\"How to build a chrome extension - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"datePublished\":\"2016-12-22T10:15:28+00:00\",\"description\":\"Chrome extensions allow you to add a new functionality to Chrome without having any knowledge about the actual browser source code. New extensions can be\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to build a chrome extension\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/a6065d8401330116d740211cb2a5e698\",\"name\":\"Ima Miri\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/53e7b124242090692bb779fe35bb124645a10aa24712d6cc2875433cff69f112?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/53e7b124242090692bb779fe35bb124645a10aa24712d6cc2875433cff69f112?s=96&d=mm&r=g\",\"caption\":\"Ima Miri\"},\"description\":\"Ima is a Senior Software Developer in enterprise application design and development. She is experienced in high traffic websites for e-commerce, media and financial services. She is interested in new technologies and innovation area along with technical writing. Her main focus is on web architecture, web technologies, java\/j2ee, Open source and mobile development for android.\",\"sameAs\":[\"https:\/\/imamiri.com\/\",\"https:\/\/www.linkedin.com\/in\/imamiri\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/ima-miri\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to build a chrome extension - Web Code Geeks - 2026","description":"Chrome extensions allow you to add a new functionality to Chrome without having any knowledge about the actual browser source code. New extensions can be","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:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/","og_locale":"en_US","og_type":"article","og_title":"How to build a chrome extension - Web Code Geeks - 2026","og_description":"Chrome extensions allow you to add a new functionality to Chrome without having any knowledge about the actual browser source code. New extensions can be","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2016-12-22T10:15:28+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","type":"image\/jpeg"}],"author":"Ima Miri","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Ima Miri","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/"},"author":{"name":"Ima Miri","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/a6065d8401330116d740211cb2a5e698"},"headline":"How to build a chrome extension","datePublished":"2016-12-22T10:15:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/"},"wordCount":558,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","keywords":["Chrome"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/","name":"How to build a chrome extension - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","datePublished":"2016-12-22T10:15:28+00:00","description":"Chrome extensions allow you to add a new functionality to Chrome without having any knowledge about the actual browser source code. New extensions can be","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/build-chrome-extension\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"How to build a chrome extension"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/a6065d8401330116d740211cb2a5e698","name":"Ima Miri","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/53e7b124242090692bb779fe35bb124645a10aa24712d6cc2875433cff69f112?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/53e7b124242090692bb779fe35bb124645a10aa24712d6cc2875433cff69f112?s=96&d=mm&r=g","caption":"Ima Miri"},"description":"Ima is a Senior Software Developer in enterprise application design and development. She is experienced in high traffic websites for e-commerce, media and financial services. She is interested in new technologies and innovation area along with technical writing. Her main focus is on web architecture, web technologies, java\/j2ee, Open source and mobile development for android.","sameAs":["https:\/\/imamiri.com\/","https:\/\/www.linkedin.com\/in\/imamiri"],"url":"https:\/\/www.webcodegeeks.com\/author\/ima-miri\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/15484","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/208"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=15484"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/15484\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=15484"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=15484"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=15484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}