{"id":45665,"date":"2021-03-23T21:43:06","date_gmt":"2021-03-23T13:43:06","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=45665"},"modified":"2023-04-12T20:22:17","modified_gmt":"2023-04-12T12:22:17","slug":"how-to-create-chrome-extensions-from-scratch","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/how-to-create-chrome-extensions-from-scratch\/","title":{"rendered":"How to Create Chrome Extensions from Scratch"},"content":{"rendered":"<p>If you wish to <strong>add or modify some functionality<\/strong> in <a href=\"https:\/\/www.hongkiat.com\/blog\/chrome-features\/\">Google Chrome<\/a>, you need to use an extension. Though you can download an extension from the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/chrome.google.com\/webstore\/category\/extensions\">Chrome Web Store<\/a>, but sometimes you need a specific functionality that you can\u2019t find in any existing extension.<\/p>\n<p>Well, the good news is that you can create your own extension to add or modify the required functionality or make a new add-on or app for Google Chrome, which you can later <strong>distribute to other users<\/strong> using the Chrome Web Store.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/how-to-create-chrome-extensions-from-scratch\/chrome-web-store.jpg\" width=\"1200\" height=\"863\" alt=\"Chrome Web Store\"><\/figure>\n<p>In the following, I\u2019m going to show you the <strong>easiest way to create an extension<\/strong>. If you have some knowledge of web development (HTML, CSS, and JS), you will feel right at home. If not, first <a href=\"https:\/\/www.hongkiat.com\/blog\/web-dev-youtube-channels\/\">watch these channels to <\/a><strong><a href=\"https:\/\/www.hongkiat.com\/blog\/web-dev-youtube-channels\/\">learn the basics of web development<\/a><\/strong>, then continue below.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/chrome-extension-new-tab\/\" class=\"ref-block__link\" title=\"Read More: 15 Chrome Extensions to Spice Up Blank New Tabs\" rel=\"bookmark\"><span class=\"screen-reader-text\">15 Chrome Extensions to Spice Up Blank New Tabs<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/chrome-extension-new-tab.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-23980 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/chrome-extension-new-tab.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">15 Chrome Extensions to Spice Up Blank New Tabs<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tEnhance your browsing experience with these 15 unique Google Chrome extensions for new tabs.\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Prerequisites<\/h2>\n<p>You need to have the following requirements completed before starting with this tutorial.<\/p>\n<ol>\n<li>You must be familiar with <strong>HTML, CSS, and JavaScript<\/strong>. [<a href=\"https:\/\/www.hongkiat.com\/blog\/web-developer-resources-compilation\/\">Check resources<\/a>]<\/li>\n<li>You must have a <strong>code editor<\/strong> to write the extension. [<a href=\"https:\/\/www.hongkiat.com\/blog\/free-code-editors-reviewed\/\">Compare editors<\/a>]<\/li>\n<li>(Optional) If you wish to distribute your extension to other users, you must have a <strong>developer account<\/strong> at Chrome Web Store. [<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/chrome.google.com\/webstore\/developer\/dashboard\">Create an account<\/a>]<\/li>\n<\/ol>\n<p><strong>Note:<\/strong> Google asks you to pay a small fee for creating a developer account at the Chrome Web Store.<\/p>\n<h2>Create an extension<\/h2>\n<p>In this tutorial, I am going to share the process of creating a <strong>to-do extension<\/strong> for Google Chrome. It is going to be a utility (as shown below) to demonstrate essential components and the abilities provided to the extensions.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/how-to-create-chrome-extensions-from-scratch\/todoizr-a-sample-utility-google-chrome.jpg\" width=\"1171\" height=\"539\" alt=\"Todoizr - A sample utility for Google Chrome\"><\/figure>\n<h2>Step 1. Get a template<\/h2>\n<p>Google Chrome, like any other platform, requires its <strong>extensions to have a set structure<\/strong>, which may seem complex for beginners. That is why it is good to get a boilerplate template for an extension that will provide all necessities.<\/p>\n<p><strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/extensionizr.com\/\">Extensionizr<\/a> is the best boilerplate generator<\/strong> for chrome extensions. It allows you to choose one of the given extension types \u2014 <strong>browser action<\/strong> (an action for all pages or the browser), <strong>page action<\/strong> (an action for the current page), or <strong>hidden extension<\/strong> (a background action that is usually hidden in the front interface).<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/how-to-create-chrome-extensions-from-scratch\/extensionizr-best-boilerplate-generator.jpg\" width=\"1200\" height=\"859\" alt=\"Extensionizr is the best boilerplate generator\"><\/figure>\n<p>Moreover, it provides various fine-tuning options to <strong>include\/exclude necessary add-ons, permissions<\/strong>, etc. You need to select \u201c<strong>Browser action<\/strong>\u201d as the extension type and \u201c<strong>No background<\/strong>\u201d as the background page for this tutorial.<\/p>\n<p>When you are done choosing the options for creating your sample extension, hit the \u201cDownload it!\u201d button in Extensionizr. Finally, <strong>extract the archive (.zip) to a directory<\/strong> and open your code editor to start writing the extension.<\/p>\n<h2>Step 2. Code the extension<\/h2>\n<p>After you\u2019ve downloaded and extracted the template, you\u2019ll see a directory structure as shown in the below screenshot. The template is neatly organized, and you must know that the most important file is \u201c<strong>manifest.json<\/strong>\u201c.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/how-to-create-chrome-extensions-from-scratch\/extract-template-directory.jpg\" width=\"956\" height=\"536\" alt=\"Extract the template to a directory\"><\/figure>\n<p>Let\u2019s get to know other files and folders in this directory as well:<\/p>\n<ol>\n<li><strong>_locales:<\/strong> It is used to <strong>store language information<\/strong> for a multilingual app.<\/li>\n<li><strong>css:<\/strong> It functions to store third-party front-end libraries like <a href=\"https:\/\/www.hongkiat.com\/blog\/boostrap-4-best-features\/\">Bootstrap<\/a>.<\/li>\n<li><strong>icons:<\/strong> It is designed to have icons for your extension in varied sizes.<\/li>\n<li><strong>js:<\/strong> It comes handy to save <strong>third-party back-end libraries<\/strong> like <a href=\"https:\/\/www.hongkiat.com\/blog\/jquery-3-new-features\/\">jQuery<\/a>.<\/li>\n<li><strong>src:<\/strong> It stores the actual code that you will write for your extension.<\/li>\n<\/ol>\n<h3>manifest.json<\/h3>\n<p>It contains the <strong>basic metadata about your app<\/strong>, which defines your app\u2019s details to the browser. You can edit it to set your extension\u2019s name, description, website, icon, etc. along with specifics like <strong>browser actions and permissions<\/strong>.<\/p>\n<p>For example, in the below code, you\u2019ll notice that I changed the name, description, and homepage_url along with default_title under browser_action. Moreover, I <strong>added \u201cstorage\u201d under permissions<\/strong> as we need to store data in our extension.<\/p>\n<pre>\r\n{\r\n \"name\": \"Todoizr - To-do Simplified\",\r\n \"version\": \"0.0.1\",\r\n \"manifest_version\": 2,\r\n \"description\": \"Simple to-do app for everyone.\",\r\n \"homepage_url\": \"https:\/\/go.aksingh.net\/todoizr\",\r\n \"icons\": {\r\n  \"16\": \"icons\/icon16.png\",\r\n  \"48\": \"icons\/icon48.png\",\r\n  \"128\": \"icons\/icon128.png\"\r\n },\r\n \"default_locale\": \"en\",\r\n \"browser_action\": {\r\n  \"default_icon\": \"icons\/icon19.png\",\r\n  \"default_title\": \"Todoizr - To-do Simplified\",\r\n  \"default_popup\": \"src\/browser_action\/browser_action.html\"\r\n },\r\n \"permissions\": [\r\n  \"storage\"\r\n ]\r\n}\r\n<\/pre>\n<h3>src\\browser_action<\/h3>\n<p>This directory will hold the code for browser action. In our case, we will <strong>code the popup window<\/strong> shown at clicking the extension\u2019s icon in the browser. Our extension will allow users to add and view to-do items in the popup.<\/p>\n<p><strong>Initial code from the template<\/strong><\/p>\n<p>Though this directory had just an HTML file having all the code, I have decided to divide it into three separate files for better clarity. That said, the HTML file named \u201c<strong>browser_action.html<\/strong>\u201d now has the following code:<\/p>\n<pre>\r\n&lt;!doctype html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n &lt;link rel=\"stylesheet\" href=\".\/browser_action.css\"\/&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n &lt;div id=\"mainPopup\"&gt;\r\n &lt;\/div&gt;\r\n\r\n &lt;script type=\"text\/javascript\" src=\".\/browser_action.js\"&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Moreover, the style file named \u201c<strong>browser_action.css<\/strong>\u201d has the below content while the JavaScript file named \u201cbrowser_action.js\u201d is blank for now.<\/p>\n<pre>\r\n#mainPopup {\r\n padding: 10px;\r\n height: 200px;\r\n width: 400px;\r\n font-family: Helvetica, Ubuntu, Arial, sans-serif;\r\n}\r\n\r\nh1 {\r\n font-size: 2em;\r\n}\r\n<\/pre>\n<p><strong>Design the popup\u2019s interface<\/strong><\/p>\n<p>After setting up the initial project, let\u2019s first design the interface of the popup. I have <strong>set up the interface with a minimalistic approach<\/strong>, showing the name at the top followed by a form to add to-do items and an area below for viewing the added items. It is inspired by the simplistic design of \u201c<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.sanwebe.com\/2014\/08\/css-html-forms-designs\">Form Style 5<\/a>\u201c.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/how-to-create-chrome-extensions-from-scratch\/design-popup-s-interface.jpg\" width=\"1169\" height=\"551\" alt=\"Design the popup's interface\"><\/figure>\n<p>In the code below, I have added two divs \u2013 one for displaying the form to add a to-do item and the other one for displaying the list of already added to-do items. That said, the new code for \u201c<strong>browser_action.html<\/strong>\u201d is as follows:<\/p>\n<pre>\r\n&lt;!doctype html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n &lt;link rel=\"stylesheet\" href=\".\/browser_action.css\"\/&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n &lt;div id=\"mainPopup\"&gt;\r\n\r\n \t&lt;!-- To-do item form --&gt;\r\n  &lt;div class=\"form-style-5\" id=\"form\"&gt;\r\n   &lt;h1&gt;Todoizr&lt;\/h1&gt;\r\n   &lt;form&gt;\r\n    &lt;fieldset&gt;\r\n     &lt;input type=\"text\" name=\"todo\" placeholder=\"What to do?\" id=\"txt\"&gt;\r\n     &lt;input type=\"button\" value=\"Add\" id=\"btn\" \/&gt;\r\n    &lt;\/fieldset&gt;\r\n   &lt;\/form&gt;\r\n  &lt;\/div&gt;\r\n\r\n  &lt;!-- To-do item list --&gt;\r\n  &lt;div class=\"form-style-5\"&gt;\r\n   &lt;ul id=\"list\"&gt;\r\n\r\n   &lt;\/ul&gt;\r\n  &lt;\/div&gt;\r\n &lt;\/div&gt;\r\n\r\n &lt;script type=\"text\/javascript\" src=\".\/browser_action.js\"&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>And the style file \u201c<strong>browser_action.css<\/strong>\u201d now has the following code:<\/p>\n<pre>\r\n@import url(\".\/form_style_5.css\");\r\n\r\n#mainPopup {\r\n height: 200px;\r\n width: 300px;\r\n font-family: Helvetica, Ubuntu, Arial, sans-serif;\r\n}\r\n\r\n\/* To-do item form *\/\r\n\r\n.form-style-5 {\r\n margin: auto;\r\n padding: 0px 20px;\r\n}\r\n\r\n.form-style-5:first-child {\r\n background: none;\r\n}\r\n\r\n.form-style-5 h1 {\r\n color: #308ce3;\r\n font-size: 20px;\r\n text-align: center;\r\n}\r\n\r\n.form-style-5 input[type=\"text\"] {\r\n width: auto;\r\n float: left;\r\n margin-bottom: unset;\r\n}\r\n\r\n.form-style-5 input[type=\"button\"] {\r\n background: #308ce3;\r\n width: auto;\r\n float: right;\r\n padding: 7px;\r\n border: none;\r\n border-radius: 4px;\r\n font-size: 14px;\r\n}\r\n\r\n.form-style-5 input[type=\"button\"]:hover {\r\n background: #3868d5;\r\n}\r\n\r\n\/* To-do item list *\/\r\n\r\n.form-style-5:last-child {\r\n height: inherit;\r\n margin-bottom: 5px;\r\n}\r\n\r\n.form-style-5 ul {\r\n padding: 20px;\r\n}\r\n\r\n.form-style-5 ul li {\r\n font-size: 14px;\r\n}\r\n<\/pre>\n<p>Lastly, the third-party style file \u201c<strong>form_style_5.css<\/strong>\u201d has the below content. It is simply taken from its website to inspire the design of our extension.<\/p>\n<pre>\r\n\/* Form Style 5 by Sanwebe.com *\/\r\n\/* https:\/\/www.sanwebe.com\/2014\/08\/css-html-forms-designs *\/\r\n\r\n.form-style-5{\r\n max-width: 500px;\r\n padding: 10px 20px;\r\n background: #f4f7f8;\r\n margin: 10px auto;\r\n padding: 20px;\r\n background: #f4f7f8;\r\n border-radius: 8px;\r\n font-family: Georgia, \"Times New Roman\", Times, serif;\r\n}\r\n.form-style-5 fieldset{\r\n border: none;\r\n}\r\n.form-style-5 legend {\r\n font-size: 1.4em;\r\n margin-bottom: 10px;\r\n}\r\n.form-style-5 label {\r\n display: block;\r\n margin-bottom: 8px;\r\n}\r\n.form-style-5 input[type=\"text\"],\r\n.form-style-5 input[type=\"date\"],\r\n.form-style-5 input[type=\"datetime\"],\r\n.form-style-5 input[type=\"email\"],\r\n.form-style-5 input[type=\"number\"],\r\n.form-style-5 input[type=\"search\"],\r\n.form-style-5 input[type=\"time\"],\r\n.form-style-5 input[type=\"url\"],\r\n.form-style-5 textarea,\r\n.form-style-5 select {\r\n font-family: Georgia, \"Times New Roman\", Times, serif;\r\n background: rgba(255,255,255,.1);\r\n border: none;\r\n border-radius: 4px;\r\n font-size: 16px;\r\n margin: 0;\r\n outline: 0;\r\n padding: 7px;\r\n width: 100%;\r\n box-sizing: border-box;\r\n -webkit-box-sizing: border-box;\r\n -moz-box-sizing: border-box;\r\n background-color: #e8eeef;\r\n color:#8a97a0;\r\n -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;\r\n box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;\r\n margin-bottom: 30px;\r\n\r\n}\r\n.form-style-5 input[type=\"text\"]:focus,\r\n.form-style-5 input[type=\"date\"]:focus,\r\n.form-style-5 input[type=\"datetime\"]:focus,\r\n.form-style-5 input[type=\"email\"]:focus,\r\n.form-style-5 input[type=\"number\"]:focus,\r\n.form-style-5 input[type=\"search\"]:focus,\r\n.form-style-5 input[type=\"time\"]:focus,\r\n.form-style-5 input[type=\"url\"]:focus,\r\n.form-style-5 textarea:focus,\r\n.form-style-5 select:focus{\r\n background: #d2d9dd;\r\n}\r\n.form-style-5 select{\r\n -webkit-appearance: menulist-button;\r\n height:35px;\r\n}\r\n.form-style-5 .number {\r\n background: #1abc9c;\r\n color: #fff;\r\n height: 30px;\r\n width: 30px;\r\n display: inline-block;\r\n font-size: 0.8em;\r\n margin-right: 4px;\r\n line-height: 30px;\r\n text-align: center;\r\n text-shadow: 0 1px 0 rgba(255,255,255,0.2);\r\n border-radius: 15px 15px 15px 0px;\r\n}\r\n\r\n.form-style-5 input[type=\"submit\"],\r\n.form-style-5 input[type=\"button\"]\r\n{\r\n position: relative;\r\n display: block;\r\n padding: 19px 39px 18px 39px;\r\n color: #FFF;\r\n margin: 0 auto;\r\n background: #1abc9c;\r\n font-size: 18px;\r\n text-align: center;\r\n font-style: normal;\r\n width: 100%;\r\n border: 1px solid #16a085;\r\n border-width: 1px 1px 3px;\r\n margin-bottom: 10px;\r\n}\r\n.form-style-5 input[type=\"submit\"]:hover,\r\n.form-style-5 input[type=\"button\"]:hover\r\n{\r\n background: #109177;\r\n}\r\n<\/pre>\n<p><strong>Write the popup\u2019s logic<\/strong><\/p>\n<p>Once we are done with the extension\u2019s front-end, let\u2019s now write the logic for its working. We need our extension to be able to <strong>add to-do items and also display them<\/strong> in the popup window. So we will add a button click listener to add the input text as a to-do item and a page load listener to show those items.<\/p>\n<p>In the code below, we are going to use two functions \u2014 <strong>sync.get() and sync.set()<\/strong>, which are part of \u201c<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.chrome.com\/apps\/storage\">chrome.storage<\/a>\u201c. We need the second one to save the to-do items in the storage and the first one to retrieve them and show them.<\/p>\n<p>That said, below is the final code of the \u201c<strong>browser_action.js<\/strong>\u201d file. As you can see below, the code is highly commented to help you understand its purpose.<\/p>\n<pre>\r\nfunction loadItems() {\r\n \/* First get() the data from the storage *\/\r\n chrome.storage.sync.get(['todo'], function(result) {\r\n  var todo = []\r\n\r\n  if (result && result.todo && result.todo.trim() !== '') {\r\n   \/* Parse and get the array as it is saved as a string *\/\r\n   todo = JSON.parse(result.todo)\r\n  }\r\n\r\n  console.log('todo.length = ' + todo.length)\r\n\r\n  for (var i = 0; i &lt; todo.length; i++) {\r\n   item = todo[i]\r\n\r\n   if (item && item.trim() !== '') {\r\n    \/* Append the items in the #list for showing them *\/\r\n    var list = document.getElementById('list')\r\n    var entry = document.createElement('li')\r\n    var text = document.createTextNode(item)\r\n\r\n    entry.appendChild(text)\r\n    list.appendChild(entry)\r\n   }\r\n  }\r\n })\r\n}\r\n\r\n\/* Load the to-do items upon popup load *\/\r\ndocument.addEventListener('DOMContentLoaded', function(){\r\n console.log('Inside doc.loaded()')\r\n\r\n loadItems()\r\n})\r\n\r\n\/* Save the to-do item upon button click *\/\r\ndocument.getElementById('btn').addEventListener('click', function (ev) {\r\n console.log('Inside btn.click()')\r\n\r\n text = document.getElementById('txt').value\r\n\r\n if (text && text.trim() !== '') {\r\n\r\n  \/* First get() old data as calling set() will replace it *\/\r\n  chrome.storage.sync.get(['todo'], function(result) {\r\n   var todo = []\r\n\r\n   if (result && result.todo && result.todo.trim() !== '') {\r\n    \/* Parse and get the array as it is saved as a string *\/\r\n    todo = JSON.parse(result.todo)\r\n   }\r\n\r\n   todo.push(text)\r\n\r\n   chrome.storage.sync.set({'todo': JSON.stringify(todo)}, function() {\r\n    \/* Data is saved now *\/\r\n\r\n    var list = document.getElementById('list')\r\n\r\n    while (list.firstChild) {\r\n     list.removeChild(list.firstChild)\r\n    }\r\n\r\n    loadItems()\r\n   })\r\n  })\r\n }\r\n})\r\n<\/pre>\n<h2>Step 3. Load the extension<\/h2>\n<p>After you are done writing your extension, it is the time to test it through Google Chrome\u2019s feature that offers to load non-store, unpacked extensions. But first, you must <strong>enable the developer mode<\/strong> in your browser: click the <strong>options<\/strong> button <strong>&gt;<\/strong> choose \u201c<strong>More tools<\/strong>\u201d <strong>&gt;<\/strong> <strong>Extensions<\/strong>, and then toggle on \u201c<strong>Developer mode<\/strong>\u201c.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/how-to-create-chrome-extensions-from-scratch\/load-unpacked-extension-google-chrome.jpg\" width=\"1200\" height=\"358\" alt=\"Load unpacked extension in Google Chrome\"><\/figure>\n<p>Now you will see more buttons under the search bar. Here click the \u201c<strong>Load unpacked<\/strong>\u201d button. It will ask for the directory \u2014 browse and select your extension\u2019s directory, and it will load the extension. If you edit or update the code of your extension, you can click the <strong>reload button to load the latest changes<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/how-to-create-chrome-extensions-from-scratch\/reload-button-loads-latest-changes.jpg\" width=\"1200\" height=\"360\" alt=\"Reload button loads the latest changes\"><\/figure>\n<p>In our example, <strong>you will see the extension\u2019s icon<\/strong> beside the profile icon because we added a browser action in our sample extension. You can click that icon to <strong>add and view to-do items<\/strong> in our extension as that is the specified action.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/how-to-create-chrome-extensions-from-scratch\/click-todoizr-s-icon-google-chrome.jpg\" width=\"1171\" height=\"539\" alt=\"Click the Todoizr's icon in Google Chrome\"><\/figure>\n<h2>Distribute an extension<\/h2>\n<p>Though it is <strong>easy to upload an extension<\/strong> to Chrome Web Store, the process is too long to cover all the details. In short, you create a developer account, package your extension, and then submit it along with its content details (like name, icon, screenshots, etc.); as listed in its <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.chrome.com\/webstore\/publish\">step-by-step guide<\/a>.<\/p>\n<h2>What next? Read and code<\/h2>\n<p>As you may have expected, the purpose of this tutorial is to get you started with the extension development for Google Chrome. I have tried to cover the basic concepts; however, <strong>you need to know a lot more<\/strong> for doing serious extension development.<\/p>\n<p>That said, below are some of my <strong>favorite go-to resources<\/strong> for learning to develop extensions for Google Chrome and other Chromium-based browsers:<\/p>\n<ol>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.chrome.com\/extensions\/devguide\">All abilities, components, and features<\/a> of extensions.<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/chrome-extensions-samples\">Sample extensions<\/a> by the team behind Google Chrome.<\/li>\n<\/ol>\n<p>If you have gone through these resources and are ready for some challenge, try adding below features in the extension you just completed developing:<\/p>\n<ol>\n<li>An option to delete the saved to-do items.<\/li>\n<li>A feature to show notifications when done adding an item.<\/li>\n<\/ol>","protected":false},"excerpt":{"rendered":"<p>A step-by-step guide on how to create a simple Google Chrome extension from scratch.<\/p>\n","protected":false},"author":120,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[1258,2998,511],"topic":[],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Create Chrome Extensions from Scratch - Hongkiat<\/title>\n<meta name=\"description\" content=\"A step-by-step guide on how to create a simple Google Chrome extension from scratch.\" \/>\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.hongkiat.com\/blog\/how-to-create-chrome-extensions-from-scratch\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Chrome Extensions from Scratch\" \/>\n<meta property=\"og:description\" content=\"A step-by-step guide on how to create a simple Google Chrome extension from scratch.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/how-to-create-chrome-extensions-from-scratch\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-23T13:43:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-12T12:22:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/how-to-create-chrome-extensions-from-scratch\/chrome-web-store.jpg\" \/>\n<meta name=\"author\" content=\"Ashutosh KS\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ashutosh KS\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-create-chrome-extensions-from-scratch\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-create-chrome-extensions-from-scratch\\\/\"},\"author\":{\"name\":\"Ashutosh KS\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/0c0611010da9a578caa32a34232cf7bd\"},\"headline\":\"How to Create Chrome Extensions from Scratch\",\"datePublished\":\"2021-03-23T13:43:06+00:00\",\"dateModified\":\"2023-04-12T12:22:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-create-chrome-extensions-from-scratch\\\/\"},\"wordCount\":1357,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-create-chrome-extensions-from-scratch\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/how-to-create-chrome-extensions-from-scratch\\\/chrome-web-store.jpg\",\"keywords\":[\"Chrome\",\"Chrome Extensions\",\"Web Developers\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-create-chrome-extensions-from-scratch\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-create-chrome-extensions-from-scratch\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-create-chrome-extensions-from-scratch\\\/\",\"name\":\"How to Create Chrome Extensions from Scratch - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-create-chrome-extensions-from-scratch\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-create-chrome-extensions-from-scratch\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/how-to-create-chrome-extensions-from-scratch\\\/chrome-web-store.jpg\",\"datePublished\":\"2021-03-23T13:43:06+00:00\",\"dateModified\":\"2023-04-12T12:22:17+00:00\",\"description\":\"A step-by-step guide on how to create a simple Google Chrome extension from scratch.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-create-chrome-extensions-from-scratch\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-create-chrome-extensions-from-scratch\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-create-chrome-extensions-from-scratch\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/how-to-create-chrome-extensions-from-scratch\\\/chrome-web-store.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/how-to-create-chrome-extensions-from-scratch\\\/chrome-web-store.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/how-to-create-chrome-extensions-from-scratch\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create Chrome Extensions from Scratch\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/0c0611010da9a578caa32a34232cf7bd\",\"name\":\"Ashutosh KS\",\"description\":\"Ashutosh is a writer, entrepreneur, and a tech evangelist with expertise in the area of Computer Programming.\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/ashutosh_ks\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create Chrome Extensions from Scratch - Hongkiat","description":"A step-by-step guide on how to create a simple Google Chrome extension from scratch.","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.hongkiat.com\/blog\/how-to-create-chrome-extensions-from-scratch\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Chrome Extensions from Scratch","og_description":"A step-by-step guide on how to create a simple Google Chrome extension from scratch.","og_url":"https:\/\/www.hongkiat.com\/blog\/how-to-create-chrome-extensions-from-scratch\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2021-03-23T13:43:06+00:00","article_modified_time":"2023-04-12T12:22:17+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/how-to-create-chrome-extensions-from-scratch\/chrome-web-store.jpg","type":"","width":"","height":""}],"author":"Ashutosh KS","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Ashutosh KS","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/how-to-create-chrome-extensions-from-scratch\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/how-to-create-chrome-extensions-from-scratch\/"},"author":{"name":"Ashutosh KS","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/0c0611010da9a578caa32a34232cf7bd"},"headline":"How to Create Chrome Extensions from Scratch","datePublished":"2021-03-23T13:43:06+00:00","dateModified":"2023-04-12T12:22:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/how-to-create-chrome-extensions-from-scratch\/"},"wordCount":1357,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/how-to-create-chrome-extensions-from-scratch\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/how-to-create-chrome-extensions-from-scratch\/chrome-web-store.jpg","keywords":["Chrome","Chrome Extensions","Web Developers"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/how-to-create-chrome-extensions-from-scratch\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/how-to-create-chrome-extensions-from-scratch\/","url":"https:\/\/www.hongkiat.com\/blog\/how-to-create-chrome-extensions-from-scratch\/","name":"How to Create Chrome Extensions from Scratch - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/how-to-create-chrome-extensions-from-scratch\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/how-to-create-chrome-extensions-from-scratch\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/how-to-create-chrome-extensions-from-scratch\/chrome-web-store.jpg","datePublished":"2021-03-23T13:43:06+00:00","dateModified":"2023-04-12T12:22:17+00:00","description":"A step-by-step guide on how to create a simple Google Chrome extension from scratch.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/how-to-create-chrome-extensions-from-scratch\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/how-to-create-chrome-extensions-from-scratch\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/how-to-create-chrome-extensions-from-scratch\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/how-to-create-chrome-extensions-from-scratch\/chrome-web-store.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/how-to-create-chrome-extensions-from-scratch\/chrome-web-store.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/how-to-create-chrome-extensions-from-scratch\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create Chrome Extensions from Scratch"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/0c0611010da9a578caa32a34232cf7bd","name":"Ashutosh KS","description":"Ashutosh is a writer, entrepreneur, and a tech evangelist with expertise in the area of Computer Programming.","sameAs":["https:\/\/www.hongkiat.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/ashutosh_ks\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-bSx","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/45665","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/120"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=45665"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/45665\/revisions"}],"predecessor-version":[{"id":66485,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/45665\/revisions\/66485"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=45665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=45665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=45665"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=45665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}