[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-article-how-to-build-a-chrome-extension-using-react":3},{"meta":4,"html":30,"authorName":31,"authorFacebookUrl":32,"authorProfileImage":33,"authorWebsite":34,"authorJobTitle":35,"authorTwitterUrl":36,"wordCount":37,"recommended":38},{"id":5,"slug":6,"type":7,"title":8,"excerpt":9,"metaTitle":10,"metaDescription":10,"canonicalUrl":10,"featureImage":11,"publishedAt":17,"createdAt":18,"updatedAt":19,"featured":20,"readingTime":21,"tags":22,"author":29,"recommendedSlugs":10},"6368b5be72d57a060160d0a3","how-to-build-a-chrome-extension-using-react","post","How To Build A Chrome Extension Using React","Discover how to create a Chrome Extension from scratch and build a dynamic frontend with React. A Step-by-step guide for beginners and developers.",null,{"url":12,"alt":13,"caption":14,"width":15,"height":16},"\u002Fblog\u002Fcontent\u002Fimages\u002F2023\u002F08\u002Fchrome-react.png","Handshake with fists - Left shows React logo, right side shows Chrome extension Logo","Background Photo by \u003Ca href=\"https:\u002F\u002Funsplash.com\u002F@markusspiske?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\" rel=\"noopener\">Markus Spiske\u003C\u002Fa> on \u003Ca href=\"https:\u002F\u002Funsplash.com\u002Fs\u002Fphotos\u002Fshaking-hands?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\" rel=\"noopener\">Unsplash\u003C\u002Fa>",2036,1354,"2022-11-09T06:53:35.000+00:00","2022-11-07T07:37:34.000+00:00","2024-09-19T18:59:09.000+00:00",false,7,[23,26],{"name":24,"slug":25},"Chrome Extension","chrome-extension",{"name":27,"slug":28},"React","react","marius-bongarts","\u003Cp>\n  Creating your own Chrome Extensions is easier than you might think—and it's a lot of fun! You can unleash your full\n  creativity and customize websites as you like.\n\u003C\u002Fp>\n\u003Cp>\n  If you're a full-stack or frontend developer like me, you probably use popular frameworks like React, Next.js, or\n  Vue.js. Here's the thing: you don't have to choose between building a Chrome Extension and using these frameworks—you\n  can combine them!\n\u003C\u002Fp>\n\u003Cblockquote>\n  You can use any frontend framework you like to build a Chrome Extension, or just\n  \u003Ca href=\"https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fhow-to-use-web-components-in-react\u002F\">\n    go with Web Components to create your extension\n  \u003C\u002Fa>\n  .\n\u003C\u002Fblockquote>\n\u003Cp>\n  In this guide, we'll set up a simple Chrome Extension alongside a React app and load it onto any website. And yes,\n  it's as easy as it sounds.\n\u003C\u002Fp>\n\u003Cp>\n  Before diving in, let's create two subfolders in our repository:\n  \u003Cem>\u003Cstrong>extension\u003C\u002Fstrong>\u003C\u002Fem>\n  and\n  \u003Cem>\u003Cstrong>react-chrome-app\u003C\u002Fstrong>\u003C\u002Fem>\n  . The\n  \u003Cem>extension\u003C\u002Fem>\n  folder will hold our Chrome extension files, while the\n  \u003Cem>\u003Cstrong>react-chrome-app\u003C\u002Fstrong>\u003C\u002Fem>\n  folder is where we'll build our React app.\n\u003C\u002Fp>\n\u003Cp>The structure should look like this:\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*Ke4Ak543a2n30GBfEtPcmw.png\"\n    class=\"kg-image\"\n    alt=\"Repository folder structure\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>Repository folder structure\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Chr \u002F>\n\u003Ch3 id=\"chrome-extension-setup\">Chrome Extension Setup\u003C\u002Fh3>\n\u003Cp>\n  Let’s dive right into the setup of our Chrome extension. First of all, we need to create a\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  file. We will create the file in our\n  \u003Cstrong>\u003Cem>extension\u003C\u002Fem>\u003C\u002Fstrong>\n  subfolder.\n\u003C\u002Fp>\n\u003Cp>\n  The manifest is the entry point of our extension, which defines metadata, such as name and version, as well as\n  additional functionalities.\n\u003C\u002Fp>\n\u003Ch4 id=\"create-manifestjson\">Create manifest.json\u003C\u002Fh4>\n\u003Cp>\n  Let’s create a\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  and add some metadata:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist119147375\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-manifest-json\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-json  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"manifest.json content, created by MariusBongarts on 07:36AM on November 02, 2022.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"manifest.json\">\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC1\" class=\"blob-code blob-code-inner js-file-line\">{\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC2\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"name"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>React Chrome Extension\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC3\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"version"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>1.0.0\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC4\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"manifest_version"\u003C\u002Fspan>: \u003Cspan class=\"pl-c1\">3\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC5\" class=\"blob-code blob-code-inner js-file-line\">}\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fdc17bd706ffded35c541cfa6b9441955\u002Fraw\u002F19707622c854abf50537fb1b0c61f25b44c70660\u002Fmanifest.json\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fdc17bd706ffded35c541cfa6b9441955#file-manifest-json\" class=\"Link--inTextBlock\">\n          manifest.json\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  The first three values\n  \u003Ccode>name\u003C\u002Fcode>\n  ,\n  \u003Ccode>version\u003C\u002Fcode>\n  and\n  \u003Ccode>manifest_version\u003C\u002Fcode>\n  are sufficient to create our first chrome extension.\n\u003C\u002Fp>\n\u003Ch4 id=\"install-the-extension\">Install the extension\u003C\u002Fh4>\n\u003Cp>\n  Open your Chrome browser and navigate to\n  \u003Cstrong>chrome:\u002F\u002Fextensions\u003C\u002Fstrong>\n  .\n\u003C\u002Fp>\n\u003Cp>\n  Enable Developer Mode by clicking the toggle switch next to\n  \u003Cstrong>Developer mode\u003C\u002Fstrong>\n  . Click the\n  \u003Cstrong>Load unpacked\u003C\u002Fstrong>\n  button and select the\n  \u003Cstrong>\u003Cem>extension\u003C\u002Fem>\u003C\u002Fstrong>\n  directory of our repo containing our\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  .\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*W5rm8itxo70rfLrdtd3VKQ.png\"\n    class=\"kg-image\"\n    alt=\"Screenshot: How to load unpacked Chrome extension\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>Load unpacked Chrome extension\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>Congratulations! You’ve just created a Chrome Extension!\u003C\u002Fp>\n\u003Ch3 id=\"set-up-react-application\">Set up React application\u003C\u002Fh3>\n\u003Cp>Now, let's set up our React app in a subfolder within our repository.\u003C\u002Fp>\n\u003Cp>We can do this by running:\u003C\u002Fp>\n\u003Cp>\u003Ccode>npx create-react-app react-chrome-app --template typescript\u003C\u002Fcode>\u003C\u002Fp>\n\u003Cp>or\u003C\u002Fp>\n\u003Cp>\u003Ccode>yarn create create-react-app react-chrome-app --template typescript\u003C\u002Fcode>\u003C\u002Fp>\n\u003Cp>\n  Now, let’s get rid of all the unnecessary stuff. Let’s remove all CSS styles and the React template code in the\n  \u003Ccode>App.tsx\u003C\u002Fcode>\n  component. For this article, let’s put a simple\n  \u003Cem>“Hello from React App”\u003C\u002Fem>\n  headline\n  \u003Cem>\u003C\u002Fem>\n  to our component:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist119165178\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-app-tsx\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-tsx  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"App.tsx content, created by MariusBongarts on 07:33AM on November 03, 2022.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"App.tsx\">\n        \u003Ctr>\n          \u003Ctd id=\"file-app-tsx-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-app-tsx-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>function\u003C\u002Fspan> \u003Cspan class=pl-v>App\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-app-tsx-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-app-tsx-LC2\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-k>return\u003C\u002Fspan> \u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-app-tsx-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-app-tsx-LC3\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-s1>div\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-app-tsx-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-app-tsx-LC4\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-s1>header\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-app-tsx-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-app-tsx-LC5\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-s1>h5\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>Hello From React App\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-s1>h5\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-app-tsx-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-app-tsx-LC6\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-s1>header\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-app-tsx-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-app-tsx-LC7\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-s1>div\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-app-tsx-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-app-tsx-LC8\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-app-tsx-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-app-tsx-LC9\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-app-tsx-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-app-tsx-LC10\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-app-tsx-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-app-tsx-LC11\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>export\u003C\u002Fspan> \u003Cspan class=pl-k>default\u003C\u002Fspan> \u003Cspan class=pl-v>App\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fff60e04d3657bee7f06329a663f60ac9\u002Fraw\u002F5aadb8c99b4615fcce6611b9deada39006a6a360\u002FApp.tsx\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fff60e04d3657bee7f06329a663f60ac9#file-app-tsx\" class=\"Link--inTextBlock\">\n          App.tsx\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  If you want to include styles, you should use\n  \u003Ca href=\"https:\u002F\u002Fstyled-components.com\u002F\" rel=\"noopener\">\u003Cem>styled-components\u003C\u002Fem>\u003C\u002Fa>\n  to include them in the Javascript bundle.\n\u003C\u002Fp>\n\u003Cp>\n  As we want to include the React app in our Chrome Extension, we need to configure how React sets up our application.\n  For that, we need to look into the\n  \u003Ccode>index.tsx\u003C\u002Fcode>\n  file:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist119165417\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-index-tsx\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-tsx  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"index.tsx content, created by MariusBongarts on 07:58AM on November 03, 2022.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"index.tsx\">\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-s1>root\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-v>ReactDOM\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>createRoot\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC2\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-smi>document\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>getElementById\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s>"root"\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-k>as\u003C\u002Fspan> \u003Cspan class=pl-smi>HTMLElement\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC3\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC4\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s1>root\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>render\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC5\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-v>React\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>StrictMode\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC6\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-v>App\u003C\u002Fspan> \u003Cspan class=pl-kos>\u002F>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC7\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-v>React\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>StrictMode\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC8\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F2b9965b9cb447975143519747bdb6dee\u002Fraw\u002F3b05756b220cf5779068551d51631461242332d4\u002Findex.tsx\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F2b9965b9cb447975143519747bdb6dee#file-index-tsx\" class=\"Link--inTextBlock\">\n          index.tsx\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  Here we can see that React creates a React root for an element with\n  \u003Ccode>id=\"root\"\u003C\u002Fcode>\n  . Then, the root element is used to render our React component\n  \u003Ccode>App.tsx\u003C\u002Fcode>\n  into the DOM with\n  \u003Ccode>render\u003C\u002Fcode>\n  . React assumes that the root element exists because it lives in our\n  \u003Ccode>index.html\u003C\u002Fcode>\n  file. Once the element can not be found, our application will fail.\n\u003C\u002Fp>\n\u003Cp>\n  To use our app on any website, we can not assume anymore that the root element exists. That’s why we will create our\n  own root element programmatically before rendering the React application.\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist119165545\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-index-tsx\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-tsx  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"index.tsx content, created by MariusBongarts on 08:09AM on November 03, 2022.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"index.tsx\">\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-s1>rootElement\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-smi>document\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>createElement\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s>"div"\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC2\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s1>rootElement\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>id\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-s>"react-chrome-app"\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC3\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-smi>document\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>body\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>appendChild\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>rootElement\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC4\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC5\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-s1>root\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-v>ReactDOM\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>createRoot\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>rootElement\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC6\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s1>root\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>render\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC7\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-v>React\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>StrictMode\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC8\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-v>App\u003C\u002Fspan> \u003Cspan class=pl-kos>\u002F>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC9\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-v>React\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>StrictMode\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC10\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fb7f0557acce39234e2d22eb562937a9c\u002Fraw\u002F9119494251b8a70ebddb19749a4286adac24bb3a\u002Findex.tsx\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fb7f0557acce39234e2d22eb562937a9c#file-index-tsx\" class=\"Link--inTextBlock\">\n          index.tsx\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  We create a new\n  \u003Ccode>div\u003C\u002Fcode>\n  element, pass our own ID, and append the HTML element as a child to the\n  \u003Ccode>body\u003C\u002Fcode>\n  of the document. Then, we can pass the\n  \u003Ccode>rootElement\u003C\u002Fcode>\n  to the\n  \u003Ccode>createRoot\u003C\u002Fcode>\n  function.\n\u003C\u002Fp>\n\u003Cp>\n  Finally, let’s create a\n  \u003Ccode>style\u003C\u002Fcode>\n  element and append it to our\n  \u003Ccode>rootElement\u003C\u002Fcode>\n  to position it on the left side of the screen. Here is what the final code in our\n  \u003Ccode>index.tsx\u003C\u002Fcode>\n  file looks like:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist119182873\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-index-tsx\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-tsx  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"index.tsx content, created by MariusBongarts on 07:56AM on November 04, 2022.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"index.tsx\">\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-s1>rootElement\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-smi>document\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>createElement\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s>"div"\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC2\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s1>rootElement\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>id\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-s>"react-chrome-app"\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC3\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC4\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-s1>globalStyles\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-smi>document\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>createElement\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s>"style"\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC5\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s1>globalStyles\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>innerHTML\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-s>`\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC6\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  #\u003Cspan class=pl-s1>\u003Cspan class=pl-kos>${\u003C\u002Fspan>\u003Cspan class=pl-s1>rootElement\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>id\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Fspan> {\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC7\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  position: fixed;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC8\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  left: 0;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC9\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  top: 0;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC10\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  width: 300px;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC11\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  height: 100vh;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC12\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  background: #ffffff;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC13\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  border-right: 1px solid #c2c2c2;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L14\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"14\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC14\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  z-index: 999;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L15\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"15\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC15\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  }\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L16\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"16\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC16\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>`\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L17\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"17\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC17\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s1>rootElement\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>appendChild\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>globalStyles\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L18\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"18\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC18\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-smi>document\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>body\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>appendChild\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>rootElement\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L19\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"19\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC19\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L20\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"20\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC20\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-s1>root\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-v>ReactDOM\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>createRoot\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>rootElement\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L21\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"21\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC21\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s1>root\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>render\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L22\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"22\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC22\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-v>React\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>StrictMode\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L23\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"23\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC23\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-v>App\u003C\u002Fspan> \u003Cspan class=pl-kos>\u002F>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L24\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"24\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC24\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-v>React\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>StrictMode\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-tsx-L25\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"25\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-tsx-LC25\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F47ce8907bdb96227f8c3bd54c9f11953\u002Fraw\u002F8de151fdc601c4cb369f2a8e069b8c26a9d19d52\u002Findex.tsx\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F47ce8907bdb96227f8c3bd54c9f11953#file-index-tsx\" class=\"Link--inTextBlock\">\n          index.tsx\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Ch3 id=\"include-react-app-into-chrome-extension\">Include React App into Chrome Extension\u003C\u002Fh3>\n\u003Cp>\n  In the beginning, we already installed our extension. Still, currently, it doesn’t do anything because we haven’t\n  added functionality to our\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  .\n\u003C\u002Fp>\n\u003Ch4 id=\"create-a-content-script\">Create a Content Script\u003C\u002Fh4>\n\u003Cp>To add our React app from the extension to any webpage, we need a way to access the DOM and modify it.\u003C\u002Fp>\n\u003Cp>For that, we will create a content script:\u003C\u002Fp>\n\u003Cblockquote>\n  \u003Cstrong>\u003Cem>Content scripts\u003C\u002Fem>\u003C\u002Fstrong>\n  \u003Cem>\n    live in an isolated world, allowing a content script to make changes to its JavaScript environment without\n    conflicting with the page or other extensions’ content Scripts. — \n  \u003C\u002Fem>\n  \u003Ca href=\"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fextensions\u002Fmv2\u002Fcontent_scripts\u002F\" rel=\"nofollow noopener\">\n    developer.chrome.com\n  \u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cp>\n  For starters, let’s create a\n  \u003Ccode>content.js\u003C\u002Fcode>\n  file with an alert to ensure that our extension successfully loads the script. This file will act as our content\n  script.\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist119182994\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-content-js\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-javascript  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"content.js content, created by MariusBongarts on 08:09AM on November 04, 2022.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"content.js\">\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-en>alert\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s>'Hello world from content.js'\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fcb146c0a1e761e4291d3c0aeb2c67969\u002Fraw\u002Fc304a224e5f11591dbe5ddc2dd9f947d6236c11b\u002Fcontent.js\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fcb146c0a1e761e4291d3c0aeb2c67969#file-content-js\" class=\"Link--inTextBlock\">\n          content.js\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  The\n  \u003Ccode>content.js\u003C\u002Fcode>\n  script is the entry point of our extension. Let’s adjust our\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  to inject our script:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist119183021\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-manifest-json\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-json  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"manifest.json content, created by MariusBongarts on 08:11AM on November 04, 2022.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"manifest.json\">\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC1\" class=\"blob-code blob-code-inner js-file-line\">{\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC2\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"name"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>React Chrome Extension\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC3\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"version"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>1.0.0\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC4\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"manifest_version"\u003C\u002Fspan>: \u003Cspan class=\"pl-c1\">3\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC5\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"content_scripts"\u003C\u002Fspan>: [\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC6\" class=\"blob-code blob-code-inner js-file-line\">    {\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC7\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=\"pl-ent\">"matches"\u003C\u002Fspan>: [\u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan><all_urls>\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>],\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC8\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=\"pl-ent\">"js"\u003C\u002Fspan>: [\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC9\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>content.js\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC10\" class=\"blob-code blob-code-inner js-file-line\">      ]\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC11\" class=\"blob-code blob-code-inner js-file-line\">    }\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC12\" class=\"blob-code blob-code-inner js-file-line\">  ]\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC13\" class=\"blob-code blob-code-inner js-file-line\">}\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F4360198798a5b836ceec07ad4e3e87ed\u002Fraw\u002Ffb238e0c29f3e2c30a7ea3e34a19ebc7123ebba7\u002Fmanifest.json\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F4360198798a5b836ceec07ad4e3e87ed#file-manifest-json\" class=\"Link--inTextBlock\">\n          manifest.json\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  To use our statically declared\n  \u003Ccode>content.js\u003C\u002Fcode>\n  script we need to register it under the\n  \u003Ccode>content_scripts\u003C\u002Fcode>\n  field. This field needs to define the\n  \u003Cem>required\u003C\u002Fem>\n  attribute\n  \u003Ccode>matches\u003C\u002Fcode>\n  to specify on which pages the content script will be injected. For that, you can set several\n  \u003Ca\n    href=\"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fextensions\u002Fdevelop\u002Fconcepts\u002Fmatch-patterns\"\n    rel=\"noopener ugc nofollow noopener\"\n  >\n    match patterns\n  \u003C\u002Fa>\n  . We will use the special pattern\n  \u003Ccode><all_urls>\u003C\u002Fcode>\n  to match any URL that starts with a permitted scheme- for example\n  \u003Ccode>http\u003C\u002Fcode>\n  or\n  \u003Ccode>https\u003C\u002Fcode>\n  .\n\u003C\u002Fp>\n\u003Cp>\n  We also define the optional field\n  \u003Ccode>js\u003C\u002Fcode>\n  . Here we define our scripts to be injected into matching pages.\n\u003C\u002Fp>\n\u003Cp>\n  Let’s update our extension by pressing the refresh button of the extension on\n  \u003Ccode>chrome:\u002F\u002Fextensions\u003C\u002Fcode>\n  . We can now navigate to any page, and if done correctly, an alert should appear when the page is loaded.\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*L--jyGGyNT7tWGSDOIMl0A.png\"\n    class=\"kg-image\"\n    alt=\"Screenshot showing alert on Medium.com\"\n    loading=\"lazy\"\n  \u002F>\n\u003C\u002Ffigure>\n\u003Cp>Worst Chrome Extension ever, right? Let’s move on and add React.\u003C\u002Fp>\n\u003Ch4 id=\"create-a-react-content-script\">Create a React Content Script\u003C\u002Fh4>\n\u003Cp>\n  Let’s build our React application running\n  \u003Ccode>yarn build\u003C\u002Fcode>\n  or\n  \u003Ccode>npm run build\u003C\u002Fcode>\n  .\n\u003C\u002Fp>\n\u003Cp>\n  You should see that the react-scripts build script generates some Javascript files in the\n  \u003Cstrong>\u003Cem>build\u002Fstatic\u002Fjs\u002F\u003C\u002Fem>\u003C\u002Fstrong>\n  folder:\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*Sks_BOSzBoDMTEbsVTJTsA.png\"\n    class=\"kg-image\"\n    alt=\"Screenshot: Build directory\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>Build directory\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>\n  The\n  \u003Ccode>main.3c11b729.js\u003C\u002Fcode>\n  file is our entry file and includes a generated hash in the filename. In the generated\n  \u003Ccode>index.html\u003C\u002Fcode>\n  the main file will be loaded:\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*CCAfRTyZa1NPl6Vxfsto0Q.png\"\n    class=\"kg-image\"\n    alt=\"Screenshot of\u002Fbuild\u002Findex.html file loading the JS file\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>\u002Fbuild\u002Findex.html\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>\n  What we now want to do is not load the main file from the\n  \u003Ccode>index.html\u003C\u002Fcode>\n  but within our Chrome extension as a content script.\n\u003C\u002Fp>\n\u003Cp>\n  Notice that our build also contains a chunk file that is loaded by the main file. Putting many JavaScript files with\n  hashes in their filename into our\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  is not the best solution. Therefore we will set up Webpack to create a single JavaScript bundle for our app.\n\u003C\u002Fp>\n\u003Ch4 id=\"set-up-webpack\">Set up Webpack\u003C\u002Fh4>\n\u003Cp>First of all, we need to install webpack. We can do this by running:\u003C\u002Fp>\n\u003Cp>\u003Ccode>yarn add -D webpack ts-loader webpack-cli\u003C\u002Fcode>\u003C\u002Fp>\n\u003Cp>or\u003C\u002Fp>\n\u003Cp>\u003Ccode>npm i -D webpack ts-loader webpack-cli\u003C\u002Fcode>\u003C\u002Fp>\n\u003Cp>\n  Then, we can create a\n  \u003Ccode>webpack.config.js\u003C\u002Fcode>\n  file:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist119216568\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-webpack-config-js\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-javascript  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"webpack.config.js content, created by MariusBongarts on 05:35PM on November 06, 2022.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"webpack.config.js\">\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-s1>path\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-en>require\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s>"path"\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC2\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC3\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-smi>module\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>exports\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC4\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>entry\u003C\u002Fspan>: \u003Cspan class=pl-s>".\u002Fsrc\u002Findex.tsx"\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC5\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>mode\u003C\u002Fspan>: \u003Cspan class=pl-s>"production"\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC6\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>module\u003C\u002Fspan>: \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC7\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-c1>rules\u003C\u002Fspan>: \u003Cspan class=pl-kos>[\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC8\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC9\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=pl-c1>test\u003C\u002Fspan>: \u003Cspan class=pl-pds>\u003Cspan class=pl-c1>\u002F\u003C\u002Fspan>\u003Cspan class=pl-cce>\\.\u003C\u002Fspan>\u003Cspan class=pl-s>t\u003C\u002Fspan>\u003Cspan class=pl-s>s\u003C\u002Fspan>\u003Cspan class=pl-s>x\u003C\u002Fspan>\u003Cspan class=pl-c1>?\u003C\u002Fspan>\u003Cspan class=pl-cce>$\u003C\u002Fspan>\u003Cspan class=pl-c1>\u002F\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC10\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=pl-c1>use\u003C\u002Fspan>: \u003Cspan class=pl-kos>[\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC11\" class=\"blob-code blob-code-inner js-file-line\">          \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC12\" class=\"blob-code blob-code-inner js-file-line\">            \u003Cspan class=pl-c1>loader\u003C\u002Fspan>: \u003Cspan class=pl-s>"ts-loader"\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC13\" class=\"blob-code blob-code-inner js-file-line\">            \u003Cspan class=pl-c1>options\u003C\u002Fspan>: \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L14\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"14\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC14\" class=\"blob-code blob-code-inner js-file-line\">              \u003Cspan class=pl-c1>compilerOptions\u003C\u002Fspan>: \u003Cspan class=pl-kos>{\u003C\u002Fspan> \u003Cspan class=pl-c1>noEmit\u003C\u002Fspan>: \u003Cspan class=pl-c1>false\u003C\u002Fspan> \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L15\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"15\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC15\" class=\"blob-code blob-code-inner js-file-line\">            \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L16\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"16\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC16\" class=\"blob-code blob-code-inner js-file-line\">          \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L17\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"17\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC17\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=pl-kos>]\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L18\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"18\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC18\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=pl-c1>exclude\u003C\u002Fspan>: \u003Cspan class=pl-pds>\u003Cspan class=pl-c1>\u002F\u003C\u002Fspan>\u003Cspan class=pl-s>n\u003C\u002Fspan>\u003Cspan class=pl-s>o\u003C\u002Fspan>\u003Cspan class=pl-s>d\u003C\u002Fspan>\u003Cspan class=pl-s>e\u003C\u002Fspan>\u003Cspan class=pl-s>_\u003C\u002Fspan>\u003Cspan class=pl-s>m\u003C\u002Fspan>\u003Cspan class=pl-s>o\u003C\u002Fspan>\u003Cspan class=pl-s>d\u003C\u002Fspan>\u003Cspan class=pl-s>u\u003C\u002Fspan>\u003Cspan class=pl-s>l\u003C\u002Fspan>\u003Cspan class=pl-s>e\u003C\u002Fspan>\u003Cspan class=pl-s>s\u003C\u002Fspan>\u003Cspan class=pl-c1>\u002F\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L19\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"19\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC19\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L20\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"20\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC20\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos>]\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L21\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"21\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC21\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L22\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"22\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC22\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>resolve\u003C\u002Fspan>: \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L23\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"23\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC23\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-c1>extensions\u003C\u002Fspan>: \u003Cspan class=pl-kos>[\u003C\u002Fspan>\u003Cspan class=pl-s>".tsx"\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-s>".ts"\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-s>".js"\u003C\u002Fspan>\u003Cspan class=pl-kos>]\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L24\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"24\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC24\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L25\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"25\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC25\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>output\u003C\u002Fspan>: \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L26\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"26\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC26\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-c1>filename\u003C\u002Fspan>: \u003Cspan class=pl-s>"content.js"\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L27\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"27\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC27\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-c1>path\u003C\u002Fspan>: \u003Cspan class=pl-s1>path\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>resolve\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>__dirname\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-s>".."\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-s>"extension"\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L28\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"28\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC28\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-config-js-L29\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"29\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-config-js-LC29\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fbd9613029caa66e748f77f68ba0856cb\u002Fraw\u002F45716de51ab545af2dff1bf2dc534b5dda38960f\u002Fwebpack.config.js\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fbd9613029caa66e748f77f68ba0856cb#file-webpack-config-js\" class=\"Link--inTextBlock\">\n          webpack.config.js\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  We tell Webpack that our entry point is the\n  \u003Ccode>index.tsx\u003C\u002Fcode>\n  file and that we want to bundle everything into one\n  \u003Ccode>content.js\u003C\u002Fcode>\n  file. Finally, we define the path of our bundled Javascript file to be our directory of the Chrome Extension.\n\u003C\u002Fp>\n\u003Cp>\n  Now, if we run\n  \u003Ccode>yarn build\u003C\u002Fcode>\n  you should see that the\n  \u003Ccode>content.js\u003C\u002Fcode>\n  file overrides our existing content script inside our\n  \u003Cstrong>\u003Cem>extension\u003C\u002Fem>\u003C\u002Fstrong>\n  folder:\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*QDoQ3mgkBm5xpjcz-FzbGQ.png\"\n    class=\"kg-image\"\n    alt=\"Screenshot: Extension folder with bundled content.js file\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>Extension folder with bundled content.js file\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>Now, we can go ahead and re-load the extension to apply our changes.\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*BbEFuOMguwFjbb8secFT9Q.png\"\n    class=\"kg-image\"\n    alt=\"React Chrome Extention\"\n    loading=\"lazy\"\n  \u002F>\n\u003C\u002Ffigure>\n\u003Cp>When navigating to any webpage, we should see our React application showing up on the left side of the screen:\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*QJWadNr12Tf-Qv9LZZRYyg.png\"\n    class=\"kg-image\"\n    alt=\"Screenshot: React App loaded on medium.com\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>React App loaded on medium.com\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>\n  Admittedly, this is still not a cool Chrome Extension. But now that we’ve successfully integrated our React app into a\n  Chrome extension, you can build any app of your choice with React that runs on any webpage.\n\u003C\u002Fp>\n\u003Cp>\n  You can find the code of this article in this\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FMariusBongarts\u002Freact-chrome-extension\" rel=\"noopener\">GitHub repository\u003C\u002Fa>\n  .\n\u003C\u002Fp>\n\u003Ch3 id=\"final-thoughts\">Final Thoughts\u003C\u002Fh3>\n\u003Cp>\n  Building your own Chrome Extension is easier than you might think. Once it's set up properly, you can use React to\n  create anything you want. Designing your own extension can be a lot of fun, giving you the freedom to let your\n  creativity flow.\n\u003C\u002Fp>\n\u003Cp>\n  I hope you enjoyed reading this article. I am always happy to answer questions and am open to criticism. Feel free to\n  leave a comment or contact me at any time! Get in touch with me via\n  \u003Cstrong>\u003C\u002Fstrong>\n  \u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fmarius-bongarts-6b3638171\u002F\" rel=\"noopener ugc nofollow noopener noopener\">\n    \u003Cstrong>LinkedIn\u003C\u002Fstrong>\n  \u003C\u002Fa>\n  \u003Cstrong>\u003C\u002Fstrong>\n  or\n  \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002FMariusBongarts\" rel=\"noopener ugc nofollow noopener noopener\">\n    \u003Cstrong>Twitter\u003C\u002Fstrong>\n  \u003C\u002Fa>\n  \u003Cstrong>.\u003C\u002Fstrong>\n\u003C\u002Fp>\n\u003Cp>\n  Also, if you haven’t, check out my\n  \u003Ca\n    href=\"https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fweb-highlights-pdf-web-hi\u002Fhldjnlbobkdkghfidgoecgmklcemanhm?hl=de\"\n    rel=\"noopener\"\n  >\n    \u003Cstrong>online highlighter Chrome Extension\u003C\u002Fstrong>\n  \u003C\u002Fa>\n  . With\n  \u003Ca href=\"https:\u002F\u002Fweb-highlights.com\u002F\" rel=\"noopener\">Web Highlights\u003C\u002Fa>\n  , you can highlight on any webpage or PDF, create Tags and take Notes. Check it out! 😊\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-bookmark-card\">\n  \u003Ca class=\"kg-bookmark-container\" href=\"https:\u002F\u002Fweb-highlights.com\u002F\">\n    \u003Cdiv class=\"kg-bookmark-content\">\n      \u003Cdiv class=\"kg-bookmark-title\">Web Highlights - PDF & Web Highlighter\u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-description\">\n        Best highlighter for the web. Just like you do on books, highlight on any web page or PDF, and take notes.\n        Organize with tags and find your research in the app.\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-metadata\">\n        \u003Cimg class=\"kg-bookmark-icon\" src=\"https:\u002F\u002Fweb-highlights.com\u002Ffavicon.ico\" alt=\"\" \u002F>\n        \u003Cspan class=\"kg-bookmark-author\">Web Highlights - PDF & Web Highlighter\u003C\u002Fspan>\n        \u003Cspan class=\"kg-bookmark-publisher\">Marius Bongarts\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"kg-bookmark-thumbnail\">\u003Cimg src=\"https:\u002F\u002Fweb-highlights.com\u002Fimages\u002Fwh-thumbnail.png\" alt=\"\" \u002F>\u003C\u002Fdiv>\n  \u003C\u002Fa>\n\u003C\u002Ffigure>\n\u003Ch2 id=\"looking-for-productivity-tools\">Looking for Productivity Tools?\u003C\u002Fh2>\n\u003Cp>\n  At\n  \u003Ca href=\"https:\u002F\u002Fweb-highlights.com\u002Fbrowser-tools\u002F\">Tooltivity\u003C\u002Fa>\n  , we review the top productivity browser extensions. Read our detailed reviews here:\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-bookmark-card\">\n  \u003Ca class=\"kg-bookmark-container\" href=\"https:\u002F\u002Fweb-highlights.com\u002Fbrowser-tools\u002F\">\n    \u003Cdiv class=\"kg-bookmark-content\">\n      \u003Cdiv class=\"kg-bookmark-title\">Best Productivity Browser Extensions | Tooltivity\u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-description\">\n        Discover and compare the best productivity browser extensions at Tooltivity. Explore our in-depth reviews of top\n        tools to boost your browsing experience.\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-metadata\">\n        \u003Cimg class=\"kg-bookmark-icon\" src=\"https:\u002F\u002Fweb-highlights.com\u002Ffavicon.ico\" alt=\"\" \u002F>\n        \u003Cspan class=\"kg-bookmark-author\">Best Productivity Browser Extensions | Tooltivity\u003C\u002Fspan>\n        \u003Cspan class=\"kg-bookmark-publisher\">Marius Bongarts\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"kg-bookmark-thumbnail\">\n      \u003Cimg src=\"https:\u002F\u002Fweb-highlights.com\u002Fbrowser-tools\u002Fimages\u002Ftooltivity-og-image.png\" alt=\"\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fa>\n\u003C\u002Ffigure>\n","Marius Bongarts","https:\u002F\u002Fwww.facebook.com\u002FMariusBongartsWeb","\u002Fblog\u002Fcontent\u002Fimages\u002F2022\u002F08\u002FIMG_7861_Square.jpeg","https:\u002F\u002Fmarius-bongarts.de\u002F","Founder & Software Engineer","https:\u002F\u002Ftwitter.com\u002FMariusBongarts",2212,[39,70,94],{"id":40,"slug":41,"title":42,"description":43,"url":44,"publishedAt":45,"createdAt":46,"updatedAt":45,"featured":20,"readingTime":47,"tags":48,"imageUrl":52,"imageAlt":53,"faviconUrl":54,"publishedAtString":45,"category":55,"readTimeString":69},"4c4f3f6e07b8d087c330193b","best-bookmark-manager-chrome-extensions","Top 12 Chrome Bookmark Manager Extensions: The Great Comparison","Compare the 12 best Chrome bookmark manager extensions. We tested Web Highlights, Raindrop.io, Session Buddy, Toby and more to find the top pick.","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fbest-bookmark-manager-chrome-extensions\u002F","2026-07-28T15:00:00.000+00:00","2026-07-28T14:30:00.000+00:00",26,[24,49,50,51],"comparison","Productivity","Tools","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fcontent\u002Fimages\u002F2026\u002F07\u002Fchrome-bookmark-manager-extensions-the-great-comparison.jpg","Top 12 Chrome Bookmark Manager Extensions","https:\u002F\u002Fweb-highlights.com\u002Ffavicon.ico",[56,63],{"type":57,"title":58,"shortTitle":59,"icon":60,"description":61,"excerpt":62},"bookmarks","Bookmarks, Clips & Save-for-Later","Bookmarks","bookmark","Organize bookmarks, export from Chrome, and capture pages with less chaos. Web Highlights helps you save smarter than the default bookmark bar.","Exporting and organizing bookmarks is a huge search topic for a reason: browser defaults don’t scale. Web Highlights adds structure—tags, notes, and highlights—so saved pages stay findable, whether you’re migrating from Pocket or just tired of duplicate folders.",{"type":64,"title":65,"shortTitle":50,"icon":66,"description":67,"excerpt":68},"productivity","Browser Productivity & Chrome Extensions","command","Curated extension lists, focus workflows, and tips for getting more from Chrome—always with an eye toward reading, capture, and learning.","Productivity isn’t only task managers. These articles cover the browser layer: extensions that protect focus, comparisons that save you from dead-end tools, and setup tips that keep your reading and capture stack lightweight but powerful.","26 min read",{"id":71,"slug":72,"title":73,"description":74,"url":75,"publishedAt":76,"createdAt":77,"updatedAt":76,"featured":20,"readingTime":78,"tags":79,"imageUrl":83,"imageAlt":84,"faviconUrl":54,"publishedAtString":76,"category":85,"readTimeString":93},"6a61e89d909b7209ced49b2f","top-chrome-language-learning-extensions-the-great-comparison","Top 10 Chrome Extensions For Language Learning: The Great Comparison","Compare the 10 best Chrome language learning extensions — popup dictionaries, AI translators, subtitle tools and flashcard trainers tested, rated and ranked.","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Ftop-chrome-language-learning-extensions-the-great-comparison\u002F","2026-07-23T12:05:50.000+00:00","2026-07-23T10:10:37.000+00:00",27,[24,80,81,82],"Learning","students","Flashcard Learning","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fcontent\u002Fimages\u002F2026\u002F07\u002Fchrome-language-learning-extensions-the-great-comparison.jpg","Top 10 Chrome Language Learning Extensions",[86,92],{"type":87,"title":88,"shortTitle":80,"icon":89,"description":90,"excerpt":91},"learning","Retain What You Read with Web Highlights","repeat","Most of what we read is forgotten within days. Web Highlights turns your highlights into spaced repetition flashcards so you can actively review and lock knowledge into long-term memory.","Spaced repetition and active recall beat passive re-reading. Web Highlights connects what you highlight on the web and in PDFs to short review sessions, so quotes and facts resurface when your brain needs them—not only when you remember to open the source again.",{"type":64,"title":65,"shortTitle":50,"icon":66,"description":67,"excerpt":68},"27 min read",{"id":95,"slug":96,"title":97,"description":98,"url":99,"publishedAt":100,"createdAt":101,"updatedAt":102,"featured":20,"readingTime":103,"tags":104,"imageUrl":107,"imageAlt":108,"faviconUrl":54,"publishedAtString":100,"category":109,"readTimeString":117},"6a5e332c909b7209ced49ae1","turn-youtube-videos-into-flashcards-youll-remember","Turn YouTube Videos into Flashcards You’ll Remember","You watched the whole talk and kept almost none of it. Highlight the transcript, let on-device AI write the cards — free, private, no signup.","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fturn-youtube-videos-into-flashcards-youll-remember\u002F","2026-07-20T19:00:23.000+00:00","2026-07-20T14:39:40.000+00:00","2026-07-21T06:19:27.000+00:00",5,[105,82,80,106],"Youtube","AI","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fcontent\u002Fimages\u002F2026\u002F07\u002Fturn-youtube-videos-into-flashcards.webp","Title: Turn YouTube Videos into Flashcards You’ll Remember; Subtitle: You watched the whole talk and kept almost none of it.",[110,111],{"type":87,"title":88,"shortTitle":80,"icon":89,"description":90,"excerpt":91},{"type":112,"title":113,"shortTitle":114,"icon":112,"description":115,"excerpt":116},"youtube","YouTube Notes, Transcripts & AI Summaries","YouTube","Turn videos into notes: transcripts, AI summaries, and highlights. See how Web Highlights fits into a modern YouTube learning stack.","Video is a top learning channel, but it’s hard to revisit. Web Highlights helps you pull the signal out of long videos—structured notes and summaries you can link back to the moment that mattered—without juggling five single-purpose extensions.","5 min read"]