{"id":993,"date":"2024-02-18T05:27:23","date_gmt":"2024-02-18T05:27:23","guid":{"rendered":"https:\/\/musefind.com\/?p=993"},"modified":"2024-02-18T07:13:20","modified_gmt":"2024-02-18T07:13:20","slug":"how-to-build-a-chrome-extension-with-react-js","status":"publish","type":"post","link":"https:\/\/musefind.com\/how-to-build-a-chrome-extension-with-react-js\/","title":{"rendered":"How to build a Chrome Extension with React JS"},"content":{"rendered":"\n<p id=\"08eb\">Have you ever tried looking for articles about creating a Chrome Extension with React? I have and to say the least, there are not a lot of straight-forward ones. This article will offer an easy and concise guide of the whole process using React.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><div><strong>In This Article:<\/strong><\/div><nav><ul><li class=\"\"><a href=\"#setup\">Setup:<\/a><\/li><li class=\"\"><a href=\"#getting-started\">Getting Started:<\/a><\/li><li class=\"\"><a href=\"#getting-your-extension-onto-google-chrome\">Getting your extension onto Google Chrome:<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"setup\"><strong>Setup:<\/strong><\/h2>\n\n\n\n<p id=\"e633\">Before we get started, you will need to know how to create a React project. The easiest way to do this is with&nbsp;<a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\" rel=\"noreferrer noopener\" target=\"_blank\"><strong>create-react-app<\/strong><\/a><strong>&nbsp;<\/strong>in your command-line.<\/p>\n\n\n\n<p id=\"cf1f\">Steps to Create:<\/p>\n\n\n\n<ol>\n<li>Install create-react-app with:&nbsp;<code>npm install \u2013g create-react-app<\/code><\/li>\n<\/ol>\n\n\n\n<p id=\"6c66\">2. Change to the directory where you want to create your extension<\/p>\n\n\n\n<p id=\"0eb7\">3. Create a new project with the command:&nbsp;<code>create-react-app reactextension<\/code><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"getting-started\"><strong>Getting Started:<\/strong><\/h2>\n\n\n\n<p id=\"48be\">Now let\u2019s open up your project in an IDE, I\u2019ll use&nbsp;<a href=\"https:\/\/ide.atom.io\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Atom<\/strong><\/a>&nbsp;for this guide. Let\u2019s look for the<strong>&nbsp;public<\/strong>&nbsp;folder and then locate your&nbsp;<strong>manifest.json&nbsp;<\/strong>inside of it<strong>.<\/strong>&nbsp;Your manifest.json should look like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"short_name\": \"React App\",\n  \"name\": \"Create React App Sample\",\n  \"icons\": &#91;\n    {\n      \"src: \"favicon.ico\",\n      \"sizes\": \"64x64 32x32 24x24 16x16\",\n      \"type\": \"image\/x-icon\"\n    }\n  ],\n  \"start_url\": \".\/index.html\",\n  \"display\": \"standalone\",\n  \"theme_color: \"#000000\",\n  \"background_color\": \"#ffffff\",\n}<\/code><\/pre>\n\n\n\n<p>We are going to make the following changes to your manifest.json:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"short_name\": \"React App\",\n  \"name\": \"React Extension\",\n  \"manifest_version\": 2,\n  \"browser_action\": {\n    \"default_popup\": \"index.html\",\n    \"default_title\": \"React Ext\"\n  },\n  \"version\": \"1.0\"\n}<\/code><\/pre>\n\n\n\n<p id=\"bbea\"><strong><em>Note:<\/em><\/strong><em>&nbsp;The default_popup field is the body of your extension, it will grab all your code from the index.html and display it when the extension is clicked (your index.html will automatically be created in the next step).<\/em><\/p>\n\n\n\n<p id=\"8ea9\">Ok! Now that the configuration is all done, let\u2019s create a build folder for your application.<\/p>\n\n\n\n<p id=\"8f8f\">Run the command&nbsp;<code>yarn build<\/code>&nbsp;and create a build for your extension.<\/p>\n\n\n\n<p id=\"7213\">If you want to look at more configurations for your manifest.json you can go to Google\u2019s<strong>&nbsp;<a href=\"https:\/\/developer.chrome.com\/docs\/extensions\/develop\" target=\"_blank\" rel=\"noreferrer noopener\">Chrome Extension Developer Guide<\/a>.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"getting-your-extension-onto-google-chrome\"><strong>Getting your extension onto Google Chrome:<\/strong><\/h2>\n\n\n\n<p id=\"3e93\">Now let\u2019s go to Chrome\u2019s extension manager, you can access this by either typing&nbsp;<strong>chrome:\/\/extensions<\/strong>&nbsp;in the URL line&nbsp;<strong>or<\/strong>&nbsp;by clicking the settings button in Chrome\u2019s toolbar on the top right, finding More Tools and then clicking Extensions.<\/p>\n\n\n\n<p>Make sure to check the&nbsp;<strong>Developer mode&nbsp;<\/strong>checkbox in the top right corner of the page. Once this is done, all you have to do is drag your build folder onto the page and your extension will appear. Click the icon in the nav bar and your extension will open!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"470\" height=\"413\" src=\"https:\/\/musefind.com\/wp-content\/uploads\/2024\/02\/Developer-mode.jpg\" alt=\"Developer mode\" class=\"wp-image-995\" srcset=\"https:\/\/musefind.com\/wp-content\/uploads\/2024\/02\/Developer-mode.jpg 470w, https:\/\/musefind.com\/wp-content\/uploads\/2024\/02\/Developer-mode-300x264.jpg 300w\" sizes=\"(max-width: 470px) 100vw, 470px\" \/><\/figure>\n\n\n\n<p id=\"696b\">To edit your extension, edit it like any other react project, create another build and drag a new copy into Chrome\u2019s Extension Page.<\/p>\n\n\n\n<p id=\"3494\">The goal of a Chrome Extension should be to improve the user\u2019s browsing experience and hopefully my tutorial helped you get started on this. Let me know if you have anything to add to this article and if it helped you out, a Like would be great!<\/p>\n\n\n\n<p id=\"3fdc\">Thanks for reading!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever tried looking for articles about creating a Chrome Extension with React? I have and to say the least, there are not a lot of straight-forward ones. This article will offer an easy and concise guide of the whole process using React. Setup: Before we get started, you will need to know how &#8230; <a title=\"How to build a Chrome Extension with React JS\" class=\"read-more\" href=\"https:\/\/musefind.com\/how-to-build-a-chrome-extension-with-react-js\/\" aria-label=\"More on How to build a Chrome Extension with React JS\">Read more<\/a><\/p>\n","protected":false},"author":5,"featured_media":994,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"_links":{"self":[{"href":"https:\/\/musefind.com\/wp-json\/wp\/v2\/posts\/993"}],"collection":[{"href":"https:\/\/musefind.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/musefind.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/musefind.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/musefind.com\/wp-json\/wp\/v2\/comments?post=993"}],"version-history":[{"count":4,"href":"https:\/\/musefind.com\/wp-json\/wp\/v2\/posts\/993\/revisions"}],"predecessor-version":[{"id":1035,"href":"https:\/\/musefind.com\/wp-json\/wp\/v2\/posts\/993\/revisions\/1035"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/musefind.com\/wp-json\/wp\/v2\/media\/994"}],"wp:attachment":[{"href":"https:\/\/musefind.com\/wp-json\/wp\/v2\/media?parent=993"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/musefind.com\/wp-json\/wp\/v2\/categories?post=993"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/musefind.com\/wp-json\/wp\/v2\/tags?post=993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}