{"id":8225,"date":"2018-01-16T11:36:37","date_gmt":"2018-01-16T09:36:37","guid":{"rendered":"https:\/\/usersnap.com\/?p=8225"},"modified":"2025-05-28T13:05:24","modified_gmt":"2025-05-28T11:05:24","slug":"develop-chrome-extension","status":"publish","type":"post","link":"https:\/\/usersnap.com\/blog\/develop-chrome-extension\/","title":{"rendered":"How to develop a chrome extension"},"content":{"rendered":"\n<p>Browser extensions in general and chrome extensions, in particular, are small \u201c<em>software programs that customize the browsing experience<\/em>\u201d.<\/p>\n\n\n\n<p>If you\u2019re thinking about building your own Chrome extension, we provide you with helpful resources and tips in this article.<\/p>\n\n\n\n<p>Our very own <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/usersnap-classic-collect\/khehmhbaabkepkojebhcpjifcmojdmgd?hl=en\">Usersnap Chrome extension<\/a> is used by thousands of people, and we are happy to share our knowledge on how we built (and maintain) our extension with you.<\/p>\n\n\n<div class=\"acf-cta\" style=\"background-image: url(https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2025\/02\/Group-1000004194.svg); width: 100%;\"><h2>Try Usersnap for User Research<\/h2><a href=\"https:\/\/usersnap.com\/signup\" class=\"cta-button\">Try Usersnap Now<\/a><\/div>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Why build a Chrome extension?<\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">The short answer: Because Chrome is the most popular browsing software in the world. According to W3Counter, Google\u2019s Chrome had a market share of 58,8% in December 2017, making it the most popular internet browser.<\/span><\/p>\n\n\n<div class=\"wp-block-image wp-image-8233\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"600\" height=\"182\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2018\/01\/browser-stats-2017.png\" alt=\"browser statistics of december 2017\" class=\"wp-image-8233\"\/><figcaption class=\"wp-element-caption\">(source: www.w3counter.com)<\/figcaption><\/figure>\n<\/div>\n\n\n<p>When looking at the global search trends, it\u2019s even more obvious why you might consider a Google extension as a great way to distribute your software:<\/p>\n\n\n\n<p><script type=\"text\/javascript\" src=\"https:\/\/ssl.gstatic.com\/trends_nrtr\/1243_RC12\/embed_loader.js\"><\/script> <script type=\"text\/javascript\"> trends.embed.renderExploreWidget(\"TIMESERIES\", {\"comparisonItem\":[{\"keyword\":\"Chrome extension\",\"geo\":\"\",\"time\":\"2004-01-01 2018-01-09\"}],\"category\":0,\"property\":\"\"}, {\"exploreQuery\":\"date=2004-01-01 2018-01-09&q=Chrome%20extension\",\"guestPath\":\"https:\/\/trends.google.com:443\/trends\/embed\/\"}); <\/script><\/p>\n\n\n\n<p>While Google is still the most popular browsing software, it enables developers from all sorts of industries to distribute their solutions to people.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What are the prerequisites to building a Chrome extension?<\/h2>\n\n\n\n<p>A <a href=\"http:\/\/usersnap.com\/blog\/chrome-extensions-for-developers\/\">Chrome extension<\/a> is essentially a web page.<\/p>\n\n\n\n<p>If you are familiar with common web technologies &#8211; such as HTML, CSS, <a href=\"https:\/\/usersnap.com\/blog\/tracking-js-the-computer-vision-power-of-javascript\/\">JavaScript<\/a> &#8211; you are able to build an extension as well.<\/p>\n\n\n\n<p>Your Chrome extension can use all the APIs that a browser provides (such as JSON, or XMLHttpRequest). It can interact with any web page or server using content scripts or cross-origin XHR. Extensions can also interact with browser features, such as browser tabs.<\/p>\n\n\n\n<p>However, building a Chrome extension is not only a matter of technical knowledge but requires meeting Google\u2019s quality standards. Similar to iOS design and quality guidelines, a Chrome extension must meet the \u201c<a href=\"https:\/\/developer.chrome.com\/webstore\/program_policies?csw=1#extensions\">Extension Quality Guidelines<\/a>\u201d.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Chrome Extension Quality Guidelines<\/h2>\n\n\n\n<p>The Developer Program Policies from Google provide a comprehensive list of standards and policies. These policies help you build your first extension for Chrome.<\/p>\n\n\n\n<p>One of the key quality factors is the so-called single purpose.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>An extension must fulfill a <a href=\"https:\/\/developer.chrome.com\/single_purpose\">single purpose<\/a> that is narrowly defined and easy to understand. A single extension can include multiple components and a range of functionality, as long as everything contributes towards a common purpose.<\/p>\n<\/blockquote>\n\n\n\n<p>Google emphasizes that your Chrome extension must provide a single purpose for a particular use case, in order to avoid bad browser performance or a \u201ccrowded browser UI\u201d.<\/p>\n\n\n\n<p>I\u2019d recommend you to read the Extension Quality Guidelines in detail, but here is a summary of the most important criteria:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Avoid unexpected changes to browser functionality and settings<\/li>\n\n\n\n<li>Permissions: Google assumes that your extension utilizes each of the permissions it requests. Excessive permissions unrelated to your extension\u2019s purpose will result in a policy violation.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Chrome Extension UI Guidelines<\/h2>\n\n\n\n<p>From a technical standpoint building a Chrome extension is like building web pages. From a <a href=\"https:\/\/usersnap.com\/blog\/emotions-user-experiences\/\">user experience<\/a> and user interface perspective, however, it\u2019s a bit different.<\/p>\n\n\n\n<p>As extensions have different purposes and use cases, we must differentiate between different UIs.<\/p>\n\n\n\n<p>Many extensions add a UI to people\u2019s Chrome browsers through \u201c<strong><em>browser actions<\/em><\/strong>\u201d or \u201c<strong><em>page actions<\/em><\/strong>\u201d. One particular Chrome extension can only have one browser action or one page action.<\/p>\n\n\n\n<p>So what is exactly a \u201c<em>browser action<\/em>\u201d or a \u201c<em>page action<\/em>\u201d?<\/p>\n\n\n\n<p><strong>Browser actions:<\/strong><br>\nIf you want to develop a Chrome extension which is relevant for most websites or web apps, you should choose a \u201cbrowser action\u201d.<\/p>\n\n\n\n<p><strong>Page actions:<\/strong><\/p>\n\n\n\n<p>If you build an extension which is only relevant for a few web pages (like gmail.com), you would choose \u201c<em>page actions<\/em>\u201d.<\/p>\n\n\n\n<p>Page actions represent actions that can be taken on the current page, but that aren&#8217;t applicable to all web pages.<\/p>\n\n\n\n<p>Extensions with page actions are grayed out (inactive) while the user is not visiting the relevant web page.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"650\" height=\"285\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2018\/01\/chrome-extensions-differences-2.png\" alt=\"different chrome extension types\" class=\"wp-image-8240\" title=\"chrome extension types\"\/><\/figure>\n<\/div>\n\n<div class=\"acf-cta\" style=\"background-image: url(https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2025\/02\/Group-1000004194.svg); width: 100%;\"><h2>Try Usersnap for User Research<\/h2><a href=\"https:\/\/usersnap.com\/signup\" class=\"cta-button\">Try Usersnap Now<\/a><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>While the Usersnap extension could be used on any web page (= always active), the Tampermonkey extension is only active on specific web pages.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">File structure and architecture of a Chrome extension<\/h2>\n\n\n\n<p>Extension files are zipped into a single .cry package which the user downloads and installs. Such an extension package must consist of the following files:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A manifest file<\/li>\n\n\n\n<li>One or multiple HTML files<\/li>\n\n\n\n<li>Any other file which your extension&nbsp;needs (e.g. images, JavaScript file)<\/li>\n<\/ul>\n\n\n\n<p>After you\u2019re done developing and testing your extension, you can upload the zipped files in the <a href=\"https:\/\/chrome.google.com\/webstore\/developer\/dashboard\">Google developer dashboard<\/a>.<\/p>\n\n\n\n<p>So how do you build up your file structure?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Relative URLs vs absolute URLs<\/h3>\n\n\n\n<p>When developing your extension, you can refer to any file using a relative URL. This works just like building a simple HTML page. If you put images in a subfolder called \u201cimages\u201d you can simply refer to those files with the following example:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><img decoding=\"async\" src=\"images\/myfile.png\"><\/pre>\n\n\n\n<p>That said, your files are also accessible by an absolute URL using a unique identifier. As this extension ID can change (before it\u2019s packed) you can use the <strong><em>@@extension_id<\/em><\/strong> predefined message in order to avoid hardcoding your extension ID while developing it.<\/p>\n\n\n\n<p>An example of an <em><strong>@@extension_id<\/strong><\/em> would be:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">body {\n background-image:url('chrome-extension:\/\/__MSG_@@extension_id__\/background.png');\n }<\/pre>\n\n\n\n<p>Any CSS and JavaScript file can contain this special message. It does not work in manifest files.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Manifest File<\/h2>\n\n\n\n<p>Every single Chrome extension must have a JSON-formatted manifest file, named manifest.json.<br>\nThis manifest file provides all necessary information about your Chrome extension, such as versioning, permissions, and other useful meta information. The file must be placed in the root folder of your chrome extension.<\/p>\n\n\n\n<p>According to Google, every manifest file must contain the following information:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n\"manifest_version\": \"2.1\",\n\"name\": \"My Extension\",\n\"version\": \"versionString\",\n}\n<\/pre>\n\n\n\n<p>The following information is optional but recommended:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n\"description\": \"Gets information from Google.\",\n\"icons\": { \n    \"128\": \"icon_128.png\" },\n\"background\": {\n    \"persistent\": false,\n    \"scripts\": [\"bg.js\"] },\n\"permissions\": [\"http:\/\/*.google.com\/\", \"https:\/\/*.google.com\/\"],\n\"browser_action\": {\n    \"default_title\": \"\",\n    \"default_icon\": \"icon_19.png\",\n    \"default_popup\": \"popup.html\"}\n}<\/pre>\n\n\n\n<p>For further information on how to create a manifest file, I recommend checking out the documentation from Google <a href=\"https:\/\/developer.chrome.com\/extensions\/manifest\">here<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Architecture<\/h2>\n\n\n\n<p>When developing a new Chrome extension, you probably need some of the following elements for your extension to run inside the browser.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A background page: holds the main logic<\/li>\n\n\n\n<li>UI pages: used to present the extension\u2019s UI<\/li>\n\n\n\n<li>Content scripts: used for interacting with pages that the user loads<\/li>\n<\/ul>\n\n\n\n<p>Let\u2019s get into them in detail.<\/p>\n\n\n\n<p><strong>Background page<\/strong><\/p>\n\n\n\n<p>A background page is used to hold the main logic of your Chrome extension. This means that the background.html page consists of code that controls the behavior of your extensions.<\/p>\n\n\n\n<p>While <em><strong>persistent background pages<\/strong><\/em> always run, <em><strong>event pages<\/strong><\/em> are only open when the extension is opened and closed (as needed by the user).<\/p>\n\n\n\n<p>Google suggests preferring event pages unless you need your background page to run all the time.<\/p>\n\n\n\n<p><strong>UI pages<\/strong><\/p>\n\n\n\n<p>A Chrome extension can consist of HTML pages. Those HTML pages display the extension&#8217;s interface.<\/p>\n\n\n\n<p>An HTML page &#8211; for example &#8211; could be used for a popup which opens after the user clicks the extension icon. This HTML page (in our case a popup.html) has access to each other\u2019s DOMs, and it can invoke functions on each other. This means that the popup.html does not need to duplicate code which might already be used in the background.html page.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"650\" height=\"573\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2018\/01\/ChromeExt-ui-pages-2.png\" alt=\"ui pages of chrome extension\" class=\"wp-image-8242\" title=\"UI Pages of Chrome Extension\"\/><\/figure>\n<\/div>\n\n\n<p><strong>Content scripts<\/strong><\/p>\n\n\n\n<p>If you\u2019re building a Chrome extension which needs to interact with web pages that are loaded by users, you definitely need a content script.<\/p>\n\n\n\n<p>A content script is a JavaScript that runs in the context of the loaded page. Rather think of it as part of the loaded page.<\/p>\n\n\n\n<p>Content scripts could change a loaded page. For example, it could replace every single image of the loaded web page with an image of Ryan Gosling (like <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/hey-girl\/jcpmmhaffdebnmkjelaohgjmndeongip\">this extension<\/a>).<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls loop src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2018\/01\/gosling-hey-girl-browser-extension-2.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to test your Chrome extension<\/h2>\n\n\n\n<p>Once you\u2019re finished with the actual development work, you need to make sure to properly test it.<\/p>\n\n\n\n<p>And luckily testing your new extension is pretty straight-forward. Once you\u2019ve activated the \u201cdeveloper mode\u201d of your chrome extension settings (accessible with chrome:\/\/extensions), you are good to go.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"650\" height=\"157\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2018\/01\/chrome-extension-test-2.png\" alt=\"how to test chrome extensions\" class=\"wp-image-8244\" title=\"chrome extension test\"\/><\/figure>\n<\/div>\n\n\n<p>You can simply add your unpacked extension to your Chrome browser to test it. If successfully added, you should see the icon of your own extension within your browser.<\/p>\n\n\n\n<p>To test your newly created extension you can perform any functionality and <a href=\"https:\/\/usersnap.com\/templates\/user-acceptance-testing-form\" target=\"_blank\" rel=\"noopener\">acceptance test<\/a> to see if it works as intended.<\/p>\n\n\n<div class=\"acf-cta\" style=\"background-image: url(https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2025\/02\/Group-1000004194.svg); width: 100%;\"><h2>Try Usersnap for User Research<\/h2><a href=\"https:\/\/usersnap.com\/signup\" class=\"cta-button\">Try Usersnap Now<\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Done with your Chrome extension: How about a Firefox extension?<\/h2>\n\n\n\n<p>Great news! With the latest Firefox update (called Firefox Quantum), Mozilla made quite some progress in the browser game.<\/p>\n\n\n\n<p>Firefox Quantum is not only super-speedy but also uses the WebExtension API for their browser extensions.<\/p>\n\n\n\n<p>Therefore, it\u2019s rather easy to port your existing Chrome extension to Firefox. There are a few incompatibilities that need a workaround. Depending on your browser extension, this should not require a lot of work to port it to Firefox.<\/p>\n\n\n\n<p>In order to test the compatibility of your Chrome extension, Mozilla offers you to run an extension test.<\/p>\n\n\n\n<p>As of autumn 2017, we at Usersnap use the same source code for our very own Firefox and Chrome extension.<\/p>\n\n\n\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/f_8hVD88omo\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n\n\n\n<div style=\"padding: 50px; margin: 40px 0px; border-radius: 4px; border: 1px solid #e9e9e9; font-size: 17px; line-height: 180%;\">\n<p style=\"text-align: left;\"><b>Recommended Reading:<\/b><\/p>\n<ul>\n<li><a href=\"https:\/\/usersnap.com\/blog\/web-application-testing\/\">A 6-Step Guide to Web Application Testing<\/a><\/li>\n<li><a href=\"https:\/\/usersnap.com\/blog\/visual-communication-workflow\/\">4 reasons why you should integrate visual communication into your workflow<\/a><\/li>\n<li><a href=\"https:\/\/usersnap.com\/blog\/screen-capture-tools\/\">25 Screen Capture Tools To Speed Up Web Projects Communication<\/a><\/li>\n<\/ul>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping it up.<\/h2>\n\n\n\n<p>Obviously, there are further functionalities and characteristics which you could utilize for your Chrome extension. But we\u2019ve shown you the basics on and we hope you\u2019ve found a good way to develop your own Chrome extension.<\/p>\n\n\n\n<p><em>This article is brought to you by <a href=\"https:\/\/usersnap.com\">Usersnap &#8211; the #1 customer feedback platform with versatile feedback options for measuring Customer Experience, QA and UAT<\/a>. It&#8217;s your central place to organize user feedback and collect bug reports. Report bugs in your browser, and see the bigger picture.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Browser extensions in general and chrome extensions, in particular, are small \u201csoftware programs that customize the browsing experience\u201d. If you\u2019re thinking about building your own Chrome extension, we provide you with helpful resources and tips in this article. Our very own Usersnap Chrome extension is used by thousands of people, and we are happy to [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":8231,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":true,"inline_featured_image":false,"ub_ctt_via":"","footnotes":""},"categories":[8],"tags":[],"class_list":["post-8225","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development-blog"],"acf":[],"featured_image_src":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2018\/01\/develop-chrome-extensions.png","author_info":{"display_name":"Thomas Peham","author_link":"https:\/\/usersnap.com\/blog\/author\/thomas\/"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How To Develop A Chrome Extension - Usersnap Blog<\/title>\n<meta name=\"description\" content=\"Are you thinking about developing your own Chrome extension? This post will provide you with helpful resources and tips on how to get started.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/usersnap.com\/blog\/develop-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 Develop A Chrome Extension - Usersnap Blog\" \/>\n<meta property=\"og:description\" content=\"Are you thinking about developing your own Chrome extension? This post will provide you with helpful resources and tips on how to get started.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/usersnap.com\/blog\/develop-chrome-extension\/\" \/>\n<meta property=\"og:site_name\" content=\"Usersnap Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/usersnap\" \/>\n<meta property=\"article:published_time\" content=\"2018-01-16T09:36:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-28T11:05:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2018\/01\/develop-chrome-extensions.png\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Thomas Peham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tompeham\" \/>\n<meta name=\"twitter:site\" content=\"@usersnap\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thomas Peham\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/usersnap.com\/blog\/develop-chrome-extension\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/usersnap.com\/blog\/develop-chrome-extension\/\"},\"author\":{\"name\":\"Thomas Peham\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/person\/85bd1168f7e7c005c6cd2a4045e3d59b\"},\"headline\":\"How to develop a chrome extension\",\"datePublished\":\"2018-01-16T09:36:37+00:00\",\"dateModified\":\"2025-05-28T11:05:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/usersnap.com\/blog\/develop-chrome-extension\/\"},\"wordCount\":1574,\"publisher\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/usersnap.com\/blog\/develop-chrome-extension\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2018\/01\/develop-chrome-extensions.png\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/usersnap.com\/blog\/develop-chrome-extension\/\",\"url\":\"https:\/\/usersnap.com\/blog\/develop-chrome-extension\/\",\"name\":\"How To Develop A Chrome Extension - Usersnap Blog\",\"isPartOf\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/usersnap.com\/blog\/develop-chrome-extension\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/usersnap.com\/blog\/develop-chrome-extension\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2018\/01\/develop-chrome-extensions.png\",\"datePublished\":\"2018-01-16T09:36:37+00:00\",\"dateModified\":\"2025-05-28T11:05:24+00:00\",\"description\":\"Are you thinking about developing your own Chrome extension? This post will provide you with helpful resources and tips on how to get started.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/usersnap.com\/blog\/develop-chrome-extension\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/usersnap.com\/blog\/develop-chrome-extension\/#primaryimage\",\"url\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2018\/01\/develop-chrome-extensions.png\",\"contentUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2018\/01\/develop-chrome-extensions.png\",\"width\":700,\"height\":350,\"caption\":\"how to develop chrome extension\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/usersnap.com\/blog\/#website\",\"url\":\"https:\/\/usersnap.com\/blog\/\",\"name\":\"Usersnap Blog\",\"description\":\"Learn more about how to collect user feedback and build better products with the magic power of feedback.\",\"publisher\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/usersnap.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/usersnap.com\/blog\/#organization\",\"name\":\"Usersnap\",\"url\":\"https:\/\/usersnap.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png\",\"contentUrl\":\"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png\",\"width\":136,\"height\":26,\"caption\":\"Usersnap\"},\"image\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/usersnap\",\"https:\/\/x.com\/usersnap\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/person\/85bd1168f7e7c005c6cd2a4045e3d59b\",\"name\":\"Thomas Peham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c570afeda0ee367f5824a6762a0511ec7be061521c645ef29d34b976c183341d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c570afeda0ee367f5824a6762a0511ec7be061521c645ef29d34b976c183341d?s=96&d=mm&r=g\",\"caption\":\"Thomas Peham\"},\"sameAs\":[\"https:\/\/x.com\/tompeham\"],\"url\":\"https:\/\/usersnap.com\/blog\/author\/thomas\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Develop A Chrome Extension - Usersnap Blog","description":"Are you thinking about developing your own Chrome extension? This post will provide you with helpful resources and tips on how to get started.","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:\/\/usersnap.com\/blog\/develop-chrome-extension\/","og_locale":"en_US","og_type":"article","og_title":"How To Develop A Chrome Extension - Usersnap Blog","og_description":"Are you thinking about developing your own Chrome extension? This post will provide you with helpful resources and tips on how to get started.","og_url":"https:\/\/usersnap.com\/blog\/develop-chrome-extension\/","og_site_name":"Usersnap Blog","article_publisher":"https:\/\/www.facebook.com\/usersnap","article_published_time":"2018-01-16T09:36:37+00:00","article_modified_time":"2025-05-28T11:05:24+00:00","og_image":[{"width":700,"height":350,"url":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2018\/01\/develop-chrome-extensions.png","type":"image\/png"}],"author":"Thomas Peham","twitter_card":"summary_large_image","twitter_creator":"@tompeham","twitter_site":"@usersnap","twitter_misc":{"Written by":"Thomas Peham","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/usersnap.com\/blog\/develop-chrome-extension\/#article","isPartOf":{"@id":"https:\/\/usersnap.com\/blog\/develop-chrome-extension\/"},"author":{"name":"Thomas Peham","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/person\/85bd1168f7e7c005c6cd2a4045e3d59b"},"headline":"How to develop a chrome extension","datePublished":"2018-01-16T09:36:37+00:00","dateModified":"2025-05-28T11:05:24+00:00","mainEntityOfPage":{"@id":"https:\/\/usersnap.com\/blog\/develop-chrome-extension\/"},"wordCount":1574,"publisher":{"@id":"https:\/\/usersnap.com\/blog\/#organization"},"image":{"@id":"https:\/\/usersnap.com\/blog\/develop-chrome-extension\/#primaryimage"},"thumbnailUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2018\/01\/develop-chrome-extensions.png","articleSection":["Web Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/usersnap.com\/blog\/develop-chrome-extension\/","url":"https:\/\/usersnap.com\/blog\/develop-chrome-extension\/","name":"How To Develop A Chrome Extension - Usersnap Blog","isPartOf":{"@id":"https:\/\/usersnap.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/usersnap.com\/blog\/develop-chrome-extension\/#primaryimage"},"image":{"@id":"https:\/\/usersnap.com\/blog\/develop-chrome-extension\/#primaryimage"},"thumbnailUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2018\/01\/develop-chrome-extensions.png","datePublished":"2018-01-16T09:36:37+00:00","dateModified":"2025-05-28T11:05:24+00:00","description":"Are you thinking about developing your own Chrome extension? This post will provide you with helpful resources and tips on how to get started.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/usersnap.com\/blog\/develop-chrome-extension\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/usersnap.com\/blog\/develop-chrome-extension\/#primaryimage","url":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2018\/01\/develop-chrome-extensions.png","contentUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2018\/01\/develop-chrome-extensions.png","width":700,"height":350,"caption":"how to develop chrome extension"},{"@type":"WebSite","@id":"https:\/\/usersnap.com\/blog\/#website","url":"https:\/\/usersnap.com\/blog\/","name":"Usersnap Blog","description":"Learn more about how to collect user feedback and build better products with the magic power of feedback.","publisher":{"@id":"https:\/\/usersnap.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/usersnap.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/usersnap.com\/blog\/#organization","name":"Usersnap","url":"https:\/\/usersnap.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png","contentUrl":"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png","width":136,"height":26,"caption":"Usersnap"},"image":{"@id":"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/usersnap","https:\/\/x.com\/usersnap"]},{"@type":"Person","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/person\/85bd1168f7e7c005c6cd2a4045e3d59b","name":"Thomas Peham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c570afeda0ee367f5824a6762a0511ec7be061521c645ef29d34b976c183341d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c570afeda0ee367f5824a6762a0511ec7be061521c645ef29d34b976c183341d?s=96&d=mm&r=g","caption":"Thomas Peham"},"sameAs":["https:\/\/x.com\/tompeham"],"url":"https:\/\/usersnap.com\/blog\/author\/thomas\/"}]}},"_links":{"self":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts\/8225","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/comments?post=8225"}],"version-history":[{"count":0,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts\/8225\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/media\/8231"}],"wp:attachment":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/media?parent=8225"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/categories?post=8225"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/tags?post=8225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}