[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-article-how-to-build-a-chrome-extension-using-angular":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},"6379fc2ed067a806341c67e6","how-to-build-a-chrome-extension-using-angular","post","How to Build a Chrome Extension Using Angular","Learn how to create a Chrome Extension in general and how to build the frontend part of your application using Angular.",null,{"url":12,"alt":13,"caption":14,"width":15,"height":16},"\u002Fblog\u002Fcontent\u002Fimages\u002F2023\u002F08\u002Fangular.png","How to Build a Chrome Extension Using Angular: Handshake with fists - Left shows Angular logo, right side shows Chrom Logo","Photo in the background by \u003Ca href=\"https:\u002F\u002Funsplash.com\u002F@markusspiske?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\" rel=\"noopener ugc nofollow noopener noopener\">Markus Spiske\u003C\u002Fa> on \u003Ca href=\"https:\u002F\u002Funsplash.com\u002Fs\u002Fphotos\u002Fshaking-hands?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\" rel=\"noopener ugc nofollow noopener noopener\">Unsplash\u003C\u002Fa>",1000,620,"2022-11-20T10:17:46.000+00:00","2022-11-20T10:06:38.000+00:00","2023-08-09T17:51:25.000+00:00",false,6,[23,26,29],{"name":24,"slug":25},"Chrome Extension","chrome-extension",{"name":27,"slug":28},"Angular","angular",{"name":30,"slug":31},"Web Development","web-development","marius-bongarts","\u003Cp>\n  Creating your own Chrome Extensions is easier than many may think. And it’s a lot of fun. We can let our creativity\n  run wild and modify each website as we want it to.\n\u003C\u002Fp>\n\u003Cp>\n  In this article, I will show you how to set up a Chrome Extension in general. Afterward, we will set up an Angular\n  application and load it on any website.\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-bookmark-card\">\n  \u003Ca class=\"kg-bookmark-container\" href=\"https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fhow-to-build-a-chrome-extension-using-react\u002F\">\n    \u003Cdiv class=\"kg-bookmark-content\">\n      \u003Cdiv class=\"kg-bookmark-title\">How To Build A Chrome Extension Using React\u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-description\">\n        Learn how to create a Chrome Extension in general and how to build the frontend part of your application\n        using React.\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-metadata\">\n        \u003Cimg class=\"kg-bookmark-icon\" src=\"https:\u002F\u002Fweb-highlights.com\u002Ffavicon.ico\" alt=\"\" \u002F>\n        \u003Cspan class=\"kg-bookmark-author\">Web Highlights Blog\u003C\u002Fspan>\n        \u003Cspan class=\"kg-bookmark-publisher\">Marius Bongarts\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"kg-bookmark-thumbnail\">\n      \u003Cimg src=\"\u002Fblog\u002Fcontent\u002Fimages\u002F2023\u002F08\u002Fchrome-react.webp\" alt=\"\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fa>\n\u003C\u002Ffigure>\n\u003Ch3 id=\"setup\">Setup\u003C\u002Fh3>\n\u003Cp>\n  Before we start, let’s create two subfolders in our repository:\n  \u003Cstrong>\u003Cem>extension\u003C\u002Fem>\u003C\u002Fstrong>\n  and\n  \u003Cstrong>\u003Cem>angular-chrome-app\u003C\u002Fem>\u003C\u002Fstrong>\n  . The\n  \u003Cstrong>\u003Cem>extension\u003C\u002Fem>\u003C\u002Fstrong>\n  folder will contain our chrome extension files, and we will create an Angular app in the\n  \u003Cstrong>\u003Cem>angular-chrome-app\u003C\u002Fem>\u003C\u002Fstrong>\n  directory.\n\u003C\u002Fp>\n\u003Cp>The structure should look like this:\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1760\u002F1*92hkdAK2ne8AnXmWEFv2gg.png\"\n    class=\"kg-image\"\n    alt=\"Repository folder structure\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>Repository folder structure\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Ch3 id=\"chrome-extension-setup\">Chrome Extension Setup\u003C\u002Fh3>\n\u003Cp>\n  Let’s dive right into the setup of our Chrome extension. First of all, we need to create a\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  file. We will create the file in our\n  \u003Cstrong>\u003Cem>extension\u003C\u002Fem>\u003C\u002Fstrong>\n  subfolder.\n\u003C\u002Fp>\n\u003Cp>\n  The manifest is the entry point of our extension, which defines metadata, such as name and version, as well as\n  additional functionalities.\n\u003C\u002Fp>\n\u003Ch4 id=\"create-manifestjson\">Create manifest.json\u003C\u002Fh4>\n\u003Cp>\n  Let’s create a\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  and add some metadata:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist119410259\" 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:27AM on November 18, 2022.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"manifest.json\">\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC1\" class=\"blob-code blob-code-inner js-file-line\">{\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC2\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"name"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>Angular Chrome Extension\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC3\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"version"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>1.0.0\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC4\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"manifest_version"\u003C\u002Fspan>: \u003Cspan class=\"pl-c1\">3\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC5\" class=\"blob-code blob-code-inner js-file-line\">}\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fa0780fffecbb4439a15a5e087ec915cc\u002Fraw\u002Fe59c81f8c3719f61d77fddb80fc8aa7c0edbfac9\u002Fmanifest.json\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fa0780fffecbb4439a15a5e087ec915cc#file-manifest-json\" class=\"Link--inTextBlock\">\n          manifest.json\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  The first three values\n  \u003Ccode>name\u003C\u002Fcode>\n  ,\n  \u003Ccode>version\u003C\u002Fcode>\n  and\n  \u003Ccode>manifest_version\u003C\u002Fcode>\n  are sufficient to create our first chrome extension.\n\u003C\u002Fp>\n\u003Ch4 id=\"install-the-extension\">Install the extension\u003C\u002Fh4>\n\u003Cp>\n  Open your Chrome browser and navigate to\n  \u003Cstrong>chrome:\u002F\u002Fextensions\u003C\u002Fstrong>\n  .\n\u003C\u002Fp>\n\u003Cp>\n  Enable Developer Mode by clicking the toggle switch next to\n  \u003Cstrong>Developer mode\u003C\u002Fstrong>\n  . Click the “\n  \u003Cstrong>Load unpacked”\u003C\u002Fstrong>\n  button and select the\n  \u003Cstrong>\u003Cem>extension\u003C\u002Fem>\u003C\u002Fstrong>\n  directory of our repo containing our\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  .\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1760\u002F1*W5rm8itxo70rfLrdtd3VKQ.png\"\n    class=\"kg-image\"\n    alt=\"Screenshot: How to load unpacked Chrome extension\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>Load unpacked Chrome extension\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>Congratulations! You’ve just created a Chrome Extension!\u003C\u002Fp>\n\u003Ch3 id=\"set-up-angular-application\">Set up Angular application\u003C\u002Fh3>\n\u003Cp>Now, let’s set up our Angular application in a subfolder of our repository.\u003C\u002Fp>\n\u003Cp>We can do this by running:\u003C\u002Fp>\n\u003Cp>\u003Ccode>npx -p @angular\u002Fcli ng new angular-chrome-app\u003C\u002Fcode>\u003C\u002Fp>\n\u003Cp>or just (if you have installed the Angular CLI):\u003C\u002Fp>\n\u003Cp>\u003Ccode>ng new angular-chrome-app\u003C\u002Fcode>\u003C\u002Fp>\n\u003Cp>\n  Now, let’s eliminate all the unnecessary stuff in the\n  \u003Ccode>app.component.html\u003C\u002Fcode>\n  file. For this article, let’s put a simple\n  \u003Cem>“Hello from Angular App”\u003C\u002Fem>\n  headline\n  \u003Cem>\u003C\u002Fem>\n  to our component:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist119410486\" 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-component-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=\"app.component.html content, created by MariusBongarts on 07:53AM on November 18, 2022.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"app.component.html\">\n        \u003Ctr>\n          \u003Ctd id=\"file-app-component-html-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-app-component-html-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>div\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-app-component-html-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-app-component-html-LC2\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>header\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-app-component-html-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-app-component-html-LC3\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>h2\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>Hello From {{title}} 👋\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>h2\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-app-component-html-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-app-component-html-LC4\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>header\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-app-component-html-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-app-component-html-LC5\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>div\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\u002F8f249d5df3e8ac48d9a64172c8626b3d\u002Fraw\u002F23fe8492d09a1387ea99b37843de5949adf4f629\u002Fapp.component.html\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F8f249d5df3e8ac48d9a64172c8626b3d#file-app-component-html\" class=\"Link--inTextBlock\">\n          app.component.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\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist119410492\" 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-component-ts\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-typescript  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"app.component.ts content, created by MariusBongarts on 07:54AM on November 18, 2022.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"app.component.ts\">\n        \u003Ctr>\n          \u003Ctd id=\"file-app-component-ts-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-app-component-ts-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>import\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan> \u003Cspan class=pl-v>Component\u003C\u002Fspan> \u003Cspan class=pl-kos>}\u003C\u002Fspan> \u003Cspan class=pl-k>from\u003C\u002Fspan> \u003Cspan class=pl-s>'@angular\u002Fcore'\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-app-component-ts-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-app-component-ts-LC2\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-app-component-ts-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-app-component-ts-LC3\" class=\"blob-code blob-code-inner js-file-line\">@\u003Cspan class=pl-v>Component\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-component-ts-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-app-component-ts-LC4\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>selector\u003C\u002Fspan>: \u003Cspan class=pl-s>'app-root'\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-app-component-ts-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-app-component-ts-LC5\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>templateUrl\u003C\u002Fspan>: \u003Cspan class=pl-s>'.\u002Fapp.component.html'\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-app-component-ts-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-app-component-ts-LC6\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>styleUrls\u003C\u002Fspan>: \u003Cspan class=pl-kos>[\u003C\u002Fspan>\u003Cspan class=pl-s>'.\u002Fapp.component.scss'\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-component-ts-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-app-component-ts-LC7\" 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-component-ts-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-app-component-ts-LC8\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>export\u003C\u002Fspan> \u003Cspan class=pl-k>class\u003C\u002Fspan> \u003Cspan class=pl-smi>AppComponent\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-app-component-ts-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-app-component-ts-LC9\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>title\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-s>'Angular App'\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-app-component-ts-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-app-component-ts-LC10\" class=\"blob-code blob-code-inner js-file-line\">\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\u002F09742ad387e31a659a7370c09da6bf73\u002Fraw\u002F4b593d0265029020efe215270c4bff38242b042c\u002Fapp.component.ts\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F09742ad387e31a659a7370c09da6bf73#file-app-component-ts\" class=\"Link--inTextBlock\">\n          app.component.ts\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 want to include the Angular app in our Chrome Extension, we need to configure how Angular sets up our\n  application. For that, we need to change the\n  \u003Ccode>main.ts\u003C\u002Fcode>\n  file:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist119410602\" 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-main-ts\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-typescript  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"main.ts content, created by MariusBongarts on 08:04AM on November 18, 2022.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"main.ts\">\n        \u003Ctr>\n          \u003Ctd id=\"file-main-ts-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-main-ts-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>import\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan> \u003Cspan class=pl-s1>platformBrowserDynamic\u003C\u002Fspan> \u003Cspan class=pl-kos>}\u003C\u002Fspan> \u003Cspan class=pl-k>from\u003C\u002Fspan> \u003Cspan class=pl-s>'@angular\u002Fplatform-browser-dynamic'\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-main-ts-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-main-ts-LC2\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-main-ts-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-main-ts-LC3\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>import\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan> \u003Cspan class=pl-v>AppModule\u003C\u002Fspan> \u003Cspan class=pl-kos>}\u003C\u002Fspan> \u003Cspan class=pl-k>from\u003C\u002Fspan> \u003Cspan class=pl-s>'.\u002Fapp\u002Fapp.module'\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-main-ts-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-main-ts-LC4\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-main-ts-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-main-ts-LC5\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-c1>ROOT_ELEMENT_TAG\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-s>'app-root'\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-main-ts-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-main-ts-LC6\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-main-ts-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-main-ts-LC7\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>let\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>querySelector\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-c1>ROOT_ELEMENT_TAG\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-main-ts-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-main-ts-LC8\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-main-ts-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-main-ts-LC9\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>if\u003C\u002Fspan> \u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-c1>!\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-main-ts-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-main-ts-LC10\" class=\"blob-code blob-code-inner js-file-line\">  \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-c1>ROOT_ELEMENT_TAG\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-main-ts-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-main-ts-LC11\" 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>'angular-chrome-app'\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-main-ts-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-main-ts-LC12\" 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-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-c1>ROOT_ELEMENT_TAG\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-main-ts-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-main-ts-LC13\" 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-main-ts-L14\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"14\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-main-ts-LC14\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-main-ts-L15\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"15\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-main-ts-LC15\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-en>platformBrowserDynamic\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-main-ts-L16\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"16\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-main-ts-LC16\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>bootstrapModule\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-v>AppModule\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-main-ts-L17\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"17\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-main-ts-LC17\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>catch\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>err\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-c1>=>\u003C\u002Fspan> \u003Cspan class=pl-smi>console\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>error\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>err\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  \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\u002Fed147942edf31406dddd929a689fe177\u002Fraw\u002F9935595939be543aab0da3c3d230d0ae48500674\u002Fmain.ts\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fed147942edf31406dddd929a689fe177#file-main-ts\" class=\"Link--inTextBlock\">\n          main.ts\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  To use our app on any website, we can not assume anymore that the\n  \u003Ccode><app-root>\u003C\u002Fcode>\n  element exists that is usually provided by our\n  \u003Ccode>index.html\u003C\u002Fcode>\n  file. That’s why we will create our own root element programmatically before rendering the application.\n\u003C\u002Fp>\n\u003Cp>\n  We check whether there is an existing\n  \u003Ccode><app-root>\u003C\u002Fcode>\n  element in the DOM. If not, we will create a new one and append it to the document body.\n\u003C\u002Fp>\n\u003Cp>\n  Finally, let’s create some global styles within the\n  \u003Ccode>styles.scss\u003C\u002Fcode>\n  file to position our App visibly on the left side of the screen:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist119411083\" 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-styles-scss\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-scss  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"styles.scss content, created by MariusBongarts on 08:33AM on November 18, 2022.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"styles.scss\">\n        \u003Ctr>\n          \u003Ctd id=\"file-styles-scss-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-styles-scss-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=\"pl-ent\">app-root\u003C\u002Fspan> {\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-styles-scss-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-styles-scss-LC2\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-c1\">\u003Cspan class=\"pl-c1\">position\u003C\u002Fspan>\u003C\u002Fspan>: \u003Cspan class=\"pl-c1\">fixed\u003C\u002Fspan>;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-styles-scss-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-styles-scss-LC3\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-c1\">\u003Cspan class=\"pl-c1\">left\u003C\u002Fspan>\u003C\u002Fspan>: \u003Cspan class=\"pl-c1\">0\u003C\u002Fspan>;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-styles-scss-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-styles-scss-LC4\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-c1\">\u003Cspan class=\"pl-c1\">top\u003C\u002Fspan>\u003C\u002Fspan>: \u003Cspan class=\"pl-c1\">0\u003C\u002Fspan>;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-styles-scss-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-styles-scss-LC5\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-c1\">\u003Cspan class=\"pl-c1\">width\u003C\u002Fspan>\u003C\u002Fspan>: \u003Cspan class=\"pl-c1\">300\u003Cspan class=\"pl-k\">px\u003C\u002Fspan>\u003C\u002Fspan>;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-styles-scss-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-styles-scss-LC6\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-c1\">\u003Cspan class=\"pl-c1\">height\u003C\u002Fspan>\u003C\u002Fspan>: \u003Cspan class=\"pl-c1\">100\u003Cspan class=\"pl-k\">vh\u003C\u002Fspan>\u003C\u002Fspan>;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-styles-scss-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-styles-scss-LC7\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-c1\">\u003Cspan class=\"pl-c1\">background\u003C\u002Fspan>\u003C\u002Fspan>: \u003Cspan class=\"pl-c1\">#ffffff\u003C\u002Fspan>;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-styles-scss-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-styles-scss-LC8\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-c1\">\u003Cspan class=\"pl-c1\">border-right\u003C\u002Fspan>\u003C\u002Fspan>: \u003Cspan class=\"pl-c1\">1\u003Cspan class=\"pl-k\">px\u003C\u002Fspan>\u003C\u002Fspan> \u003Cspan class=\"pl-c1\">solid\u003C\u002Fspan> \u003Cspan class=\"pl-c1\">#c2c2c2\u003C\u002Fspan>;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-styles-scss-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-styles-scss-LC9\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-c1\">\u003Cspan class=\"pl-c1\">z-index\u003C\u002Fspan>\u003C\u002Fspan>: \u003Cspan class=\"pl-c1\">999\u003C\u002Fspan>;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-styles-scss-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-styles-scss-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\u002F982cb659ebbd6faabd11139a8bd04547\u002Fraw\u002Fc11e3e1d84e08bfbbc52e07b0aa7f908090a1475\u002Fstyles.scss\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F982cb659ebbd6faabd11139a8bd04547#file-styles-scss\" class=\"Link--inTextBlock\">\n          styles.scss\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Ch3 id=\"include-angular-app-into-chrome-extension\">Include Angular App into Chrome Extension\u003C\u002Fh3>\n\u003Cp>\n  In the beginning, we already installed our extension. Still, currently, it doesn’t do anything because we haven’t\n  added functionality to our\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  .\n\u003C\u002Fp>\n\u003Ch4 id=\"create-a-content-script\">Create a Content Script\u003C\u002Fh4>\n\u003Cp>To include our Angular App in any webpage, we need a way to read the DOM and make changes to it.\u003C\u002Fp>\n\u003Cp>For that, we will create a content script:\u003C\u002Fp>\n\u003Cblockquote>\n  \u003Cstrong>\u003Cem>Content scripts\u003C\u002Fem>\u003C\u002Fstrong>\n  \u003Cem>\n    live in an isolated world, allowing a content script to make changes to its JavaScript environment without\n    conflicting with the page or other extensions’ content Scripts. — \n  \u003C\u002Fem>\n  \u003Ca href=\"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fextensions\u002Fmv2\u002Fcontent_scripts\u002F\" rel=\"nofollow noopener noopener noopener\">\n    developer.chrome.com\n  \u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cp>\n  For starters, let’s create a\n  \u003Ccode>content.js\u003C\u002Fcode>\n  file with an alert to ensure that our extension successfully loads the script. This file will act as our content\n  script.\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist119182994\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-content-js\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-javascript  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"content.js content, created by MariusBongarts on 08:09AM on November 04, 2022.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"content.js\">\n        \u003Ctr>\n          \u003Ctd id=\"file-content-js-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-content-js-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-en>alert\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s>'Hello world from content.js'\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fcb146c0a1e761e4291d3c0aeb2c67969\u002Fraw\u002Fc304a224e5f11591dbe5ddc2dd9f947d6236c11b\u002Fcontent.js\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fcb146c0a1e761e4291d3c0aeb2c67969#file-content-js\" class=\"Link--inTextBlock\">\n          content.js\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  The\n  \u003Ccode>content.js\u003C\u002Fcode>\n  script is the entry point of our extension. Let’s adjust our\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  to inject our script:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist119411781\" 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 09:03AM on November 18, 2022.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"manifest.json\">\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC1\" class=\"blob-code blob-code-inner js-file-line\">{\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC2\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"name"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>Angular Chrome Extension\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC3\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"version"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>1.0.0\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC4\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"manifest_version"\u003C\u002Fspan>: \u003Cspan class=\"pl-c1\">3\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC5\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"content_scripts"\u003C\u002Fspan>: [\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC6\" class=\"blob-code blob-code-inner js-file-line\">    {\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC7\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=\"pl-ent\">"matches"\u003C\u002Fspan>: [\u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan><all_urls>\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>],\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC8\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=\"pl-ent\">"js"\u003C\u002Fspan>: [\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC9\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>content.js\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC10\" class=\"blob-code blob-code-inner js-file-line\">      ]\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC11\" class=\"blob-code blob-code-inner js-file-line\">    }\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC12\" class=\"blob-code blob-code-inner js-file-line\">  ]\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC13\" class=\"blob-code blob-code-inner js-file-line\">}\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F213e9d542e6fbe3d7e56e7212fd4e905\u002Fraw\u002F2bfd62639d28c13e810d33ca268185868016e567\u002Fmanifest.json\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F213e9d542e6fbe3d7e56e7212fd4e905#file-manifest-json\" class=\"Link--inTextBlock\">\n          manifest.json\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  To use our statically declared\n  \u003Ccode>content.js\u003C\u002Fcode>\n  script we need to register it under the\n  \u003Ccode>content_scripts\u003C\u002Fcode>\n  field. This field needs to define the\n  \u003Cem>required\u003C\u002Fem>\n  attribute\n  \u003Ccode>matches\u003C\u002Fcode>\n  to specify on which pages the content script will be injected. For that, you can set several\n  \u003Ca\n    href=\"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fextensions\u002Fdevelop\u002Fconcepts\u002Fmatch-patterns\"\n    rel=\"noopener ugc nofollow noopener noopener noopener\"\n  >\n    match patterns\n  \u003C\u002Fa>\n  . We will use the special pattern\n  \u003Ccode><all_urls>\u003C\u002Fcode>\n  to match any URL that starts with a permitted scheme- for example\n  \u003Ccode>http\u003C\u002Fcode>\n  or\n  \u003Ccode>https\u003C\u002Fcode>\n  .\n\u003C\u002Fp>\n\u003Cp>\n  We also define the optional field\n  \u003Ccode>js\u003C\u002Fcode>\n  . Here we define our scripts to be injected into matching pages.\n\u003C\u002Fp>\n\u003Cp>\n  Let’s update our extension by pressing the refresh button of the extension on\n  \u003Ccode>chrome:\u002F\u002Fextensions\u003C\u002Fcode>\n  . We can now navigate to any page, and if done correctly, an alert should appear when the page is loaded.\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1760\u002F1*L--jyGGyNT7tWGSDOIMl0A.png\"\n    class=\"kg-image\"\n    alt=\"Screenshot showing alert on Medium.com\"\n    loading=\"lazy\"\n  \u002F>\n\u003C\u002Ffigure>\n\u003Cp>Worst Chrome Extension ever, right? Let’s continue and include Angular.\u003C\u002Fp>\n\u003Ch4 id=\"create-an-angular-content-script\">Create an Angular Content Script\u003C\u002Fh4>\n\u003Cp>\n  Let’s build our Angular application by running\n  \u003Ccode>yarn build\u003C\u002Fcode>\n  or\n  \u003Ccode>npm run build\u003C\u002Fcode>\n  .\n\u003C\u002Fp>\n\u003Cp>\n  You should see that the react-scripts build script generates some Javascript files in the\n  \u003Cstrong>\u003Cem>\u002Fdist\u002Fangular-chrome-app\u003C\u002Fem>\u003C\u002Fstrong>\n  folder:\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1760\u002F1*dqETET9_8S-ii2mCpn-pMA.png\"\n    class=\"kg-image\"\n    alt=\"Screenshot: Angular build folder\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>Angular build folder\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>\n  From the generated\n  \u003Ccode>index.html\u003C\u002Fcode>\n  we can derive which files are necessary to make the application work:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist119411364\" 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 08:40AM on November 18, 2022.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"index.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-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-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>app-root\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>app-root\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\">  \u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>script\u003C\u002Fspan> \u003Cspan class=pl-c1>src\u003C\u002Fspan>="\u003Cspan class=pl-s>runtime.b46334b3af268ec4.js\u003C\u002Fspan>" \u003Cspan class=pl-c1>type\u003C\u002Fspan>="\u003Cspan class=pl-s>module\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-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>script\u003C\u002Fspan> \u003Cspan class=pl-c1>src\u003C\u002Fspan>="\u003Cspan class=pl-s>polyfills.8d28de284ef0dd8f.js\u003C\u002Fspan>" \u003Cspan class=pl-c1>type\u003C\u002Fspan>="\u003Cspan class=pl-s>module\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-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>script\u003C\u002Fspan> \u003Cspan class=pl-c1>src\u003C\u002Fspan>="\u003Cspan class=pl-s>main.87d969ee394c36a6.js\u003C\u002Fspan>" \u003Cspan class=pl-c1>type\u003C\u002Fspan>="\u003Cspan class=pl-s>module\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-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><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>body\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\u002Fa7c7b61e2a6a317631bceee7f2a4ba14\u002Fraw\u002Fde53b6c53d8ee17182300b229f618f193754294e\u002Findex.html\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fa7c7b61e2a6a317631bceee7f2a4ba14#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>We can see that three JavaScript files are loaded to make our Angular application work:\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>\n    \u003Cstrong>runtime\u003C\u002Fstrong>\n    .[hash].js\n  \u003C\u002Fli>\n  \u003Cli>\n    \u003Cstrong>polyfills\u003C\u002Fstrong>\n    .[hash].js\n  \u003C\u002Fli>\n  \u003Cli>\n    \u003Cstrong>main\u003C\u002Fstrong>\n    .[hash].js\n  \u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\n  What we now want to do is not load the main file from the\n  \u003Ccode>index.html\u003C\u002Fcode>\n  but within our Chrome extension as a content script.\n\u003C\u002Fp>\n\u003Ch4 id=\"copy-build-files-to-the-extension\">Copy build files to the extension\u003C\u002Fh4>\n\u003Cp>\n  We could now go ahead and copy & paste all of the three files mentioned above and include them in our\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  .\n\u003C\u002Fp>\n\u003Cp>\n  But, as the hashes in the filename change after each build, we should automate this. Notice that we could set up\n  Webpack here but let’s keep things simple and just copy all files needed and adjust their filename after each build.\n\u003C\u002Fp>\n\u003Cp>\n  To do that, we create a new script in our\n  \u003Ccode>package.json\u003C\u002Fcode>\n  which will execute those three commands\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist119411709\" 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-copy-sh\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-shell  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"copy.sh content, created by MariusBongarts on 08:57AM on November 18, 2022.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"copy.sh\">\n        \u003Ctr>\n          \u003Ctd id=\"file-copy-sh-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-copy-sh-LC1\" class=\"blob-code blob-code-inner js-file-line\">cp dist\u002Fangular-chrome-app\u002Fmain\u003Cspan class=\"pl-k\">*\u003C\u002Fspan>.js ..\u002Fextension\u002Fmain.js\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-copy-sh-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-copy-sh-LC2\" class=\"blob-code blob-code-inner js-file-line\">cp dist\u002Fangular-chrome-app\u002Fpolyfills\u003Cspan class=\"pl-k\">*\u003C\u002Fspan>.js ..\u002Fextension\u002Fpolyfills.js\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-copy-sh-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-copy-sh-LC3\" class=\"blob-code blob-code-inner js-file-line\">cp dist\u002Fangular-chrome-app\u002Fruntime\u003Cspan class=\"pl-k\">*\u003C\u002Fspan>.js ..\u002Fextension\u002Fruntime.js\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-copy-sh-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-copy-sh-LC4\" class=\"blob-code blob-code-inner js-file-line\">cp dist\u002Fangular-chrome-app\u002Fstyles\u003Cspan class=\"pl-k\">*\u003C\u002Fspan>.css ..\u002Fextension\u002Fstyles.css\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\u002F00da5de9f7d411ae12271c8bad971737\u002Fraw\u002F1842fc851497f19058d3d4cc87c724415ecfe8fb\u002Fcopy.sh\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F00da5de9f7d411ae12271c8bad971737#file-copy-sh\" class=\"Link--inTextBlock\">\n          copy.sh\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 will copy all necessary files into our\n  \u003Cstrong>\u003Cem>\u002Fextension\u003C\u002Fem>\u003C\u002Fstrong>\n  folder and removes the hashes from the file names. Also, notice that we include our global styles.\n\u003C\u002Fp>\n\u003Cp>\n  Here are our updated scripts in the\n  \u003Ccode>package.json\u003C\u002Fcode>\n  in the\n  \u003Cstrong>\u003Cem>\u002Fangular-chrome-app\u003C\u002Fem>\u003C\u002Fstrong>\n  folder:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist119411738\" 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 08:59AM on November 18, 2022.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"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\">\u003Cspan class=\"pl-ent\">"scripts"\u003C\u002Fspan>: {\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\">"ng"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>ng\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-ent\">"start"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>ng serve\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\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\">"build"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>ng build && yarn copy:build\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\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\">"copy:build"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>cp dist\u002Fangular-chrome-app\u002Fmain*.js ..\u002Fextension\u002Fmain.js & cp dist\u002Fangular-chrome-app\u002Fpolyfills*.js ..\u002Fextension\u002Fpolyfills.js & cp dist\u002Fangular-chrome-app\u002Fruntime*.js ..\u002Fextension\u002Fruntime.js & cp dist\u002Fangular-chrome-app\u002Fstyles*.css ..\u002Fextension\u002Fstyles.css\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\">"watch"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>ng build --watch --configuration development\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\">  \u003Cspan class=\"pl-ent\">"test"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>ng test\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>\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\">},\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\u002F884b846d5215aee44fe7f16458bd1f6f\u002Fraw\u002Fa7c08bf8b0c9cc1947cb5f1e7a854cf9bd983708\u002Fpackage.json\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F884b846d5215aee44fe7f16458bd1f6f#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  After each build, we copy the build files to our\n  \u003Cstrong>\u003Cem>\u002Fextension\u003C\u002Fem>\u003C\u002Fstrong>\n  folder in which we can now include them by adding them as content scripts like this:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist119411753\" 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 09:00AM on November 18, 2022.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"manifest.json\">\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC1\" class=\"blob-code blob-code-inner js-file-line\">{\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC2\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"name"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>Angular Chrome Extension\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC3\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"version"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>1.0.0\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC4\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"manifest_version"\u003C\u002Fspan>: \u003Cspan class=\"pl-c1\">3\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC5\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"content_scripts"\u003C\u002Fspan>: [\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC6\" class=\"blob-code blob-code-inner js-file-line\">    {\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC7\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=\"pl-ent\">"matches"\u003C\u002Fspan>: [\u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan><all_urls>\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>],\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC8\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=\"pl-ent\">"js"\u003C\u002Fspan>: [\u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>runtime.js\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>, \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>polyfills.js\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>, \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>main.js\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\">      \u003Cspan class=\"pl-ent\">"css"\u003C\u002Fspan>: [\u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>styles.css\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>]\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC10\" class=\"blob-code blob-code-inner js-file-line\">    }\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC11\" class=\"blob-code blob-code-inner js-file-line\">  ]\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC12\" class=\"blob-code blob-code-inner js-file-line\">}\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \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\u002F010afe172111d747d96f6045597b696f\u002Fraw\u002F3e65a0344ccc2b7e769298ca14e215e139e46dc7\u002Fmanifest.json\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F010afe172111d747d96f6045597b696f#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>Now, we can go ahead and re-load the extension to apply our changes.\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1760\u002F1*wnreH0oI6mC3wbb0zlVGQg.png\"\n    class=\"kg-image\"\n    alt=\"Screenshot: How to reload extension by clicking reload icon\"\n    loading=\"lazy\"\n  \u002F>\n\u003C\u002Ffigure>\n\u003Cp>When navigating to any webpage, we should see our Angular application showing up on the left side of the screen:\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1760\u002F1*XtA01UaJ3U2pswjpCYwfBw.png\"\n    class=\"kg-image\"\n    alt=\"Screenshot: Angular App loaded in Chrome Extension\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>Angular App loaded in Chrome Extension\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>\n  Admittedly, this is still not a cool Chrome Extension. But now that we’ve successfully integrated our Angular app into\n  a Chrome extension, you can build any app of your choice with Angular that runs on any webpage.\n\u003C\u002Fp>\n\u003Cp>\n  You can find the code of this article in this\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FMariusBongarts\u002Freact-chrome-extension\" rel=\"noopener\">GitHub repository\u003C\u002Fa>\n  .\n\u003C\u002Fp>\n\u003Ch3 id=\"final-thoughts\">Final Thoughts\u003C\u002Fh3>\n\u003Cp>\n  Creating your own Chrome Extension is much easier than many may think. Once you set up the extension correctly, you\n  can develop whatever you want using Angular. Being able to design your very own Chrome extension can be a lot of fun\n  as you can let your creativity run wild.\n\u003C\u002Fp>\n\u003Cp>\n  I am always happy to answer questions and am open to criticism. Get in touch with me via\n  \u003Cstrong>\u003C\u002Fstrong>\n  \u003Ca\n    href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fmarius-bongarts-6b3638171\u002F\"\n    rel=\"noopener ugc nofollow noopener noopener noopener noopener\"\n  >\n    \u003Cstrong>LinkedIn\u003C\u002Fstrong>\n  \u003C\u002Fa>\n  \u003Cstrong>\u003C\u002Fstrong>\n  or\n  \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002FMariusBongarts\" rel=\"noopener ugc nofollow noopener noopener noopener noopener\">\n    \u003Cstrong>Twitter\u003C\u002Fstrong>\n  \u003C\u002Fa>\n  \u003Cstrong>.\u003C\u002Fstrong>\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",2129,[42,73,97],{"id":43,"slug":44,"title":45,"description":46,"url":47,"publishedAt":48,"createdAt":49,"updatedAt":48,"featured":20,"readingTime":50,"tags":51,"imageUrl":55,"imageAlt":56,"faviconUrl":57,"publishedAtString":48,"category":58,"readTimeString":72},"4c4f3f6e07b8d087c330193b","best-bookmark-manager-chrome-extensions","Top 12 Chrome Bookmark Manager Extensions: The Great Comparison","Compare the 12 best Chrome bookmark manager extensions. We tested Web Highlights, Raindrop.io, Session Buddy, Toby and more to find the top pick.","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fbest-bookmark-manager-chrome-extensions\u002F","2026-07-28T15:00:00.000+00:00","2026-07-28T14:30:00.000+00:00",26,[24,52,53,54],"comparison","Productivity","Tools","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fcontent\u002Fimages\u002F2026\u002F07\u002Fchrome-bookmark-manager-extensions-the-great-comparison.jpg","Top 12 Chrome Bookmark Manager Extensions","https:\u002F\u002Fweb-highlights.com\u002Ffavicon.ico",[59,66],{"type":60,"title":61,"shortTitle":62,"icon":63,"description":64,"excerpt":65},"bookmarks","Bookmarks, Clips & Save-for-Later","Bookmarks","bookmark","Organize bookmarks, export from Chrome, and capture pages with less chaos. Web Highlights helps you save smarter than the default bookmark bar.","Exporting and organizing bookmarks is a huge search topic for a reason: browser defaults don’t scale. Web Highlights adds structure—tags, notes, and highlights—so saved pages stay findable, whether you’re migrating from Pocket or just tired of duplicate folders.",{"type":67,"title":68,"shortTitle":53,"icon":69,"description":70,"excerpt":71},"productivity","Browser Productivity & Chrome Extensions","command","Curated extension lists, focus workflows, and tips for getting more from Chrome—always with an eye toward reading, capture, and learning.","Productivity isn’t only task managers. These articles cover the browser layer: extensions that protect focus, comparisons that save you from dead-end tools, and setup tips that keep your reading and capture stack lightweight but powerful.","26 min read",{"id":74,"slug":75,"title":76,"description":77,"url":78,"publishedAt":79,"createdAt":80,"updatedAt":79,"featured":20,"readingTime":81,"tags":82,"imageUrl":86,"imageAlt":87,"faviconUrl":57,"publishedAtString":79,"category":88,"readTimeString":96},"6a61e89d909b7209ced49b2f","top-chrome-language-learning-extensions-the-great-comparison","Top 10 Chrome Extensions For Language Learning: The Great Comparison","Compare the 10 best Chrome language learning extensions — popup dictionaries, AI translators, subtitle tools and flashcard trainers tested, rated and ranked.","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Ftop-chrome-language-learning-extensions-the-great-comparison\u002F","2026-07-23T12:05:50.000+00:00","2026-07-23T10:10:37.000+00:00",27,[24,83,84,85],"Learning","students","Flashcard Learning","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fcontent\u002Fimages\u002F2026\u002F07\u002Fchrome-language-learning-extensions-the-great-comparison.jpg","Top 10 Chrome Language Learning Extensions",[89,95],{"type":90,"title":91,"shortTitle":83,"icon":92,"description":93,"excerpt":94},"learning","Retain What You Read with Web Highlights","repeat","Most of what we read is forgotten within days. Web Highlights turns your highlights into spaced repetition flashcards so you can actively review and lock knowledge into long-term memory.","Spaced repetition and active recall beat passive re-reading. Web Highlights connects what you highlight on the web and in PDFs to short review sessions, so quotes and facts resurface when your brain needs them—not only when you remember to open the source again.",{"type":67,"title":68,"shortTitle":53,"icon":69,"description":70,"excerpt":71},"27 min read",{"id":98,"slug":99,"title":100,"description":101,"url":102,"publishedAt":103,"createdAt":104,"updatedAt":105,"featured":20,"readingTime":106,"tags":107,"imageUrl":110,"imageAlt":111,"faviconUrl":57,"publishedAtString":103,"category":112,"readTimeString":120},"6a5e332c909b7209ced49ae1","turn-youtube-videos-into-flashcards-youll-remember","Turn YouTube Videos into Flashcards You’ll Remember","You watched the whole talk and kept almost none of it. Highlight the transcript, let on-device AI write the cards — free, private, no signup.","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fturn-youtube-videos-into-flashcards-youll-remember\u002F","2026-07-20T19:00:23.000+00:00","2026-07-20T14:39:40.000+00:00","2026-07-21T06:19:27.000+00:00",5,[108,85,83,109],"Youtube","AI","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fcontent\u002Fimages\u002F2026\u002F07\u002Fturn-youtube-videos-into-flashcards.webp","Title: Turn YouTube Videos into Flashcards You’ll Remember; Subtitle: You watched the whole talk and kept almost none of it.",[113,114],{"type":90,"title":91,"shortTitle":83,"icon":92,"description":93,"excerpt":94},{"type":115,"title":116,"shortTitle":117,"icon":115,"description":118,"excerpt":119},"youtube","YouTube Notes, Transcripts & AI Summaries","YouTube","Turn videos into notes: transcripts, AI summaries, and highlights. See how Web Highlights fits into a modern YouTube learning stack.","Video is a top learning channel, but it’s hard to revisit. Web Highlights helps you pull the signal out of long videos—structured notes and summaries you can link back to the moment that mattered—without juggling five single-purpose extensions.","5 min read"]