[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-article-build-your-own-custom-chrome-history-extension-with-react-part-1-set-up":3},{"meta":4,"html":33,"authorName":34,"authorFacebookUrl":35,"authorProfileImage":36,"authorWebsite":37,"authorJobTitle":38,"authorTwitterUrl":39,"wordCount":40,"recommended":41},{"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":32,"recommendedSlugs":10},"63e9ea55e2f30306277d39a2","build-your-own-custom-chrome-history-extension-with-react-part-1-set-up","post","Create a Custom Chrome History Extension with React - Part 1","Learn how to set up and create a custom Chrome history extension using React with our step-by-step guide. Implement the Chrome History API easily.",null,{"url":12,"alt":13,"caption":14,"width":15,"height":16},"\u002Fblog\u002Fcontent\u002Fimages\u002F2023\u002F02\u002Fthumbnail-build-chrome-extension-1.png","Build Your Own Custom Chrome History Extension with React + Chrome Logo and React Logo","Build Your Own Custom Chrome History Extension with React",1280,720,"2023-02-13T07:54:54.000+00:00","2023-02-13T07:44:21.000+00:00","2024-07-23T13:56:29.000+00:00",false,5,[23,26,29],{"name":24,"slug":25},"Chrome Extension","chrome-extension",{"name":27,"slug":28},"React","react",{"name":30,"slug":31},"Software","software","marius-bongarts","\u003Cp>\n  In this series of articles, I will walk you through creating your own browser history Chrome extension using React. We\n  will use the\n  \u003Cstrong>Chrome History API\u003C\u002Fstrong>\n  to read our browser history and display it in our personalized React dashboard.\n\u003C\u002Fp>\n\u003Cp>Here is what we are going to build:\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\u002F800\u002F1*kEO9vWt6N3ztMXw7poVKug.png\"\n    class=\"kg-image\"\n    alt=\"Screenshot showing our React Dashboard in the extensions' popup\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>Our own Chrome History - What we will build\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>Without further ado, let’s get started.\u003C\u002Fp>\n\u003Ch3 id=\"extension-setup\">Extension setup\u003C\u002Fh3>\n\u003Cp>\n  Create an ‘\n  \u003Cem>\u002Fextension’\u003C\u002Fem>\n  folder anywhere on your machine to get started. We will later copy & paste it into our React app. Then create a\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  file inside our\n  \u003Cstrong>\u003Cem>extension\u003C\u002Fem>\u003C\u002Fstrong>\n  folder:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist120584229\" 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:02AM on January 30, 2023.\"\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>Chrome History 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\u002F19c5a920705cd19a60dff01005663dec\u002Fraw\u002Ffc91d29f8ef78417ce2fa4b914ab72e3d5abce23\u002Fmanifest.json\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F19c5a920705cd19a60dff01005663dec#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 manifest is our entry point, which defines our extension's metadata. For now, we only provide the\n  \u003Ccode>name\u003C\u002Fcode>\n  ,\n  \u003Ccode>version\u003C\u002Fcode>\n  , and\n  \u003Ccode>manifest_version\u003C\u002Fcode>\n  , which is enough to install the extension in our browser.\n\u003C\u002Fp>\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\u002F800\u002F1*JXPO18Iebr-6WJEWjb7dCQ.png\"\n    class=\"kg-image\"\n    alt=\"Install the extension\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>Install the extension\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cblockquote class=\"kg-blockquote-alt\">Congratulations! You just created a Chrome Extension! 👏\u003C\u002Fblockquote>\n\u003Cp>\n  Currently, the extension doesn’t do anything. Therefore let’s define a page to open when clicking our extension icon\n  in the chrome toolbar. We can do this by defining an\n  \u003Ccode>action\u003C\u002Fcode>\n  in our\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  .\n\u003C\u002Fp>\n\u003Cblockquote>\n  \u003Cem>\n    An action’s popup will be shown when the user clicks on the extension’s action button in the toolbar. The popup can\n    contain any HTML contents you like, and will be automatically sized to fit its contents. The popup cannot be smaller\n    than 25x25 and cannot be larger than 800x600. -\n  \u003C\u002Fem>\n  \u003Ca href=\"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fextensions\u002Freference\u002Faction\u002F\" rel=\"noopener\">developer.chrome.com\u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cp>\n  Here is how to define an\n  \u003Cstrong>HTML popup\u003C\u002Fstrong>\n  that opens when clicking our extension icon:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist120584296\" 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:11AM on January 30, 2023.\"\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>chrome-history-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\">"description"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>Chrome extension that accesses the chrome history API to read the browser history and display it in our own personalized React dashboard\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\">"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-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\">"manifest_version"\u003C\u002Fspan>: \u003Cspan class=\"pl-c1\">3\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\">  \u003Cspan class=\"pl-ent\">"action"\u003C\u002Fspan>: {\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\">"default_title"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>Chrome History Dashboard\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\">"default_popup"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>.\u002Findex.html\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\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\">  }\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  \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\u002F08e5fcd0e8fc30c0e84401c360a867fa\u002Fraw\u002Fcc176bed472e2c2b9520b3a46750632e8bd56ba0\u002Fmanifest.json\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F08e5fcd0e8fc30c0e84401c360a867fa#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  Our\n  \u003Ccode>index.html\u003C\u002Fcode>\n  file contains a simple HTML file with some styles to set the\n  \u003Cem>width\u003C\u002Fem>\n  and\n  \u003Cem>height\u003C\u002Fem>\n  of the body element. Furthermore, it provides the JavaScript for our React app by loading the\n  \u003Ccode>app.js\u003C\u002Fcode>\n  file.\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist120584353\" 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-html\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-html  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"index.html content, created by MariusBongarts on 07:18AM on January 30, 2023.\"\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.html\">\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-c1><!DOCTYPE html\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC2\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>html\u003C\u002Fspan> \u003Cspan class=pl-c1>lang\u003C\u002Fspan>="\u003Cspan class=pl-s>en\u003C\u002Fspan>"\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC3\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC4\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>head\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC5\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>meta\u003C\u002Fspan> \u003Cspan class=pl-c1>charset\u003C\u002Fspan>="\u003Cspan class=pl-s>UTF-8\u003C\u002Fspan>"\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC6\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>meta\u003C\u002Fspan> \u003Cspan class=pl-c1>http-equiv\u003C\u002Fspan>="\u003Cspan class=pl-s>X-UA-Compatible\u003C\u002Fspan>" \u003Cspan class=pl-c1>content\u003C\u002Fspan>="\u003Cspan class=pl-s>IE=edge\u003C\u002Fspan>"\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC7\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>meta\u003C\u002Fspan> \u003Cspan class=pl-c1>name\u003C\u002Fspan>="\u003Cspan class=pl-s>viewport\u003C\u002Fspan>" \u003Cspan class=pl-c1>content\u003C\u002Fspan>="\u003Cspan class=pl-s>width=device-width, initial-scale=1.0\u003C\u002Fspan>"\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC8\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>title\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>Chrome History Dashboard\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>title\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC9\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>style\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC10\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=pl-ent>body\u003C\u002Fspan> {\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC11\" class=\"blob-code blob-code-inner js-file-line\">            \u003Cspan class=pl-c1>width\u003C\u002Fspan>\u003Cspan class=pl-kos>:\u003C\u002Fspan> \u003Cspan class=pl-c1>400\u003Cspan class=pl-smi>px\u003C\u002Fspan>\u003C\u002Fspan>;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC12\" class=\"blob-code blob-code-inner js-file-line\">            \u003Cspan class=pl-c1>height\u003C\u002Fspan>\u003Cspan class=pl-kos>:\u003C\u002Fspan> \u003Cspan class=pl-c1>350\u003Cspan class=pl-smi>px\u003C\u002Fspan>\u003C\u002Fspan>;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC13\" class=\"blob-code blob-code-inner js-file-line\">        }\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L14\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"14\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC14\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>style\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L15\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"15\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC15\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>head\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L16\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"16\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC16\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L17\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"17\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC17\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>body\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L18\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"18\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC18\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>script\u003C\u002Fspan> \u003Cspan class=pl-c1>src\u003C\u002Fspan>="\u003Cspan class=pl-s>\u002Fapp.js\u003C\u002Fspan>"\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>script\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L19\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"19\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC19\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>body\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L20\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"20\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC20\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>html\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\u002Ff47e52f4f58f31ab9c82950565e81097\u002Fraw\u002Fca5688eea8fee2ef39172b617b61a648bc03db7f\u002Findex.html\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Ff47e52f4f58f31ab9c82950565e81097#file-index-html\" class=\"Link--inTextBlock\">\n          index.html\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  As we still need to set up the React app, our popup only contains a blank page with the defined width and height. You\n  should now be able to see it when clicking the extension icon:\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\u002F800\u002F1*CTVWai4gf7p91Txewc1Lgg.png\"\n    class=\"kg-image\"\n    alt=\"Screenshot: Extension Popup\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>Extension Popup\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>\n  If you like, you can also include a custom icon for your extension by providing the\n  \u003Ccode>default_icon\u003C\u002Fcode>\n  attribute:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist120665979\" 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 06:42AM on February 02, 2023.\"\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\">"action"\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\">"default_title"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>Chrome History Dashboard\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\">"default_popup"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>.\u002Findex.html\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\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\">"default_icon"\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\">      \u003Cspan class=\"pl-ent\">"16"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>images\u002Ficon16.png\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,   \u003Cspan class=\"pl-ii\">\u002F\u002F optional\u003C\u002Fspan>\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\">"24"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>images\u002Ficon24.png\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,   \u003Cspan class=\"pl-ii\">\u002F\u002F optional\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\">"32"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>images\u002Ficon32.png\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>    \u003Cspan class=\"pl-ii\">\u002F\u002F optional\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\">    },\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  \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\u002Fb5c242b7612bf639e8777a452d14b39d\u002Fraw\u002Fd32ec46e4dc00810418bac94e6113a50c1d9c617\u002Fmanifest.json\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fb5c242b7612bf639e8777a452d14b39d#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\u003Ch3 id=\"react-setup\">React Setup\u003C\u002Fh3>\n\u003Cp>\n  We will build a React application. Therefore let us create some boilerplate by running the following script using the\n  \u003Ccode>create-react-app\u003C\u002Fcode>\n  CLI:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: markdown-->\n\u003Cp>\u003Ccode>npx create-react-app chrome-history-extension --template typescript\u003C\u002Fcode>\u003C\u002Fp>\n\u003C!--kg-card-end: markdown-->\n\u003Cp>\n  Let’s eliminate all the unnecessary stuff. Remove all CSS styles and the React template code in the\n  \u003Ccode>App.tsx\u003C\u002Fcode>\n  component. You can also delete the\n  \u003Cstrong>\u003Cem>\u002Fpublic\u003C\u002Fem>\u003C\u002Fstrong>\n  folder (We will replace it with our\n  \u003Cstrong>\u002Fextension\u003C\u002Fstrong>\n  folder later).\n\u003C\u002Fp>\n\u003Cp>\n  To test our setup, let’s put a simple\n  \u003Cem>“Hello from React App\u003C\u002Fem>\n  👋\n  \u003Cem>”\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=\"gist120534163\" 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 06:37AM on January 27, 2023.\"\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\u002F645637756acb27cf205c9308e695f943\u002Fraw\u002Fbc3f177388cdfdd57e47b55101eab222df932e32\u002FApp.tsx\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F645637756acb27cf205c9308e695f943#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  Finally, we will adjust our\n  \u003Ccode>index.tsx\u003C\u002Fcode>\n  file a bit to create the entry point of our application programmatically:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist120584450\" 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:28AM on January 30, 2023.\"\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>import\u003C\u002Fspan> \u003Cspan class=pl-v>React\u003C\u002Fspan> \u003Cspan class=pl-k>from\u003C\u002Fspan> \u003Cspan class=pl-s>"react"\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-k>import\u003C\u002Fspan> \u003Cspan class=pl-v>ReactDOM\u003C\u002Fspan> \u003Cspan class=pl-k>from\u003C\u002Fspan> \u003Cspan class=pl-s>"react-dom\u002Fclient"\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-k>import\u003C\u002Fspan> \u003Cspan class=pl-v>App\u003C\u002Fspan> \u003Cspan class=pl-k>from\u003C\u002Fspan> \u003Cspan class=pl-s>".\u002FApp"\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>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-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>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>"chrome-history-dashboard"\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-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-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\">\n\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-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-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-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-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-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-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-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-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-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-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-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\u002Fa0bd990f80687215d1337c95e860f24f\u002Fraw\u002F7716f94d7c78d6a10c98508b7e65f6cbe824d7c4\u002Findex.tsx\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fa0bd990f80687215d1337c95e860f24f#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=\"webpack-setup\">Webpack setup\u003C\u002Fh3>\n\u003Cp>\n  In the next step, we will configure an application bundler to build our chrome extension automatically. Furthermore,\n  we will set up a development environment to test our extension.\n\u003C\u002Fp>\n\u003Cp>\n  We will use\n  \u003Cstrong>Webpack 5\u003C\u002Fstrong>\n  as a module bundler. To use it, we install\n  \u003Cem>webpack\u003C\u002Fem>\n  and the\n  \u003Cem>copy-webpack-plugin\u003C\u002Fem>\n  plugin by running:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: markdown-->\n\u003Cp>\u003Ccode>yarn add -D webpack@^5 copy-webpack-plugin\u003C\u002Fcode>\u003C\u002Fp>\n\u003C!--kg-card-end: markdown-->\n\u003Cp>OR\u003C\u002Fp>\n\u003C!--kg-card-begin: markdown-->\n\u003Cp>\u003Ccode>npm i -D webpack@5 copy-webpack-plugin\u003C\u002Fcode>\u003C\u002Fp>\n\u003C!--kg-card-end: markdown-->\n\u003Cp>\n  Now, let’s create a\n  \u003Ccode>webpack.config.js\u003C\u002Fcode>\n  file and put the following code in it:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist120584043\" 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-conf-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.conf.js content, created by MariusBongarts on 06:44AM on January 30, 2023.\"\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.conf.js\">\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-conf-js-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-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-conf-js-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC2\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-v>CopyPlugin\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>"copy-webpack-plugin"\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-conf-js-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC3\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-conf-js-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC4\" 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-conf-js-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC5\" 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-conf-js-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC6\" 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-conf-js-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC7\" 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-conf-js-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC8\" 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-conf-js-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-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-webpack-conf-js-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC10\" 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-conf-js-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC11\" 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-conf-js-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC12\" 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-conf-js-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC13\" 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-conf-js-L14\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"14\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC14\" 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-conf-js-L15\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"15\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC15\" 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-conf-js-L16\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"16\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-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-conf-js-L17\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"17\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-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-conf-js-L18\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"18\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC18\" 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-conf-js-L19\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"19\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC19\" 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-conf-js-L20\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"20\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-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-conf-js-L21\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"21\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-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-conf-js-L22\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"22\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC22\" 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-conf-js-L23\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"23\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC23\" 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-conf-js-L24\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"24\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC24\" 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-conf-js-L25\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"25\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-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        \u003Ctr>\n          \u003Ctd id=\"file-webpack-conf-js-L26\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"26\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC26\" 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-conf-js-L27\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"27\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC27\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-c1>filename\u003C\u002Fspan>: \u003Cspan class=pl-s>"app.js"\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-conf-js-L28\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"28\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC28\" 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>"dist"\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-conf-js-L29\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"29\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-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        \u003Ctr>\n          \u003Ctd id=\"file-webpack-conf-js-L30\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"30\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC30\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>plugins\u003C\u002Fspan>: \u003Cspan class=pl-kos>[\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-conf-js-L31\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"31\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC31\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-k>new\u003C\u002Fspan> \u003Cspan class=pl-v>CopyPlugin\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-conf-js-L32\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"32\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC32\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-c1>patterns\u003C\u002Fspan>: \u003Cspan class=pl-kos>[\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan> \u003Cspan class=pl-c1>from\u003C\u002Fspan>: \u003Cspan class=pl-s>".\u002Fextension"\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-c1>to\u003C\u002Fspan>: \u003Cspan class=pl-s>""\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-webpack-conf-js-L33\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"33\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC33\" class=\"blob-code blob-code-inner js-file-line\">    \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-webpack-conf-js-L34\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"34\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC34\" 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-conf-js-L35\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"35\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-conf-js-LC35\" 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\u002Fa67a94708c1c7510d0c8702cec20815a\u002Fraw\u002F56f118c53397a8cad66d03bffb3a76d600d9f14b\u002Fwebpack.conf.js\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fa67a94708c1c7510d0c8702cec20815a#file-webpack-conf-js\" class=\"Link--inTextBlock\">\n          webpack.conf.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  If you don’t know how webpack works, I highly recommend learning it. Still, for now, it’s relevant to know that it\n  will replace the built-in\n  \u003Ccode>react-scripts\u003C\u002Fcode>\n  configuration to start and build the app. Therefore it uses a\n  \u003Ccode>ts-loader\u003C\u002Fcode>\n  to transpile our Typescript\n  \u003Ccode>.tsx\u003C\u002Fcode>\n  templates into JavaScript and bundles them into one Javascript file (\n  \u003Ccode>app.js\u003C\u002Fcode>\n  ).\n\u003C\u002Fp>\n\u003Cp>\n  Additionally, we will create a\n  \u003Ccode>CopyPlugin\u003C\u002Fcode>\n  that transfers all files from the\n  \u003Cem>\u002Fextension\u003C\u002Fem>\n  directory, including the\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  file, to the\n  \u003Cem>\u002Fdist\u003C\u002Fem>\n  build folder.\n\u003C\u002Fp>\n\u003Cp>\n  Navigate to the\n  \u003Ccode>package.json\u003C\u002Fcode>\n  file and look at our\n  \u003Ccode>\"start\"\u003C\u002Fcode>\n  and\n  \u003Ccode>\"build\"\u003C\u002Fcode>\n  scripts. They should look like this:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist120666015\" 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-package-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=\"package.json content, created by MariusBongarts on 06:43AM on February 02, 2023.\"\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=\"package.json\">\n        \u003Ctr>\n          \u003Ctd id=\"file-package-json-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-package-json-LC1\" class=\"blob-code blob-code-inner js-file-line\">{\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-package-json-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-package-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>chrome-history-extension\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-package-json-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-package-json-LC3\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ii\">...\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-package-json-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-package-json-LC4\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"scripts"\u003C\u002Fspan>: {\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-package-json-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-package-json-LC5\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=\"pl-ent\">"start"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>react-scripts start\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-package-json-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-package-json-LC6\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=\"pl-ent\">"build"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>react-scripts build\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-package-json-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-package-json-LC7\" class=\"blob-code blob-code-inner js-file-line\">  },\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-package-json-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-package-json-LC8\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ii\">...\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-package-json-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-package-json-LC9\" 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\u002Fcaa3b886733ca92c79bcc4cae504243a\u002Fraw\u002Ffb67da9b127e2845606bd00c90a7cac309e43468\u002Fpackage.json\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fcaa3b886733ca92c79bcc4cae504243a#file-package-json\" class=\"Link--inTextBlock\">\n          package.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>Let’s replace those scripts with webpack:\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist120666361\" 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-package-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=\"package.json content, created by MariusBongarts on 07:07AM on February 02, 2023.\"\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=\"package.json\">\n        \u003Ctr>\n          \u003Ctd id=\"file-package-json-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-package-json-LC1\" class=\"blob-code blob-code-inner js-file-line\">{\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-package-json-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-package-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>chrome-history-extension\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-package-json-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-package-json-LC3\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ii\">...\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-package-json-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-package-json-LC4\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"scripts"\u003C\u002Fspan>: {\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-package-json-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-package-json-LC5\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=\"pl-ent\">"start"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>webpack serve --config webpack.dev.js\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-package-json-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-package-json-LC6\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=\"pl-ent\">"build"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>webpack\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-package-json-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-package-json-LC7\" class=\"blob-code blob-code-inner js-file-line\">  },\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-package-json-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-package-json-LC8\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ii\">...\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-package-json-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-package-json-LC9\" 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\u002Fa1e80f5f452d22f6511aaea41e1653d6\u002Fraw\u002F5bfe14994174389a4265a6686391b66522fb91c7\u002Fpackage.json\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fa1e80f5f452d22f6511aaea41e1653d6#file-package-json\" class=\"Link--inTextBlock\">\n          package.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  You can see that our\n  \u003Ccode>build\u003C\u002Fcode>\n  script simply calls\n  \u003Ccode>webpack\u003C\u002Fcode>\n  . By default, webpack will look for a\n  \u003Ccode>webpack.config.js\u003C\u002Fcode>\n  configuration file that we just created.\n\u003C\u002Fp>\n\u003Cp>\n  Furthermore, we defined a\n  \u003Ccode>start\u003C\u002Fcode>\n  script. This script takes a different webpack configuration with a dev server, enabling us to test our extension\n  locally without installing the extension. By that, we can better and faster test our extension. Here is what the\n  development configuration looks like:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist120666858\" 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-dev-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.dev.js content, created by MariusBongarts on 07:24AM on February 02, 2023.\"\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.dev.js\">\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-dev-js-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-dev-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-dev-js-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-dev-js-LC2\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-s1>config\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>".\u002Fwebpack.config"\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-dev-js-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-dev-js-LC3\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-dev-js-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-dev-js-LC4\" 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-dev-js-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-dev-js-LC5\" class=\"blob-code blob-code-inner js-file-line\">  ...\u003Cspan class=pl-s1>config\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-dev-js-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-dev-js-LC6\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>mode\u003C\u002Fspan>: \u003Cspan class=pl-s>"development"\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-dev-js-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-dev-js-LC7\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>devServer\u003C\u002Fspan>: \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-dev-js-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-dev-js-LC8\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-c1>static\u003C\u002Fspan>: \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-dev-js-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-dev-js-LC9\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-c1>directory\u003C\u002Fspan>: \u003Cspan class=pl-s1>path\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>join\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>"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-dev-js-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-dev-js-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        \u003Ctr>\n          \u003Ctd id=\"file-webpack-dev-js-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-dev-js-LC11\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-c1>port\u003C\u002Fspan>: \u003Cspan class=pl-c1>8080\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-webpack-dev-js-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-dev-js-LC12\" 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-dev-js-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-dev-js-LC13\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>performance\u003C\u002Fspan>: \u003Cspan class=pl-kos>{\u003C\u002Fspan> \u003Cspan class=pl-c1>hints\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-dev-js-L14\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"14\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-dev-js-LC14\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>output\u003C\u002Fspan>: \u003Cspan class=pl-kos>{\u003C\u002Fspan> ...\u003Cspan class=pl-s1>config\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>output\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-c1>publicPath\u003C\u002Fspan>: \u003Cspan class=pl-s>"\u002F"\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-dev-js-L15\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"15\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-webpack-dev-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  \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\u002Ff4955081bc03010788f28c8735816910\u002Fraw\u002F37194528bd6f0a287cf95d034b7b2c211a703850\u002Fwebpack.dev.js\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Ff4955081bc03010788f28c8735816910#file-webpack-dev-js\" class=\"Link--inTextBlock\">\n          webpack.dev.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  This config takes our original configuration from the\n  \u003Ccode>webpack.config.js\u003C\u002Fcode>\n  file and overrides some values. We configure a webpack dev server to serve our application statically from the\n  \u003Ccode>extension\u003C\u002Fcode>\n  folder on port 8080.\n\u003C\u002Fp>\n\u003Cp>\n  Now, you should be able to run\n  \u003Ccode>yarn start\u003C\u002Fcode>\n  and see our application running on\n  \u003Ca href=\"http:\u002F\u002Flocalhost:8080\u002F\">localhost:8080\u003C\u002Fa>\n  .\n\u003C\u002Fp>\n\u003Cp>\n  Furthermore, you can run\n  \u003Ccode>yarn build\u003C\u002Fcode>\n  , and webpack should automatically generate all necessary files for our extension and copy them to the\n  \u003Cem>\u002Fdist\u003C\u002Fem>\n  folder. We can now load our unpacked extension from this folder.\n\u003C\u002Fp>\n\u003Cp>\n  Opening our popup should show the React app containing our\n  \u003Cem>“Hello From React App 👋”\u003C\u002Fem>\n  headline:\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\u002F800\u002F1*cCCQdaZdwE1ZSZkmyovGdQ.png\"\n    class=\"kg-image\"\n    alt=\"Screenshot: Chrome Extension Popup including React app\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>Chrome Extension Popup + React app\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>\n  We are finished with the setup and will continue implementing the chrome history API in the following article.\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FMariusBongarts\u002Fchrome-history-extension\" rel=\"noopener\">Here is the Github repository\u003C\u002Fa>\n  , including the extension's final version.\n\u003C\u002Fp>\n\u003Ch3 id=\"final-thoughts\">Final Thoughts\u003C\u002Fh3>\n\u003Cp>\n  In this article, we laid the groundwork for displaying our Chrome history in our React Chrome extension in subsequent\n  articles. We’ve covered the essential steps for setting up a Chrome extension and integrating React with Webpack to\n  bundle them into a Chrome extension effortlessly.\n\u003C\u002Fp>\n\u003Cp>\n  With these building blocks in place, we’re now ready for the next article, in which we will learn how to access the\n  Chrome History API to show it inside our extension. Follow me or\n  \u003Ca href=\"https:\u002F\u002Fmedium.com\u002Fsubscribe\u002F@mariusbongarts\" rel=\"noopener\">\u003Cstrong>subscribe\u003C\u002Fstrong>\u003C\u002Fa>\n  to get my stories via email not to miss the next article.\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  contact me at any time! Get in touch with me via\n  \u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fmarius-bongarts-6b3638171\u002F\" rel=\"noopener ugc nofollow\">\n    \u003Cstrong>\u003Cstrong>LinkedIn\u003C\u002Fstrong>\u003C\u002Fstrong>\n  \u003C\u002Fa>\n  ,\n  \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002FMariusBongarts\" rel=\"noopener ugc nofollow\">\n    \u003Cstrong>\u003Cstrong>Twitter\u003C\u002Fstrong>\u003C\u002Fstrong>\n  \u003C\u002Fa>\n  , or leave a comment.\n\u003C\u002Fp>\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",2096,[42,78,95],{"id":43,"slug":44,"title":45,"description":46,"url":47,"publishedAt":48,"createdAt":49,"updatedAt":50,"featured":20,"readingTime":51,"tags":52,"imageUrl":56,"imageAlt":57,"faviconUrl":58,"publishedAtString":48,"category":59,"readTimeString":77},"688719cf8b4b770aa39407fc","my-simple-strategy-for-3-268-5-star-chrome-extension-reviews","My Simple Strategy for 3,268 5‑Star Chrome Extension Reviews","Get 37x more reviews than Grammarly with this simple strategy. Learn the Win-Ask Method to boost your Chrome extension ratings and user engagement.","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fmy-simple-strategy-for-3-268-5-star-chrome-extension-reviews\u002F","2025-07-28T06:48:26.000+00:00","2025-07-28T06:33:51.000+00:00","2025-07-28T07:04:33.000+00:00",6,[53,54,55,24],"Marketing","Side Projects","Side Hustle","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1633613286991-611fe299c4be?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDF8fHJhdGluZ3xlbnwwfHx8fDE3NTM2ODQ0MzR8MA&ixlib=rb-4.1.0&q=80&w=2000","Five yellow star-shaped objects placed diagonally on a pink and blue background.","https:\u002F\u002Fweb-highlights.com\u002Ffavicon.ico",[60,70],{"type":61,"title":62,"shortTitle":63,"icon":64,"description":65,"excerpt":66,"thumbnail":67},"my-journey","Behind the Scenes of Web Highlights","My Journey","rocket","Hey 👋 I am Marius. I started Web Highlights in 2019 as a tool just for myself and have been working on it alone since then. Learn from my mistakes and stories right from the beginning how I grew the Chrome Extension to 250K users without any marketing costs.","These posts are the honest build log of Web Highlights: what worked, what hurt, and what I’d do again. If you care about indie products, Chrome extensions, or SEO-led growth, you’ll find practical lessons alongside the personal story.",{"url":68,"alt":69},"https:\u002F\u002Fweb-highlights.com\u002Fimages\u002Fme.png","Me, Marius Bongarts, in front of sea in Portugal, Algarve",{"type":71,"title":72,"shortTitle":73,"icon":74,"description":75,"excerpt":76},"productivity","Browser Productivity & Chrome Extensions","Productivity","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.","6 min read",{"id":79,"slug":80,"title":81,"description":82,"url":83,"publishedAt":84,"createdAt":85,"updatedAt":84,"featured":20,"readingTime":51,"tags":86,"imageUrl":89,"imageAlt":90,"faviconUrl":58,"publishedAtString":84,"category":91,"readTimeString":77},"671f386db98706751d677b5f","how-to-show-a-link-preview-on-any-website","How To Show A Beautiful Link Preview On Any Website","Easily add link previews to any website using the open-source Previewbox library. Works with any framework, fetching Open Graph data automatically.","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fhow-to-show-a-link-preview-on-any-website\u002F","2024-10-29T20:25:55.000+00:00","2024-10-28T07:08:29.000+00:00",[87,88],"Web Development","SEO","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fcontent\u002Fimages\u002F2024\u002F10\u002F0_dkKw8Q1T3dUhNBo7.jpg","Lake with mountains in background",[92,94],{"type":61,"title":62,"shortTitle":63,"icon":64,"description":65,"excerpt":66,"thumbnail":93},{"url":68,"alt":69},{"type":71,"title":72,"shortTitle":73,"icon":74,"description":75,"excerpt":76},{"id":96,"slug":97,"title":98,"description":99,"url":100,"publishedAt":101,"createdAt":102,"updatedAt":103,"featured":20,"readingTime":104,"tags":105,"imageUrl":107,"imageAlt":108,"faviconUrl":58,"publishedAtString":101,"category":109,"readTimeString":112},"66ed6878e07b961e2f231a8f","lessons-from-a-bamboo-tree-staying-motivated-on-my-side-project","Five Years to 100K Users: The Bamboo Tree Story for Side Project Growth","Discover how a bamboo tree can inspire solopreneurs to stay motivated on side projects. Learn the value of delayed gratification on the journey to success.","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Flessons-from-a-bamboo-tree-staying-motivated-on-my-side-project\u002F","2024-09-22T20:17:54.000+00:00","2024-09-20T12:20:08.000+00:00","2024-09-24T07:00:43.000+00:00",7,[63,106,54,55],"Story","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fcontent\u002Fimages\u002F2024\u002F09\u002F0_JjFAqJ78cyJMViqZ.webp","Tall Bamboo Tree",[110],{"type":61,"title":62,"shortTitle":63,"icon":64,"description":65,"excerpt":66,"thumbnail":111},{"url":68,"alt":69},"7 min read"]