{"id":36684,"date":"2022-01-17T00:05:19","date_gmt":"2022-01-16T18:35:19","guid":{"rendered":"https:\/\/techmasala.addastudents.com\/dev\/?p=36684"},"modified":"2022-01-17T00:05:21","modified_gmt":"2022-01-16T18:35:21","slug":"how-to-develop-and-host-a-google-chrome-extension","status":"publish","type":"post","link":"https:\/\/techmasala.addastudents.com\/dev\/how-to-develop-and-host-a-google-chrome-extension\/","title":{"rendered":"How to Develop and Host a Google Chrome Extension?"},"content":{"rendered":"\n

* What is the Google Chrome extension?<\/h2>\n\n\n\n

Extensions are software programs, built on web technologies (such as HTML, CSS, and JavaScript) that enable users to customize the Chrome browsing experience.<\/p>\n\n\n\n

* Create sample chrome extension<\/h2>\n\n\n\n

We’ll follow the below steps in order to develop the chrome extension.<\/p>\n\n\n\n

  1. Extensions start with their manifest<\/a>. Create a file called manifest.json and include the following code.<\/li><\/ol>\n\n\n\n
    {\r\n \"name\": \"Time Zones\",\r\n \"description\": \"Build an Extension!\",\r\n \"version\": \"1.0\",\r\n \"manifest_version\": 3,\r\n    \"browser_action\": {\r\n        \"default_popup\": \"popup.html\",\r\n        \"default_icon\": \"logo.png\"\r\n    }\r\n}\r\n<\/pre>\n\n\n\n
    1. Extensions can have many forms of a user interface; this one will use a popup. Create and add a file named popup.html to the extension’s directory<\/li>
    2. For adding the functionality in the extension, you can use JS(java script) and call that JS code in your html page.<\/li>
    3. Keep all your files in a separate folder to test the extension<\/li>
    4. Open the Extension Management page by navigating to chrome:\/\/extensions.<\/li>
    5. Enable Developer Mode by clicking the toggle switch next to Developer mode<\/strong>.<\/li>
    6. Click the Load unpacked<\/strong> button and select the extension directory.<\/li><\/ol>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      * Publish in the Chrome Web Store<\/h2>\n\n\n\n
      \u00a0To publish your item to the Chrome Web Store, follow these steps:<\/p>\n\n\n\n
      1. Create your item’s zip file.<\/li>
      2. Create and setup a developer account.<\/li>
      3. Upload your item.<\/li>
      4. Add assets for your listing.<\/li>
      5. Submit your item for publishing.<\/li><\/ol>\n\n\n\n
        You can see the below chrome extension which is created and published by us. It’ll show you other zones’ time.<\/p>\n\n\n\n
        \"\"\/<\/figure>\n\n\n\n
        Time Zones<\/a><\/p>\n\n\n\n
        References:<\/strong><\/p>\n\n\n\n
        https:\/\/developer.chrome.com\/docs\/extensions\/mv3\/getstarted\/<\/a><\/p>\n\n\n\n
        https:\/\/developer.chrome.com\/docs\/webstore\/publish\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
        * What is the Google Chrome extension? Extensions are software programs, built on web technologies (such as HTML, CSS, and JavaScript) that enable users to customize the Chrome browsing experience. * Create sample chrome extension We’ll follow the below steps in order to develop the chrome extension. Extensions start with their manifest. Create a file […]<\/p>\n","protected":false},"author":1,"featured_media":36685,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70,72],"tags":[20,60,773,93,41,775,774,47,45,112,94,98],"class_list":["post-36684","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-learn-technology-free","category-tech","tag-app","tag-apps","tag-chrome","tag-coding","tag-explore-learn","tag-extension","tag-google-chrome","tag-javascript","tag-js","tag-learning","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/posts\/36684","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/comments?post=36684"}],"version-history":[{"count":1,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/posts\/36684\/revisions"}],"predecessor-version":[{"id":36686,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/posts\/36684\/revisions\/36686"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/media\/36685"}],"wp:attachment":[{"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/media?parent=36684"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/categories?post=36684"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/tags?post=36684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}