[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-article-building-your-own-new-tab-chrome-extension":3},{"meta":4,"html":36,"authorName":37,"authorFacebookUrl":38,"authorProfileImage":39,"authorWebsite":40,"authorJobTitle":41,"authorTwitterUrl":42,"wordCount":43,"recommended":44},{"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":35,"recommendedSlugs":10},"63550997042f79061b09bbd8","building-your-own-new-tab-chrome-extension","post","Building Your Own New Tab Chrome Extension","How to build a beautiful New Tab Chrome Extension with plain HTML, CSS, JavaScript, and Web Components",null,{"url":12,"alt":13,"caption":14,"width":15,"height":16},"\u002Fblog\u002Fcontent\u002Fimages\u002F2023\u002F08\u002Fhabit-tracker.png","Our own New Tab Chrome Extension — Demo","Our own New Tab Chrome Extension — \u003Ca href=\"https:\u002F\u002Fmariusbongarts.github.io\u002Fnew-tab-chrome-extension\u002F\">Demo\u003C\u002Fa>",900,454,"2022-10-23T18:21:24.000+00:00","2022-10-23T09:29:59.000+00:00","2023-08-09T17:53:51.000+00:00",false,5,[23,26,29,32],{"name":24,"slug":25},"Chrome Extension","chrome-extension",{"name":27,"slug":28},"Tutorial","tutorial",{"name":30,"slug":31},"Web Development","web-development",{"name":33,"slug":34},"Web Components","web-components","marius-bongarts","\u003Cp>\n  There are many great browser extensions to configure your New-Tab browser page. Many of them are great, as they allow\n  us to have a customizable homepage in our new browser window.\n\u003C\u002Fp>\n\u003Cp>\n  In case you don’t know what I’m talking about — Browser extensions like\n  \u003Ca href=\"https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Finfinity-new-tab\u002Fdbfmnekepjoapopniengjbcpnbljalfg\" rel=\"noopener\">\n    Infinity New Tab\n  \u003C\u002Fa>\n  ,\n  \u003Ca\n    href=\"https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fnew-tab-studio-widgets-in\u002Fepngggilgnflanfabeldfpbgponcgpgl\u002Frelated\"\n  >\n    New Tab Studio\n  \u003C\u002Fa>\n  , or\n  \u003Ca\n    href=\"https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fdailydev-the-homepage-dev\u002Fjlmpjdjjbgclbocgajdjefcidcncaied\"\n    rel=\"noopener\"\n  >\n    daily.dev\n  \u003C\u002Fa>\n  allow us to make an empty browser tab look better.\n\u003C\u002Fp>\n\u003Cp>So, instead of 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\u002F800\u002F1*a1KVJpYYsM6h9HsuGwRyxA.png\"\n    class=\"kg-image\"\n    alt=\"Default Chrome New Tab\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>Default Chrome New Tab\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>We can get something like this:\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"\u002Fblog\u002Fcontent\u002Fimages\u002F2023\u002F08\u002Fimage-3-1.webp\"\n    class=\"kg-image\"\n    alt=\"New Tab Studio: widgets in a new tab\"\n    loading=\"lazy\"\n    width=\"900\"\n    height=\"448\"\n    srcset=\"\n      \u002Fblog\u002Fcontent\u002Fimages\u002F2023\u002F08\u002Fimage-3-1.webp 600w,\n      \u002Fblog\u002Fcontent\u002Fimages\u002F2023\u002F08\u002Fimage-3-1.webp           900w\n    \"\n    sizes=\"(min-width: 720px) 720px\"\n  \u002F>\n  \u003Cfigcaption>\n    \u003Ca href=\"https:\u002F\u002Fnew-tab.studio\u002F\">New Tab Studio\u003C\u002Fa>\n    : widgets in a new tab\n  \u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>Or, this:\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"\u002Fblog\u002Fcontent\u002Fimages\u002F2022\u002F10\u002Fimage-1.webp\"\n    class=\"kg-image\"\n    alt=\"daily.dev | The Homepage Developers Deserve\"\n    loading=\"lazy\"\n    width=\"2000\"\n    height=\"1016\"\n    srcset=\"\n      \u002Fblog\u002Fcontent\u002Fimages\u002F2022\u002F10\u002Fimage-1.webp   600w,\n      \u002Fblog\u002Fcontent\u002Fimages\u002F2022\u002F10\u002Fimage-1.webp 1000w,\n      \u002Fblog\u002Fcontent\u002Fimages\u002F2022\u002F10\u002Fimage-1.webp 1600w,\n      \u002Fblog\u002Fcontent\u002Fimages\u002F2022\u002F10\u002Fimage-1.webp 2400w\n    \"\n    sizes=\"(min-width: 720px) 720px\"\n  \u002F>\n  \u003Cfigcaption>\n    \u003Ca href=\"https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fdailydev-the-homepage-dev\u002Fjlmpjdjjbgclbocgajdjefcidcncaied\">\n      daily.dev\n    \u003C\u002Fa>\n    | The Homepage Developers Deserve\n  \u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>Usually, the tab is customizable and lets you design it the way you like it the most.\u003C\u002Fp>\n\u003Chr \u002F>\n\u003Cp>\n  Still, all of these extensions eventually reach their limits. Yet the beauty of being a developer is that you can\n  build your own stuff. Therefore, I will show you how to build your own fully customizable New-Tab Chrome Extension\n  using plain HTML and JavaScript.\n\u003C\u002Fp>\n\u003Cp>Here is what it will look like:\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F800\u002F1*d3aJwJLYJpZfQYKTuTMr-A.gif\"\n    class=\"kg-image\"\n    alt=\"Our personal New Tab Dashboard\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>Our personal New Tab Dashboard\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>\n  You can find a\n  \u003Ca href=\"https:\u002F\u002Fmariusbongarts.github.io\u002Fnew-tab-chrome-extension\u002F\" rel=\"noopener\">demo of the page here\u003C\u002Fa>\n  . And here is the\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FMariusBongarts\u002Fnew-tab-chrome-extension\u002Ftree\u002Fmain\">GitHub repository\u003C\u002Fa>\n  .\n\u003C\u002Fp>\n\u003Ch3 id=\"get-started-%E2%80%94-chrome-extension-setup\">Get Started — 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. 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=\"gist118948196\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-manifest-json\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-json  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"manifest.json content, created by MariusBongarts on 06:06AM on October 20, 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>New Tab - React\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\u002Fa86a749214b394ffada6c46b858372db\u002Fraw\u002F2fc75d95950ecb390ffaba1326e1fc59299fada9\u002Fmanifest.json\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fa86a749214b394ffada6c46b858372db#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 directory with our\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  .\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F800\u002F1*ZJXDmH7TWIjBkOZPKvwEXw.png\"\n    class=\"kg-image\"\n    alt=\"How to load unpacked Chrome Extension\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>Load your Chrome Extension\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>Congratulations! You’ve just created a Chrome Extension!\u003C\u002Fp>\n\u003Ch4 id=\"setup-new-tab-page\">Setup New-Tab page\u003C\u002Fh4>\n\u003Cp>\n  Great, we created our own Chrome Extension. Still, currently, it doesn’t do anything. Let’s make our extension show a\n  simple HTML file whenever the user opens a new tab.\n\u003C\u002Fp>\n\u003Cp>\n  We can do that by adding a\n  \u003Ccode>chrome_url_overrides\u003C\u002Fcode>\n  property to our\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  . This is where you determine which html file will be used whenever a user opens a new tab.\n\u003C\u002Fp>\n\u003Cp>\n  Therefore let’s create an example\n  \u003Ccode>index.html\u003C\u002Fcode>\n  file:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist118948407\" 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 06:30AM on October 20, 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-c1><!DOCTYPE html\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC2\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>html\u003C\u002Fspan> \u003Cspan class=pl-c1>lang\u003C\u002Fspan>="\u003Cspan class=pl-s>en\u003C\u002Fspan>"\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC3\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC4\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>head\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC5\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>meta\u003C\u002Fspan> \u003Cspan class=pl-c1>charset\u003C\u002Fspan>="\u003Cspan class=pl-s>UTF-8\u003C\u002Fspan>"\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC6\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>meta\u003C\u002Fspan> \u003Cspan class=pl-c1>http-equiv\u003C\u002Fspan>="\u003Cspan class=pl-s>X-UA-Compatible\u003C\u002Fspan>" \u003Cspan class=pl-c1>content\u003C\u002Fspan>="\u003Cspan class=pl-s>IE=edge\u003C\u002Fspan>"\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC7\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>meta\u003C\u002Fspan> \u003Cspan class=pl-c1>name\u003C\u002Fspan>="\u003Cspan class=pl-s>viewport\u003C\u002Fspan>" \u003Cspan class=pl-c1>content\u003C\u002Fspan>="\u003Cspan class=pl-s>width=device-width, initial-scale=1.0\u003C\u002Fspan>"\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC8\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>title\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>Hello World!\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>title\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC9\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>head\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC10\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC11\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-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-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC12\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>h1\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>Hello from New Tab!\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>h1\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC13\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>body\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L14\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"14\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC14\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L15\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"15\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC15\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>html\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F071985c418ad45a3e2e7348bed684895\u002Fraw\u002F0da579b270b9e30e41499186b2ab8d4c019a4785\u002Findex.html\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F071985c418ad45a3e2e7348bed684895#file-index-html\" class=\"Link--inTextBlock\">\n          index.html\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  And pass it to our\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  :\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist118948417\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-manifest-json\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-json  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"manifest.json content, created by MariusBongarts on 06:31AM on October 20, 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>New Tab - React\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\">"chrome_url_overrides"\u003C\u002Fspan>: {\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC6\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=\"pl-ent\">"newtab"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>index.html\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC7\" class=\"blob-code blob-code-inner js-file-line\">  },\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\">"permissions"\u003C\u002Fspan>: [\u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>storage\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>]\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC9\" class=\"blob-code blob-code-inner js-file-line\">}\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \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\u002F95ec1681489621eb913d155e69159a5b\u002Fraw\u002Fe4970343724e450f03561c3cb6063a9c5c1c36eb\u002Fmanifest.json\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F95ec1681489621eb913d155e69159a5b#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  Notice that we also set the\n  \u003Ccode>storage\u003C\u002Fcode>\n  permission to be able to access the storage from our page and to store things locally.\n\u003C\u002Fp>\n\u003Cp>Now, let’s reload our extension:\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F800\u002F1*PDMCLFQCOmw8Of37cpV-pg.png\"\n    class=\"kg-image\"\n    alt=\"Screenshot — Reload Chrome Extension\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>Reload Chrome Extension\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>Finally, when opening a new tab in chrome, we can see our very own New-Tab page:\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F800\u002F1*i1bao8pVd3d7oICgExSlSA.png\"\n    class=\"kg-image\"\n    alt=\"Screenshot — Our own New-Tab page\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>Our own New-Tab page\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Ch3 id=\"customize-our-page\">Customize our Page\u003C\u002Fh3>\n\u003Cp>Once we have the setup done, we can let our ideas run wild. You can design your website the way you want.\u003C\u002Fp>\n\u003Cp>Our New Tab extension contains two things:\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>\n    A\n    \u003Cstrong>clock\u003C\u002Fstrong>\n    that updates every second\n  \u003C\u002Fli>\n  \u003Cli>\n    A\n    \u003Cstrong>habit tracker\u003C\u002Fstrong>\n    that lets you measure five habits of your choice with customizable colors\n  \u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\n  Both components are built with plain HTML, CSS, and JavaScript. Still, I wrapped both into their own Web Components to\n  encapsulate them better. This will also make our entry\n  \u003Ccode>\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FMariusBongarts\u002Fnew-tab-chrome-extension\u002Fblob\u002Fmain\u002Findex.html\" rel=\"noopener\">\n      index.html\n    \u003C\u002Fa>\n  \u003C\u002Fcode>\n  look much cleaner and more structured:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist118967279\" 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 06:53AM on October 21, 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>header\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-c><!-- About  -->\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><\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-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>main\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC6\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>section\u003C\u002Fspan> \u003Cspan class=pl-c1>class\u003C\u002Fspan>="\u003Cspan class=pl-s>clock-section\u003C\u002Fspan>"\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC7\" class=\"blob-code blob-code-inner js-file-line\">            \u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>my-clock\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>my-clock\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC8\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>section\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC9\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>section\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC10\" class=\"blob-code blob-code-inner js-file-line\">            \u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>h1\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>Habit Tracker 💪\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>h1\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC11\" class=\"blob-code blob-code-inner js-file-line\">            \u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>five-habit-tracker\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>five-habit-tracker\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC12\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>section\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC13\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>main\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L14\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"14\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC14\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>footer\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L15\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"15\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC15\" class=\"blob-code blob-code-inner js-file-line\">       \u003Cspan class=pl-c><!-- Footer  -->\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L16\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"16\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC16\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>footer\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L17\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"17\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC17\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>body\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L18\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"18\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC18\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>script\u003C\u002Fspan> \u003Cspan class=pl-c1>src\u003C\u002Fspan>="\u003Cspan class=pl-s>.\u002Fsrc\u002Ffive-habit-tracker\u002Fmain.js\u003C\u002Fspan>"\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>script\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-html-L19\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"19\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-html-LC19\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos><\u003C\u002Fspan>\u003Cspan class=pl-ent>script\u003C\u002Fspan> \u003Cspan class=pl-c1>src\u003C\u002Fspan>="\u003Cspan class=pl-s>.\u002Fsrc\u002Fclock\u002Fmain.js\u003C\u002Fspan>"\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-ent>script\u003C\u002Fspan>\u003Cspan class=pl-kos>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \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\u002F8bbac2dfa057cf4a4d972fa0eb1399e9\u002Fraw\u002F88752148956102f4126376fb9b10a7149bf837a2\u002Findex.html\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F8bbac2dfa057cf4a4d972fa0eb1399e9#file-index-html\" class=\"Link--inTextBlock\">\n          index.html\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  We registered the custom elements\n  \u003Ccode><my-clock>\u003C\u002Fcode>\n  and\n  \u003Ccode><five-habit-tracker>\u003C\u002Fcode>\n  by loading its scripts from the\n  \u003Cem>\u002Fsrc\u002F*\u003C\u002Fem>\n  folder. Both contain a shadow root with our actual content. If you are unfamiliar with Web Components, I highly\n  recommend reading one of my Web Component beginner series first:\n\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>\n    \u003Ca\n      href=\"https:\u002F\u002Fjavascript.plainenglish.io\u002Fwill-web-components-replace-frontend-frameworks-535891d779ba\"\n      rel=\"noopener ugc nofollow noopener noopener\"\n    >\n      The Complete Web Component Guide: Custom Elements\n    \u003C\u002Fa>\n    (Part 1)\n  \u003C\u002Fli>\n  \u003Cli>\n    \u003Ca\n      href=\"https:\u002F\u002Fmedium.com\u002F@mariusbongarts11\u002Fshowcase-your-medium-articles-with-web-components-part-1-basics-d2c6618e9482\"\n      rel=\"noopener\"\n    >\n      Build Your Own Blog Portfolio with Web Components (Part 1)\n    \u003C\u002Fa>\n  \u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch4 id=\"clock-component\">Clock component\u003C\u002Fh4>\n\u003Cp>Let’s have a look at our clock Web Components. This component is straightforward and looks like this:\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist118967327\" 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-my-clock-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=\"my-clock.js content, created by MariusBongarts on 06:58AM on October 21, 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=\"my-clock.js\">\n        \u003Ctr>\n          \u003Ctd id=\"file-my-clock-js-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>class\u003C\u002Fspan> \u003Cspan class=pl-v>MyClock\u003C\u002Fspan> \u003Cspan class=pl-k>extends\u003C\u002Fspan> \u003Cspan class=pl-v>HTMLElement\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-my-clock-js-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC2\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-k>static\u003C\u002Fspan> \u003Cspan class=pl-c1>styles\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-s>`\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-my-clock-js-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC3\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s><style>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-my-clock-js-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC4\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>\u002F\u002F ...\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-my-clock-js-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC5\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>\u002F\u002F Some Styles\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-my-clock-js-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC6\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>\u002F\u002F ...\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-my-clock-js-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC7\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-my-clock-js-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC8\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>`\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-my-clock-js-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC9\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-k>get\u003C\u002Fspan> \u003Cspan class=pl-en>template\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-my-clock-js-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC10\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-k>return\u003C\u002Fspan> \u003Cspan class=pl-s>`\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-my-clock-js-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC11\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>    \u003Cspan class=pl-s1>\u003Cspan class=pl-kos>${\u003C\u002Fspan>\u003Cspan class=pl-v>MyClock\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>styles\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-my-clock-js-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC12\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>    <div id="clock"><\u002Fdiv>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-my-clock-js-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC13\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>    `\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-my-clock-js-L14\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"14\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC14\" 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-my-clock-js-L15\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"15\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC15\" class=\"blob-code blob-code-inner js-file-line\">  \u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-my-clock-js-L16\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"16\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC16\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-en>constructor\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-my-clock-js-L17\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"17\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC17\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-smi>super\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-my-clock-js-L18\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"18\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC18\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-smi>this\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>attachShadow\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan> \u003Cspan class=pl-c1>mode\u003C\u002Fspan>: \u003Cspan class=pl-s>"open"\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-my-clock-js-L19\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"19\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC19\" 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-my-clock-js-L20\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"20\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC20\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-my-clock-js-L21\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"21\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC21\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-en>connectedCallback\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-my-clock-js-L22\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"22\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC22\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-smi>this\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>shadowRoot\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>innerHTML\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-smi>this\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>template\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-my-clock-js-L23\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"23\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC23\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-smi>this\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>init\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-my-clock-js-L24\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"24\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC24\" 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-my-clock-js-L25\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"25\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC25\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-my-clock-js-L26\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"26\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC26\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-en>init\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-my-clock-js-L27\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"27\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC27\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-en>setTime\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-c1>=>\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-my-clock-js-L28\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"28\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC28\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-s1>localeTimeString\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-k>new\u003C\u002Fspan> \u003Cspan class=pl-v>Date\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>toLocaleTimeString\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-my-clock-js-L29\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"29\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC29\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-smi>this\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>shadowRoot\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>getElementById\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s>"clock"\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>innerHTML\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-s1>localeTimeString\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-my-clock-js-L30\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"30\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC30\" 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-my-clock-js-L31\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"31\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC31\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-en>setTime\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-my-clock-js-L32\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"32\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC32\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-en>setInterval\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-c1>=>\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-my-clock-js-L33\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"33\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC33\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-en>setTime\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-my-clock-js-L34\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"34\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC34\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-c1>1000\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-my-clock-js-L35\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"35\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC35\" 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-my-clock-js-L36\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"36\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC36\" 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-my-clock-js-L37\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"37\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC37\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-my-clock-js-L38\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"38\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-my-clock-js-LC38\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s1>customElements\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>define\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s>"my-clock"\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-v>MyClock\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\u002F988c31ea7a2d92510264ce9acfb10725\u002Fraw\u002F79862cb6a323d726ceed1c6116461868c8c9b18d\u002Fmy-clock.js\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F988c31ea7a2d92510264ce9acfb10725#file-my-clock-js\" class=\"Link--inTextBlock\">\n          my-clock.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  In the constructor, we first call our super-class\n  \u003Ccode>HTMLElement\u003C\u002Fcode>\n  and then attach an open Shadow-DOM to our component to make our styles encapsulates from other parts of the website.\n\u003C\u002Fp>\n\u003Cp>\n  Then, in our\n  \u003Ccode>connectedCallback()\u003C\u002Fcode>\n  lifecycle method, we add some HTML to our\n  \u003Ccode>shadowRoot\u003C\u002Fcode>\n  . Here it is only one\n  \u003Ccode>div\u003C\u002Fcode>\n  element and some styles. Then, we set an interval to update its content to be a\n  \u003Ccode>localeTimeString\u003C\u002Fcode>\n  every second.\n\u003C\u002Fp>\n\u003Ch4 id=\"habit-tracker-component\">Habit-Tracker component\u003C\u002Fh4>\n\u003Cp>\n  For this article, I did not want to spend too much time developing my own fancy tools to show in the New Tab. So, I\n  did what I often do — I went to CodePen to search for awesome stuff.\n\u003C\u002Fp>\n\u003Cp>\n  And I was not disappointed when I found this awesome Five-Habit tracker by\n  \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Frominamartinlib\" rel=\"noopener\">\u003Cstrong>Romina Martín\u003C\u002Fstrong>\u003C\u002Fa>\n  :\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-embed-card\">\n  \u003Ciframe\n    id=\"cp_embed_Pdpbjo\"\n    src=\"https:\u002F\u002Fcodepen.io\u002FRominaMartin\u002Fembed\u002Fpreview\u002FPdpbjo?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=Pdpbjo\"\n    title=\"Five habit tracker - LocalStorage\"\n    scrolling=\"no\"\n    frameborder=\"0\"\n    height=\"300\"\n    allowtransparency=\"true\"\n    class=\"cp_embed_iframe\"\n    style=\"width: 100%; overflow: hidden\"\n  >\u003C\u002Fiframe>\n\u003C\u002Ffigure>\n\u003Cp>\n  I love it. So, I copied it and wrapped everything inside its own Web Component. You can find the full source code of\n  the custom element’s code\n  \u003Ca\n    href=\"https:\u002F\u002Fgithub.com\u002FMariusBongarts\u002Fnew-tab-chrome-extension\u002Fblob\u002Fmain\u002Fsrc\u002Ffive-habit-tracker\u002Fmain.js\"\n    rel=\"noopener\"\n  >\n    here\n  \u003C\u002Fa>\n  .\n\u003C\u002Fp>\n\u003Cp>\n  I made some design adjustments to make it look better in front of a background image. Also, I needed to make it work\n  inside a shadow DOM, but that’s it.\n\u003C\u002Fp>\n\u003Cp>\n  The habit-tracker works out of the box and saves its state to the local storage (That’s why we needed the storage\n  permission inside our\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  file). Thank you for such a great tool Romina Martín!\n\u003C\u002Fp>\n\u003Ch3 id=\"background-image\">Background Image\u003C\u002Fh3>\n\u003Cp>\n  For a new-tab extension one thing must not be missing — an amazing background image. So, I found\n  \u003Ca href=\"https:\u002F\u002Fwww.pexels.com\u002Fde-de\u002Ffoto\u002Fschone-aussicht-auf-den-moranensee-2662116\u002F\" rel=\"noopener\">\n    this photo from Jaime Reimer\n  \u003C\u002Fa>\n  on Pexels.\n\u003C\u002Fp>\n\u003Cp>\n  To make it look good and to cover our whole page, I added some CSS to our\n  \u003Ccode>index.css\u003C\u002Fcode>\n  file:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist118967756\" 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-css\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-css  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"index.css content, created by MariusBongarts on 07:30AM on October 21, 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.css\">\n        \u003Ctr>\n          \u003Ctd id=\"file-index-css-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-css-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-ent>html\u003C\u002Fspan> {\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-css-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-css-LC2\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>background\u003C\u002Fspan>\u003Cspan class=pl-kos>:\u003C\u002Fspan> \u003Cspan class=pl-en>url\u003C\u002Fspan>(\u003Cspan class=pl-s>".\u002Fimages\u002Fpexels-jaime-reimer-2662116.jpeg"\u003C\u002Fspan>) no-repeat center\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-css-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-css-LC3\" class=\"blob-code blob-code-inner js-file-line\">    center fixed;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-css-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-css-LC4\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>background-size\u003C\u002Fspan>\u003Cspan class=pl-kos>:\u003C\u002Fspan> cover;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-css-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-css-LC5\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>background-blend-mode\u003C\u002Fspan>\u003Cspan class=pl-kos>:\u003C\u002Fspan> multiply;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-css-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-css-LC6\" class=\"blob-code blob-code-inner js-file-line\">}\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-css-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-css-LC7\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-ent>body\u003C\u002Fspan> {\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-css-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-css-LC8\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>font-family\u003C\u002Fspan>\u003Cspan class=pl-kos>:\u003C\u002Fspan> Catamaran;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-css-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-css-LC9\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>background\u003C\u002Fspan>\u003Cspan class=pl-kos>:\u003C\u002Fspan> \u003Cspan class=pl-en>rgba\u003C\u002Fspan>(\u003Cspan class=pl-c1>37\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-c1>33\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-c1>33\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-c1>0.143\u003C\u002Fspan>);\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-css-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-css-LC10\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>min-height\u003C\u002Fspan>\u003Cspan class=pl-kos>:\u003C\u002Fspan> \u003Cspan class=pl-c1>100\u003Cspan class=pl-smi>vh\u003C\u002Fspan>\u003C\u002Fspan>;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-css-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-css-LC11\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>min-width\u003C\u002Fspan>\u003Cspan class=pl-kos>:\u003C\u002Fspan> \u003Cspan class=pl-c1>100\u003Cspan class=pl-smi>vw\u003C\u002Fspan>\u003C\u002Fspan>;\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-css-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-css-LC12\" class=\"blob-code blob-code-inner js-file-line\">  \u002F\u002F ...\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-index-css-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-index-css-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\u002Fa06ed27824981be4f6da18cbd3aac596\u002Fraw\u002Fd9055cb4f227e71af75c32236bd7cc02136fb667\u002Findex.css\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fa06ed27824981be4f6da18cbd3aac596#file-index-css\" class=\"Link--inTextBlock\">\n          index.css\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  Noticeable is, that I also added some dark shadow layer to the\n  \u003Ccode>body\u003C\u002Fcode>\n  to provide better contrast between the background image and text on the page.\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. Creating a page for the New-Tab Window in\n  Chrome is just as easy. Once the very simple setup is done, we can build a normal website with HMTL, CSS, and\n  Javascript.\n\u003C\u002Fp>\n\u003Cp>\n  Being able to design your very own New-Tab Chrome page can be a lot of fun as you can let your creativity run wild.\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",1673,[45,81,97],{"id":46,"slug":47,"title":48,"description":49,"url":50,"publishedAt":51,"createdAt":52,"updatedAt":53,"featured":20,"readingTime":54,"tags":55,"imageUrl":59,"imageAlt":60,"faviconUrl":61,"publishedAtString":51,"category":62,"readTimeString":80},"688719cf8b4b770aa39407fc","my-simple-strategy-for-3-268-5-star-chrome-extension-reviews","My Simple Strategy for 3,268 5‑Star Chrome Extension Reviews","Get 37x more reviews than Grammarly with this simple strategy. Learn the Win-Ask Method to boost your Chrome extension ratings and user engagement.","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fmy-simple-strategy-for-3-268-5-star-chrome-extension-reviews\u002F","2025-07-28T06:48:26.000+00:00","2025-07-28T06:33:51.000+00:00","2025-07-28T07:04:33.000+00:00",6,[56,57,58,24],"Marketing","Side Projects","Side Hustle","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1633613286991-611fe299c4be?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDF8fHJhdGluZ3xlbnwwfHx8fDE3NTM2ODQ0MzR8MA&ixlib=rb-4.1.0&q=80&w=2000","Five yellow star-shaped objects placed diagonally on a pink and blue background.","https:\u002F\u002Fweb-highlights.com\u002Ffavicon.ico",[63,73],{"type":64,"title":65,"shortTitle":66,"icon":67,"description":68,"excerpt":69,"thumbnail":70},"my-journey","Behind the Scenes of Web Highlights","My Journey","rocket","Hey 👋 I am Marius. I started Web Highlights in 2019 as a tool just for myself and have been working on it alone since then. Learn from my mistakes and stories right from the beginning how I grew the Chrome Extension to 250K users without any marketing costs.","These posts are the honest build log of Web Highlights: what worked, what hurt, and what I’d do again. If you care about indie products, Chrome extensions, or SEO-led growth, you’ll find practical lessons alongside the personal story.",{"url":71,"alt":72},"https:\u002F\u002Fweb-highlights.com\u002Fimages\u002Fme.png","Me, Marius Bongarts, in front of sea in Portugal, Algarve",{"type":74,"title":75,"shortTitle":76,"icon":77,"description":78,"excerpt":79},"productivity","Browser Productivity & Chrome Extensions","Productivity","command","Curated extension lists, focus workflows, and tips for getting more from Chrome—always with an eye toward reading, capture, and learning.","Productivity isn’t only task managers. These articles cover the browser layer: extensions that protect focus, comparisons that save you from dead-end tools, and setup tips that keep your reading and capture stack lightweight but powerful.","6 min read",{"id":82,"slug":83,"title":84,"description":85,"url":86,"publishedAt":87,"createdAt":88,"updatedAt":87,"featured":20,"readingTime":54,"tags":89,"imageUrl":91,"imageAlt":92,"faviconUrl":61,"publishedAtString":87,"category":93,"readTimeString":80},"671f386db98706751d677b5f","how-to-show-a-link-preview-on-any-website","How To Show A Beautiful Link Preview On Any Website","Easily add link previews to any website using the open-source Previewbox library. Works with any framework, fetching Open Graph data automatically.","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fhow-to-show-a-link-preview-on-any-website\u002F","2024-10-29T20:25:55.000+00:00","2024-10-28T07:08:29.000+00:00",[30,90],"SEO","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fcontent\u002Fimages\u002F2024\u002F10\u002F0_dkKw8Q1T3dUhNBo7.jpg","Lake with mountains in background",[94,96],{"type":64,"title":65,"shortTitle":66,"icon":67,"description":68,"excerpt":69,"thumbnail":95},{"url":71,"alt":72},{"type":74,"title":75,"shortTitle":76,"icon":77,"description":78,"excerpt":79},{"id":98,"slug":99,"title":100,"description":101,"url":102,"publishedAt":103,"createdAt":104,"updatedAt":105,"featured":20,"readingTime":106,"tags":107,"imageUrl":109,"imageAlt":110,"faviconUrl":61,"publishedAtString":103,"category":111,"readTimeString":114},"66ed6878e07b961e2f231a8f","lessons-from-a-bamboo-tree-staying-motivated-on-my-side-project","Five Years to 100K Users: The Bamboo Tree Story for Side Project Growth","Discover how a bamboo tree can inspire solopreneurs to stay motivated on side projects. Learn the value of delayed gratification on the journey to success.","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Flessons-from-a-bamboo-tree-staying-motivated-on-my-side-project\u002F","2024-09-22T20:17:54.000+00:00","2024-09-20T12:20:08.000+00:00","2024-09-24T07:00:43.000+00:00",7,[66,108,57,58],"Story","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fcontent\u002Fimages\u002F2024\u002F09\u002F0_JjFAqJ78cyJMViqZ.webp","Tall Bamboo Tree",[112],{"type":64,"title":65,"shortTitle":66,"icon":67,"description":68,"excerpt":69,"thumbnail":113},{"url":71,"alt":72},"7 min read"]