{"id":5674,"date":"2024-02-02T12:21:03","date_gmt":"2024-02-02T05:21:03","guid":{"rendered":"https:\/\/danielepais.com\/journal\/?p=5674"},"modified":"2024-02-02T12:21:03","modified_gmt":"2024-02-02T05:21:03","slug":"make-your-own-pomodoro-timer-chrome-extension","status":"publish","type":"post","link":"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/","title":{"rendered":"How to Implement a Pomodoro Timer Chrome Extension with Actionable Notifications"},"content":{"rendered":"<p>Implementing a Pomodoro Timer Chrome Extension that <a href=\"https:\/\/danielepais.com\/journal\/work-on-pc-from-home\/\">work<\/a> straight out of the box.<\/p>\n<h2><img loading=\"lazy\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/ywAAAAAAQABAAACAUwAOw==\" fifu-lazy=\"1\" fifu-data-sizes=\"auto\" fifu-data-srcset=\"https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9JbXBsZW1lbnQtYS1Qb21vZG9yby1UaW1lci1DaHJvbWUtRXh0ZW5zaW9uLXdpdGgtQWN0aW9uYWJsZS1Ob3RpZmljYXRpb25zLmpwZw\/9dc086b32421\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=75&h=0&c=0 75w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9JbXBsZW1lbnQtYS1Qb21vZG9yby1UaW1lci1DaHJvbWUtRXh0ZW5zaW9uLXdpdGgtQWN0aW9uYWJsZS1Ob3RpZmljYXRpb25zLmpwZw\/12c829a03a48\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=100&h=0&c=0 100w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9JbXBsZW1lbnQtYS1Qb21vZG9yby1UaW1lci1DaHJvbWUtRXh0ZW5zaW9uLXdpdGgtQWN0aW9uYWJsZS1Ob3RpZmljYXRpb25zLmpwZw\/9b50773cae9e\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=150&h=0&c=0 150w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9JbXBsZW1lbnQtYS1Qb21vZG9yby1UaW1lci1DaHJvbWUtRXh0ZW5zaW9uLXdpdGgtQWN0aW9uYWJsZS1Ob3RpZmljYXRpb25zLmpwZw\/ef3a1f8f099a\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=240&h=0&c=0 240w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9JbXBsZW1lbnQtYS1Qb21vZG9yby1UaW1lci1DaHJvbWUtRXh0ZW5zaW9uLXdpdGgtQWN0aW9uYWJsZS1Ob3RpZmljYXRpb25zLmpwZw\/126029027088\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=320&h=0&c=0 320w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9JbXBsZW1lbnQtYS1Qb21vZG9yby1UaW1lci1DaHJvbWUtRXh0ZW5zaW9uLXdpdGgtQWN0aW9uYWJsZS1Ob3RpZmljYXRpb25zLmpwZw\/127155787c7c\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=500&h=0&c=0 500w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9JbXBsZW1lbnQtYS1Qb21vZG9yby1UaW1lci1DaHJvbWUtRXh0ZW5zaW9uLXdpdGgtQWN0aW9uYWJsZS1Ob3RpZmljYXRpb25zLmpwZw\/0457b8e9a6f9\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=640&h=0&c=0 640w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9JbXBsZW1lbnQtYS1Qb21vZG9yby1UaW1lci1DaHJvbWUtRXh0ZW5zaW9uLXdpdGgtQWN0aW9uYWJsZS1Ob3RpZmljYXRpb25zLmpwZw\/aa8c8c7dde73\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=800&h=0&c=0 800w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9JbXBsZW1lbnQtYS1Qb21vZG9yby1UaW1lci1DaHJvbWUtRXh0ZW5zaW9uLXdpdGgtQWN0aW9uYWJsZS1Ob3RpZmljYXRpb25zLmpwZw\/63e867548456\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=1024&h=0&c=0 1024w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9JbXBsZW1lbnQtYS1Qb21vZG9yby1UaW1lci1DaHJvbWUtRXh0ZW5zaW9uLXdpdGgtQWN0aW9uYWJsZS1Ob3RpZmljYXRpb25zLmpwZw\/45a0492909e0\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=1280&h=0&c=0 1280w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9JbXBsZW1lbnQtYS1Qb21vZG9yby1UaW1lci1DaHJvbWUtRXh0ZW5zaW9uLXdpdGgtQWN0aW9uYWJsZS1Ob3RpZmljYXRpb25zLmpwZw\/7822afa1626b\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=1600&h=0&c=0 1600w\" class=\"aligncenter wp-image-5680 size-full\" title=\"Implement a Pomodoro Timer Chrome Extension with Actionable Notifications\" fifu-data-src=\"https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9JbXBsZW1lbnQtYS1Qb21vZG9yby1UaW1lci1DaHJvbWUtRXh0ZW5zaW9uLXdpdGgtQWN0aW9uYWJsZS1Ob3RpZmljYXRpb25zLmpwZw\/b72629d033cc\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674\" alt=\"Implement a Pomodoro Timer Chrome Extension with Actionable Notifications\" width=\"850\" height=\"400\" \/><\/h2>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6ac7fc4c99621\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #18bc9c;color:#18bc9c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #18bc9c;color:#18bc9c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6ac7fc4c99621\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#Overview\" >Overview<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#What_is_Pomodoro\" >What is Pomodoro<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#Make_your_own_Pomodoro_Timer_Chrome_Extension\" >Make your own Pomodoro Timer Chrome Extension<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#Creating_a_Basic_Chrome_Extension_for_a_Pomodoro_Timer\" >Creating a Basic Chrome Extension for a Pomodoro Timer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#Prerequisites\" >Prerequisites<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#Step_1_Set_Up_Your_Project\" >Step 1: Set Up Your Project<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#Step_2_Prepare_the_Manifest_File\" >Step 2: Prepare the Manifest File<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#Step_3_Create_the_Popup\" >Step 3: Create the Popup<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#popuphtml\" >popup.html<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#popupjs\" >popup.js<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#Step_4_Implement_the_Background_Script\" >Step 4: Implement the Background Script<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#Step_5_Add_Styling_with_CSS\" >Step 5:\u00a0Add Styling with CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#Step_6_Create_Your_Images\" >Step 6:\u00a0Create Your Images<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#Image_Sizes\" >Image Sizes:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#Step_7_Load_Your_Extension_into_Chrome\" >Step 7: Load Your Extension into Chrome<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#Make_your_own_Pomodoro_Timer_Chrome_Extension_Conclusion\" >Make your own Pomodoro Timer Chrome Extension: Conclusion<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#Important_Note_for_Developers\" >Important Note for Developers:<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#Adjusting_the_Timer_for_Testing\" >Adjusting the Timer for Testing:<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#How_You_Could_Improve_the_Timer\" >How You Could Improve the Timer<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Overview\"><\/span>Overview<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>This tutorial will guide you through creating a simple yet effective Pomodoro Timer as a Chrome Extension. The timer will notify you when it&#8217;s time to take a break, and the notification will include options to start the break or skip it.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"What_is_Pomodoro\"><\/span>What is Pomodoro<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>It&#8217;s a time management method developed by Francesco Cirillo in the late 1980s. The technique uses a timer to break work into intervals, traditionally 25 minutes in length, separated by short breaks. These intervals are known as &#8220;pomodoros,&#8221; named after the Italian word for tomato, inspired by the tomato-shaped kitchen timer Cirillo used as a university student.<\/p>\n<p>Here&#8217;s a simplified overview of how the Pomodoro Technique works:<\/p>\n<ol>\n<li><strong>Choose a Task:<\/strong> Select the task you want to work on.<\/li>\n<li><strong>Set the Pomodoro Timer:<\/strong> Set the timer for 25 minutes.<\/li>\n<li><strong>Work on the Task:<\/strong> Work on the task until the timer rings; then put a checkmark on a piece of paper.<\/li>\n<li><strong>Take a Short Break:<\/strong> Take a short break (5 minutes is a good starting point).<\/li>\n<li><strong>Every Four Pomodoros:<\/strong> After four pomodoros, take a longer break (15-30 minutes).<\/li>\n<\/ol>\n<p>This technique is designed to improve focus and concentration by breaking down work into short, manageable intervals, while also providing regular breaks to refresh the mind.<\/p>\n<div align=\"center\">\n<div style=\"width: 1242px;\" class=\"wp-video\"><!--[if lt IE 9]><script>document.createElement('video');<\/script><![endif]-->\n<video class=\"wp-video-shortcode\" id=\"video-5674-1\" width=\"1242\" height=\"666\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/webm\" src=\"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2024\/02\/How-to-Implement-a-Pomodoro-Timer-Chrome-Extension-with-Actionable-Notifications.webm?_=1\" \/><a href=\"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2024\/02\/How-to-Implement-a-Pomodoro-Timer-Chrome-Extension-with-Actionable-Notifications.webm\">https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2024\/02\/How-to-Implement-a-Pomodoro-Timer-Chrome-Extension-with-Actionable-Notifications.webm<\/a><\/video><\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"Make_your_own_Pomodoro_Timer_Chrome_Extension\"><\/span>Make your own Pomodoro Timer Chrome Extension<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Creating_a_Basic_Chrome_Extension_for_a_Pomodoro_Timer\"><\/span><em><span style=\"font-size: 20px;\">Creating a Basic Chrome Extension for a Pomodoro Timer<\/span><\/em><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Creating a basic Chrome extension for a Pomodoro timer involves several steps. Below is an overview of how you can create such an extension, including the basic <a href=\"https:\/\/danielepais.com\/journal\/encrypt-files-on-linux-using-veracrypt\/\">files<\/a> you need and some example code for each.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Prerequisites\"><\/span>Prerequisites<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>Basic understanding of HTML, CSS, and JavaScript<\/li>\n<li>Chrome Browser installed<\/li>\n<li>Text Editor (e.g., <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener\" data-cke-saved-href=\"https:\/\/code.visualstudio.com\/\">VS Code<\/a>, <a href=\"https:\/\/www.sublimetext.com\/\" target=\"_blank\" rel=\"noopener\" data-cke-saved-href=\"https:\/\/www.sublimetext.com\/\">Sublime Text<\/a>, or any editor of your choice)<\/li>\n<li>Basic knowledge of how Chrome Extensions work<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Step_1_Set_Up_Your_Project\"><\/span>Step 1: Set Up Your Project<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li><strong>Create a New Folder<\/strong> for your project (e.g., <code>PomodoroTimerExtension<\/code>).<\/li>\n<li>Inside this folder, create the following files and sub-folders:\n<ul>\n<li><code>manifest.json<\/code><\/li>\n<li><code>background.js<\/code><\/li>\n<li><code>popup.html<\/code><\/li>\n<li><code>popup.js<\/code><\/li>\n<li>A sub-folder named <code>images<\/code> for icons and other images.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Step_2_Prepare_the_Manifest_File\"><\/span>Step 2: Prepare the Manifest File<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>First, you&#8217;ll need a <code>manifest.json<\/code> file, which tells Chrome everything it needs to know about your extension\u2014its name, version, permissions it needs, and the files it uses.<\/p>\n<p><code>{<br \/>\n\u00a0 \"manifest_version\": 3,<br \/>\n\u00a0 \"name\": \"Pomodoro Timer\",<br \/>\n\u00a0 \"version\": \"1.0\",<br \/>\n\u00a0 \"description\": \"A simple Pomodoro timer to help you manage your work and break times.\",<br \/>\n\u00a0 \"permissions\": [\"alarms\", \"notifications\"],<br \/>\n\u00a0 \"action\": {<br \/>\n\u00a0 \u00a0 \"default_popup\": \"popup.html\",<br \/>\n\u00a0 \u00a0 \"default_icon\": {<br \/>\n\u00a0 \u00a0 \u00a0 \"16\": \"images\/tomato16.png\",<br \/>\n\u00a0 \u00a0 \u00a0 \"48\": \"images\/tomato48.png\",<br \/>\n\u00a0 \u00a0 \u00a0 \"128\": \"images\/tomato128.png\"<br \/>\n\u00a0 \u00a0 }<br \/>\n\u00a0 },<br \/>\n\u00a0 \"background\": {<br \/>\n\u00a0 \u00a0 \"service_worker\": \"background.js\"<br \/>\n\u00a0 },<br \/>\n\u00a0 \"icons\": {<br \/>\n\u00a0 \u00a0 \"16\": \"images\/tomato16.png\",<br \/>\n\u00a0 \u00a0 \"48\": \"images\/tomato48.png\",<br \/>\n\u00a0 \u00a0 \"128\": \"images\/tomato128.png\"<br \/>\n\u00a0 }<br \/>\n}<\/code><\/p>\n<ul>\n<li>Ensure you have icons at the specified paths.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Step_3_Create_the_Popup\"><\/span>Step 3: Create the Popup<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The <code>popup.html<\/code> and <code>popup.js<\/code> files define the UI and functionality of the popup that appears when you click the extension icon.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"popuphtml\"><\/span>popup.html<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><code>&lt;!DOCTYPE html&gt;<br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n\u00a0 \u00a0 &lt;title&gt;Pomodoro Timer&lt;\/title&gt;<br \/>\n\u00a0 \u00a0 &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"popup.css\"&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<\/code><\/p>\n<p><code>\u00a0 \u00a0 &lt;div id=\"timer\"&gt;25:00&lt;\/div&gt;<br \/>\n\u00a0 \u00a0 &lt;button id=\"start\"&gt;Start&lt;\/button&gt;<br \/>\n\u00a0\u00a0 \u00a0 &lt;button id=\"stop\"&gt;Stop&lt;\/button&gt;<br \/>\n\u00a0 \u00a0 &lt;button id=\"reset\" disabled&gt;Reset&lt;\/button&gt;<\/code><\/p>\n<p><code>\u00a0 \u00a0 &lt;script src=\"popup.js\"&gt;&lt;\/script&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<\/code><\/p>\n<h4><span class=\"ez-toc-section\" id=\"popupjs\"><\/span>popup.js<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><code>document.getElementById('start').addEventListener('click', () =&gt; {<br \/>\n\u00a0 \u00a0 chrome.runtime.sendMessage({ command: 'start' });<br \/>\n\u00a0 \u00a0 document.getElementById('reset').disabled = false; \/\/ Enable the \"Reset\" button<br \/>\n});<\/code><\/p>\n<p><code>document.getElementById('stop').addEventListener('click', () =&gt; {<br \/>\n\u00a0 \u00a0 chrome.runtime.sendMessage({ command: 'stop' });<br \/>\n\u00a0 \u00a0 \/\/ Optionally decide if the \"Reset\" button should be enabled or disabled here<br \/>\n});<\/code><\/p>\n<p><code>document.getElementById('reset').addEventListener('click', () =&gt; {<br \/>\n\u00a0 \u00a0 chrome.runtime.sendMessage({ command: 'reset' });<br \/>\n});<\/code><\/p>\n<p>\n<code>\/\/ Listener for messages from the background script to update the timer display<br \/>\nchrome.runtime.onMessage.addListener((message, sender, sendResponse) =&gt; {<br \/>\n\u00a0 \u00a0 if (message.timer) {<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 document.getElementById('timer').textContent = message.timer;<br \/>\n\u00a0 \u00a0 }<br \/>\n});<\/code><\/p>\n<p style=\"text-align: center;\"><strong>READ ALSO: <a href=\"https:\/\/danielepais.com\/journal\/5-minutes-tutorial-making-a-word-count-google-chrome-extension\/\" target=\"_blank\" rel=\"noopener\">5 Minutes Tutorial: Making a Word Count Google Chrome Extension<\/a><\/strong><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_4_Implement_the_Background_Script\"><\/span>Step 4: Implement the Background Script<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The <code>background.js<\/code> script manages the timer and creates notifications.<\/p>\n<p><code>let countdown;<br \/>\nlet time = 25 * 60; \/\/ Initial timer set for 25 minutes<\/code><\/p>\n<p><code>chrome.runtime.onMessage.addListener((message, sender, sendResponse) =&gt; {<br \/>\n\u00a0 \u00a0 if (message.command === 'start') {<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 startTimer();<br \/>\n\u00a0 \u00a0 } else if (message.command === 'reset') {<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 resetTimer();<br \/>\n\u00a0 \u00a0 }<br \/>\n});<\/code><\/p>\n<p><code>function startTimer() {<br \/>\n\u00a0 \u00a0 if (time === 25 * 60 || countdown === undefined) { \/\/ Start a new timer if it's reset or not set<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 clearInterval(countdown); \/\/ Clear any existing intervals<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 countdown = setInterval(() =&gt; {<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (time &gt; 0) {<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 time--;<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 updatePopup();<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 } else {<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 completeTimer(); \/\/ Handle the completion of the timer<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 }, 1000);<br \/>\n\u00a0 \u00a0 } else { \/\/ Resume the existing timer<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 countdown = setInterval(() =&gt; {<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (time &gt; 0) {<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 time--;<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 updatePopup();<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 } else {<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 completeTimer(); \/\/ Handle the completion of the timer<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 }, 1000);<br \/>\n\u00a0 \u00a0 }<br \/>\n}<\/code><\/p>\n<p><code>chrome.runtime.onMessage.addListener((message, sender, sendResponse) =&gt; {<br \/>\n\u00a0 \u00a0 \/\/ Existing message handling for 'start' and 'reset'<\/code><\/p>\n<p><code>\u00a0 \u00a0 if (message.command === 'stop') {<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 stopTimer(); \/\/ Implement this function to pause the timer<br \/>\n\u00a0 \u00a0 }<br \/>\n});<\/code><\/p>\n<p><code>function stopTimer() {<br \/>\n\u00a0 \u00a0 clearInterval(countdown);<br \/>\n\u00a0 \u00a0 \/\/ Do not reset the time variable here to allow the timer to resume from where it was paused<br \/>\n}<\/code><\/p>\n<p><code>function resetTimer() {<br \/>\n\u00a0 \u00a0 clearInterval(countdown);<br \/>\n\u00a0 \u00a0 time = 25 * 60; \/\/ Reset the timer to 25 minutes<br \/>\n\u00a0 \u00a0 isRunning = false; \/\/ Ensure to mark the timer as not running<br \/>\n\u00a0 \u00a0 updatePopup(); \/\/ Update the popup with the new time<br \/>\n}<\/code><\/p>\n<p>\n<code>function completeTimer() {<br \/>\n\u00a0 \u00a0 clearInterval(countdown); \/\/ Stop the countdown<br \/>\n\u00a0 \u00a0 \/\/ Reset the time for the next session but don't start counting down automatically<br \/>\n\u00a0 \u00a0 time = 25 * 60;<br \/>\n\u00a0 \u00a0 updatePopup(); \/\/ Update the popup with the reset time<br \/>\n\u00a0\u00a0 \u00a0\u00a0<\/code><\/p>\n<p><code>\u00a0 \u00a0 \/\/ Trigger the notification<br \/>\n\u00a0 \u00a0 chrome.notifications.create({<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 type: 'image',<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 iconUrl: 'images\/tomato128.png',<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 title: 'Time is up!',<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 message: 'Take a break, your 25-minute session is complete.',<br \/>\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 \u00a0imageUrl: 'images\/stop.jpg',<br \/>\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 \u00a0requireInteraction: true, \/\/ The notification will stay until the user interacts with it<br \/>\n\u00a0 \u00a0 buttons: [<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 {title: \"Start Break\"},<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 {title: \"Skip Break\"}<br \/>\n\u00a0 \u00a0 ],<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 priority: 2<br \/>\n\u00a0 \u00a0 });<br \/>\n}<\/code><\/p>\n<p><code>function updatePopup() {<br \/>\n\u00a0 \u00a0 let minutes = Math.floor(time \/ 60);<br \/>\n\u00a0 \u00a0 let seconds = time % 60;<br \/>\n\u00a0 \u00a0 minutes = minutes &lt; 10 ? '0' + minutes : minutes;<br \/>\n\u00a0 \u00a0 seconds = seconds &lt; 10 ? '0' + seconds : seconds;<\/code><\/p>\n<p><code>\u00a0 \u00a0 chrome.runtime.sendMessage({ timer: `${minutes}:${seconds}` });<br \/>\n}<\/code><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_5_Add_Styling_with_CSS\"><\/span>Step 5:\u00a0Add Styling with CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The <code>popup.css<\/code> file will add some basic styling to your popup.<\/p>\n<p><code>body {<br \/>\n\u00a0 \u00a0 width: 200px;<br \/>\n\u00a0 \u00a0 padding: 10px;<br \/>\n\u00a0 \u00a0 text-align: center;<br \/>\n}<\/code><\/p>\n<p><code>#timer {<br \/>\n\u00a0 \u00a0 font-size: 2em;<br \/>\n\u00a0 \u00a0 margin-bottom: 20px;<br \/>\n}<\/code><\/p>\n<p><code>button {<br \/>\n\u00a0 \u00a0 margin: 5px;<br \/>\n}<\/code><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_6_Create_Your_Images\"><\/span>Step 6:\u00a0Create Your Images<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>You will need to create or find some tomato images to use as icons (<code>tomato16.png<\/code>, <code>tomato48.png<\/code>, <code>tomato128.png<\/code>, stop.jpg) and place them in an <code>images<\/code> folder.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Image_Sizes\"><\/span>Image Sizes:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li><code>tomato16.png (16px w x 16px h)<\/code><\/li>\n<li><code>tomato48.png\u00a0(48px w x 48px h)<\/code><\/li>\n<li><code>tomato128.png\u00a0(128px w x 128px h)<\/code><\/li>\n<li>stop.jpg\u00a0<code>(512px w x 512px h)<\/code><\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Step_7_Load_Your_Extension_into_Chrome\"><\/span>Step 7: Load Your Extension into Chrome<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>Open Chrome and navigate to <code>chrome:\/\/extensions\/<\/code>.<\/li>\n<li>Enable &#8220;Developer mode&#8221; at the top right.<\/li>\n<li>Click &#8220;Load unpacked&#8221; and select your project folder.<\/li>\n<\/ol>\n<p>Now, you should see the Pomodoro Timer extension icon in your browser. Clicking it will open the popup with the start, stop and reset buttons. Starting the timer will count down from 25 minutes, showing the remaining time in the popup. When the timer ends, a notification will appear.<\/p>\n<figure id=\"attachment_5678\" aria-describedby=\"caption-attachment-5678\" style=\"width: 1243px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2024\/02\/Pomodoro-Timer-Chrome-Extension-with-Actionable-Notifications.jpg\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/ywAAAAAAQABAAACAUwAOw==\" fifu-lazy=\"1\" fifu-data-sizes=\"auto\" fifu-data-srcset=\"https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9Qb21vZG9yby1UaW1lci1DaHJvbWUtRXh0ZW5zaW9uLXdpdGgtQWN0aW9uYWJsZS1Ob3RpZmljYXRpb25zLmpwZw\/fbd824c6d3b2\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=75&h=0&c=0 75w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9Qb21vZG9yby1UaW1lci1DaHJvbWUtRXh0ZW5zaW9uLXdpdGgtQWN0aW9uYWJsZS1Ob3RpZmljYXRpb25zLmpwZw\/392411b55d47\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=100&h=0&c=0 100w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9Qb21vZG9yby1UaW1lci1DaHJvbWUtRXh0ZW5zaW9uLXdpdGgtQWN0aW9uYWJsZS1Ob3RpZmljYXRpb25zLmpwZw\/373ef10cb9c3\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=150&h=0&c=0 150w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9Qb21vZG9yby1UaW1lci1DaHJvbWUtRXh0ZW5zaW9uLXdpdGgtQWN0aW9uYWJsZS1Ob3RpZmljYXRpb25zLmpwZw\/10abf621c6a1\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=240&h=0&c=0 240w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9Qb21vZG9yby1UaW1lci1DaHJvbWUtRXh0ZW5zaW9uLXdpdGgtQWN0aW9uYWJsZS1Ob3RpZmljYXRpb25zLmpwZw\/f15cf531e635\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=320&h=0&c=0 320w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9Qb21vZG9yby1UaW1lci1DaHJvbWUtRXh0ZW5zaW9uLXdpdGgtQWN0aW9uYWJsZS1Ob3RpZmljYXRpb25zLmpwZw\/92e8ef7868ff\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=500&h=0&c=0 500w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9Qb21vZG9yby1UaW1lci1DaHJvbWUtRXh0ZW5zaW9uLXdpdGgtQWN0aW9uYWJsZS1Ob3RpZmljYXRpb25zLmpwZw\/38f3bc76c134\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=640&h=0&c=0 640w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9Qb21vZG9yby1UaW1lci1DaHJvbWUtRXh0ZW5zaW9uLXdpdGgtQWN0aW9uYWJsZS1Ob3RpZmljYXRpb25zLmpwZw\/dcc134bb37c0\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=800&h=0&c=0 800w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9Qb21vZG9yby1UaW1lci1DaHJvbWUtRXh0ZW5zaW9uLXdpdGgtQWN0aW9uYWJsZS1Ob3RpZmljYXRpb25zLmpwZw\/61e6623442af\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=1024&h=0&c=0 1024w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9Qb21vZG9yby1UaW1lci1DaHJvbWUtRXh0ZW5zaW9uLXdpdGgtQWN0aW9uYWJsZS1Ob3RpZmljYXRpb25zLmpwZw\/7db32e45d569\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=1280&h=0&c=0 1280w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9Qb21vZG9yby1UaW1lci1DaHJvbWUtRXh0ZW5zaW9uLXdpdGgtQWN0aW9uYWJsZS1Ob3RpZmljYXRpb25zLmpwZw\/e0759c3845f6\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=1600&h=0&c=0 1600w\" class=\"wp-image-5678 size-full\" title=\"\" fifu-data-src=\"https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9Qb21vZG9yby1UaW1lci1DaHJvbWUtRXh0ZW5zaW9uLXdpdGgtQWN0aW9uYWJsZS1Ob3RpZmljYXRpb25zLmpwZw\/21559a9d0f35\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674\" alt=\"Pomodoro Timer Chrome Extension with Actionable Notifications\" width=\"1243\" height=\"667\" \/><\/a><figcaption id=\"caption-attachment-5678\" class=\"wp-caption-text\">SUCCESSFULLY IMPLEMENTED THE CHROME EXTENSION<\/figcaption><\/figure>\n<h3><span class=\"ez-toc-section\" id=\"Make_your_own_Pomodoro_Timer_Chrome_Extension_Conclusion\"><\/span>Make your own Pomodoro Timer Chrome Extension: Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Congratulations! You&#8217;ve just created a Pomodoro<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Important_Note_for_Developers\"><\/span>Important Note for Developers:<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When developing and testing your Pomodoro Timer Chrome Extension, it&#8217;s highly recommended to adjust the timer duration to a shorter period, such as 10 seconds, instead of the standard 25 minutes. This adjustment allows for quicker testing cycles, enabling you to verify the functionality of your timer and notifications without the long wait.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Adjusting_the_Timer_for_Testing\"><\/span>Adjusting the Timer for Testing:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>In your <code>background.js<\/code> file, locate the line where the timer duration is set:<\/p>\n<p><code>let time = 25 * 60; \/\/ 25 minutes<\/code><\/p>\n<p>There are in total 4 instance of time duration that you&#8217;ll need to change.<\/p>\n<p><code>let time = 10; \/\/ 10 seconds for testing<\/code><\/p>\n<p>Remember to revert this change to the standard duration (e.g., 25 minutes) once you&#8217;ve completed your testing and before publishing or <a href=\"https:\/\/danielepais.com\/journal\/sharing-a-network-with-linux-and-windows-using-samba\/\">sharing<\/a> your extension.<\/p>\n<p>This practice ensures efficient development and testing, allowing you to focus on improving and refining your extension&#8217;s features without unnecessary delays.<\/p>\n<figure id=\"attachment_5679\" aria-describedby=\"caption-attachment-5679\" style=\"width: 1188px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2024\/02\/actionable-notification.jpg\" data-rel=\"lightbox-image-1\" data-rl_title=\"\" data-rl_caption=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/ywAAAAAAQABAAACAUwAOw==\" fifu-lazy=\"1\" fifu-data-sizes=\"auto\" fifu-data-srcset=\"https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9hY3Rpb25hYmxlLW5vdGlmaWNhdGlvbi5qcGc\/bca3e1210c91\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=75&h=0&c=0 75w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9hY3Rpb25hYmxlLW5vdGlmaWNhdGlvbi5qcGc\/5f2d1b3d942c\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=100&h=0&c=0 100w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9hY3Rpb25hYmxlLW5vdGlmaWNhdGlvbi5qcGc\/482fd53673a3\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=150&h=0&c=0 150w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9hY3Rpb25hYmxlLW5vdGlmaWNhdGlvbi5qcGc\/e507f8aa8777\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=240&h=0&c=0 240w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9hY3Rpb25hYmxlLW5vdGlmaWNhdGlvbi5qcGc\/b9426d16c4fa\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=320&h=0&c=0 320w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9hY3Rpb25hYmxlLW5vdGlmaWNhdGlvbi5qcGc\/d8c96e6b3c0a\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=500&h=0&c=0 500w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9hY3Rpb25hYmxlLW5vdGlmaWNhdGlvbi5qcGc\/f1ca2b929f07\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=640&h=0&c=0 640w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9hY3Rpb25hYmxlLW5vdGlmaWNhdGlvbi5qcGc\/1a37a87bd6d9\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=800&h=0&c=0 800w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9hY3Rpb25hYmxlLW5vdGlmaWNhdGlvbi5qcGc\/c6d96dabc7d3\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=1024&h=0&c=0 1024w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9hY3Rpb25hYmxlLW5vdGlmaWNhdGlvbi5qcGc\/ab5630bc8d38\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=1280&h=0&c=0 1280w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9hY3Rpb25hYmxlLW5vdGlmaWNhdGlvbi5qcGc\/108ea5420abf\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674&w=1600&h=0&c=0 1600w\" class=\"size-full wp-image-5679\" title=\"\" fifu-data-src=\"https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNC8wMi9hY3Rpb25hYmxlLW5vdGlmaWNhdGlvbi5qcGc\/757ed2810554\/implement-a-pomodoro-timer-chrome-extension-with-actionable-notifications.webp?p=5674\" alt=\"actionable notification\" width=\"1188\" height=\"771\" \/><\/a><figcaption id=\"caption-attachment-5679\" class=\"wp-caption-text\">ACTIONABLE NOTIFICATIONS<\/figcaption><\/figure>\n<h2><span class=\"ez-toc-section\" id=\"How_You_Could_Improve_the_Timer\"><\/span>How You Could Improve the Timer<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>If you plan to continue developing or refining this extension, here are a few additional features or improvements you might want to consider:<\/p>\n<ol>\n<li><strong>Customizable Timer Durations<\/strong>: Allow users to set their preferred focus and break durations through the extension&#8217;s popup or options page.<\/li>\n<li><strong>Long Breaks<\/strong>: Implement the traditional Pomodoro technique feature of taking a longer break after a set number of focus periods.<\/li>\n<li><strong>Audio Alerts<\/strong>: Add optional audio notifications for when the timer starts, pauses, or completes, in addition to the visual notification.<\/li>\n<li><strong>Task Integration<\/strong>: Allow users to input and select tasks they are working on during each Pomodoro session, helping with productivity tracking.<\/li>\n<li><strong>Statistics<\/strong>: Offer insights into how many Pomodoro sessions a user has completed over time, average focus time, breaks taken, etc., to help users monitor and improve their productivity patterns.<\/li>\n<\/ol>\n<div class=\"boxlink\">Read also: <a title=\"Build Your Own Note-Taking Chrome Extension: A Step-by-Step Guide\" href=\"https:\/\/danielepais.com\/journal\/build-your-own-note-taking-chrome-extension-a-step-by-step-guide\/\" target=\"_blank\" rel=\"noopener\" data-wpel-link=\"internal\">Build Your Own Note-Taking Chrome Extension: A Step-by-Step Guide<\/a><\/div>\n<div class=\"boxlink\">GET YOUR <a href=\"https:\/\/danielepais.com\/journal\/free-to-download-recipe-template-scalable-vector-for-illustrator-or-inkscape\/\">FREE<\/a> COPY: <a title=\"Download the FREE Pomodoro Timer Chrome Extension\" href=\"https:\/\/danielepais.com\/journal\/free-downloads\" target=\"_blank\" rel=\"noopener\" data-wpel-link=\"internal\">FREE Pomodoro Timer Chrome Extension<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Make your own Pomodoro Timer Chrome Extension with actionable notifications that work straight out of the box.<\/p>\n","protected":false},"author":1,"featured_media":5680,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[225,461,562,561],"tags":[1226,1247],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.8 - aioseo.com -->\n\t<meta name=\"description\" content=\"Make your own Pomodoro Timer Chrome Extension with actionable notifications that work straight out of the box.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Daniele Pais\"\/>\n\t<meta name=\"google-site-verification\" content=\"googleb91c9505ed997b99\" \/>\n\t<meta name=\"msvalidate.01\" content=\"AD1C96C338E051848BE08C67378B20CA\" \/>\n\t<meta name=\"keywords\" content=\"google chrome extension,pomodoro timer,design,web,web design,web development\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.8\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Daniele Pais Blog\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"How to Implement a Pomodoro Timer Chrome Extension with Actionable Notifications | Phuket Web Design\" \/>\n\t\t<meta property=\"og:description\" content=\"Make your own Pomodoro Timer Chrome Extension with actionable notifications that work straight out of the box.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2024\/02\/Implement-a-Pomodoro-Timer-Chrome-Extension-with-Actionable-Notifications.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2024\/02\/Implement-a-Pomodoro-Timer-Chrome-Extension-with-Actionable-Notifications.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2024-02-02T05:21:03+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2024-02-02T05:21:03+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@daniele_pais\" \/>\n\t\t<meta name=\"twitter:title\" content=\"How to Implement a Pomodoro Timer Chrome Extension with Actionable Notifications | Phuket Web Design\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Make your own Pomodoro Timer Chrome Extension with actionable notifications that work straight out of the box.\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2024\/02\/Implement-a-Pomodoro-Timer-Chrome-Extension-with-Actionable-Notifications.jpg\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/make-your-own-pomodoro-timer-chrome-extension\\\/#article\",\"name\":\"How to Implement a Pomodoro Timer Chrome Extension with Actionable Notifications | Phuket Web Design\",\"headline\":\"How to Implement a Pomodoro Timer Chrome Extension with Actionable Notifications\",\"author\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/author\\\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/Implement-a-Pomodoro-Timer-Chrome-Extension-with-Actionable-Notifications.jpg\",\"width\":850,\"height\":400,\"caption\":\"Implement a Pomodoro Timer Chrome Extension with Actionable Notifications\"},\"datePublished\":\"2024-02-02T12:21:03+07:00\",\"dateModified\":\"2024-02-02T12:21:03+07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/make-your-own-pomodoro-timer-chrome-extension\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/make-your-own-pomodoro-timer-chrome-extension\\\/#webpage\"},\"articleSection\":\"Design, Web, Web Design, Web Development, Google Chrome Extension, pomodoro timer\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/make-your-own-pomodoro-timer-chrome-extension\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/danielepais.com\\\/journal\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/#listItem\",\"name\":\"Web\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/#listItem\",\"position\":2,\"name\":\"Web\",\"item\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/web-development\\\/#listItem\",\"name\":\"Web Development\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/web-development\\\/#listItem\",\"position\":3,\"name\":\"Web Development\",\"item\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/web-development\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/make-your-own-pomodoro-timer-chrome-extension\\\/#listItem\",\"name\":\"How to Implement a Pomodoro Timer Chrome Extension with Actionable Notifications\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/#listItem\",\"name\":\"Web\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/make-your-own-pomodoro-timer-chrome-extension\\\/#listItem\",\"position\":4,\"name\":\"How to Implement a Pomodoro Timer Chrome Extension with Actionable Notifications\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/web-development\\\/#listItem\",\"name\":\"Web Development\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/#person\",\"name\":\"Daniele Pais\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/make-your-own-pomodoro-timer-chrome-extension\\\/#personImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/86bedf0ab24a6d4a4f32de230cc797ef?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Daniele Pais\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/author\\\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\\\/#author\",\"url\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/author\\\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\\\/\",\"name\":\"Daniele Pais\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/make-your-own-pomodoro-timer-chrome-extension\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/86bedf0ab24a6d4a4f32de230cc797ef?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Daniele Pais\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/make-your-own-pomodoro-timer-chrome-extension\\\/#webpage\",\"url\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/make-your-own-pomodoro-timer-chrome-extension\\\/\",\"name\":\"How to Implement a Pomodoro Timer Chrome Extension with Actionable Notifications | Phuket Web Design\",\"description\":\"Make your own Pomodoro Timer Chrome Extension with actionable notifications that work straight out of the box.\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/make-your-own-pomodoro-timer-chrome-extension\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/author\\\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/author\\\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/Implement-a-Pomodoro-Timer-Chrome-Extension-with-Actionable-Notifications.jpg\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/make-your-own-pomodoro-timer-chrome-extension\\\/#mainImage\",\"width\":850,\"height\":400,\"caption\":\"Implement a Pomodoro Timer Chrome Extension with Actionable Notifications\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/make-your-own-pomodoro-timer-chrome-extension\\\/#mainImage\"},\"datePublished\":\"2024-02-02T12:21:03+07:00\",\"dateModified\":\"2024-02-02T12:21:03+07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/#website\",\"url\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/\",\"name\":\"Phuket Web Design\",\"description\":\"Digital Print\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"How to Implement a Pomodoro Timer Chrome Extension with Actionable Notifications | Phuket Web Design","description":"Make your own Pomodoro Timer Chrome Extension with actionable notifications that work straight out of the box.","canonical_url":"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/","robots":"max-image-preview:large","keywords":"google chrome extension,pomodoro timer,design,web,web design,web development","webmasterTools":{"google-site-verification":"googleb91c9505ed997b99","msvalidate.01":"AD1C96C338E051848BE08C67378B20CA","miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#article","name":"How to Implement a Pomodoro Timer Chrome Extension with Actionable Notifications | Phuket Web Design","headline":"How to Implement a Pomodoro Timer Chrome Extension with Actionable Notifications","author":{"@id":"https:\/\/danielepais.com\/journal\/author\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\/#author"},"publisher":{"@id":"https:\/\/danielepais.com\/journal\/#person"},"image":{"@type":"ImageObject","url":"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2024\/02\/Implement-a-Pomodoro-Timer-Chrome-Extension-with-Actionable-Notifications.jpg","width":850,"height":400,"caption":"Implement a Pomodoro Timer Chrome Extension with Actionable Notifications"},"datePublished":"2024-02-02T12:21:03+07:00","dateModified":"2024-02-02T12:21:03+07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#webpage"},"isPartOf":{"@id":"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#webpage"},"articleSection":"Design, Web, Web Design, Web Development, Google Chrome Extension, pomodoro timer"},{"@type":"BreadcrumbList","@id":"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal#listItem","position":1,"name":"Home","item":"https:\/\/danielepais.com\/journal","nextItem":{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/category\/web\/#listItem","name":"Web"}},{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/category\/web\/#listItem","position":2,"name":"Web","item":"https:\/\/danielepais.com\/journal\/category\/web\/","nextItem":{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/category\/web\/web-development\/#listItem","name":"Web Development"},"previousItem":{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/category\/web\/web-development\/#listItem","position":3,"name":"Web Development","item":"https:\/\/danielepais.com\/journal\/category\/web\/web-development\/","nextItem":{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#listItem","name":"How to Implement a Pomodoro Timer Chrome Extension with Actionable Notifications"},"previousItem":{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/category\/web\/#listItem","name":"Web"}},{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#listItem","position":4,"name":"How to Implement a Pomodoro Timer Chrome Extension with Actionable Notifications","previousItem":{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/category\/web\/web-development\/#listItem","name":"Web Development"}}]},{"@type":"Person","@id":"https:\/\/danielepais.com\/journal\/#person","name":"Daniele Pais","image":{"@type":"ImageObject","@id":"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/86bedf0ab24a6d4a4f32de230cc797ef?s=96&d=mm&r=g","width":96,"height":96,"caption":"Daniele Pais"}},{"@type":"Person","@id":"https:\/\/danielepais.com\/journal\/author\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\/#author","url":"https:\/\/danielepais.com\/journal\/author\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\/","name":"Daniele Pais","image":{"@type":"ImageObject","@id":"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/86bedf0ab24a6d4a4f32de230cc797ef?s=96&d=mm&r=g","width":96,"height":96,"caption":"Daniele Pais"}},{"@type":"WebPage","@id":"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#webpage","url":"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/","name":"How to Implement a Pomodoro Timer Chrome Extension with Actionable Notifications | Phuket Web Design","description":"Make your own Pomodoro Timer Chrome Extension with actionable notifications that work straight out of the box.","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/danielepais.com\/journal\/#website"},"breadcrumb":{"@id":"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#breadcrumblist"},"author":{"@id":"https:\/\/danielepais.com\/journal\/author\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\/#author"},"creator":{"@id":"https:\/\/danielepais.com\/journal\/author\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2024\/02\/Implement-a-Pomodoro-Timer-Chrome-Extension-with-Actionable-Notifications.jpg","@id":"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#mainImage","width":850,"height":400,"caption":"Implement a Pomodoro Timer Chrome Extension with Actionable Notifications"},"primaryImageOfPage":{"@id":"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/#mainImage"},"datePublished":"2024-02-02T12:21:03+07:00","dateModified":"2024-02-02T12:21:03+07:00"},{"@type":"WebSite","@id":"https:\/\/danielepais.com\/journal\/#website","url":"https:\/\/danielepais.com\/journal\/","name":"Phuket Web Design","description":"Digital Print","inLanguage":"en-US","publisher":{"@id":"https:\/\/danielepais.com\/journal\/#person"}}]},"og:locale":"en_US","og:site_name":"Daniele Pais Blog","og:type":"article","og:title":"How to Implement a Pomodoro Timer Chrome Extension with Actionable Notifications | Phuket Web Design","og:description":"Make your own Pomodoro Timer Chrome Extension with actionable notifications that work straight out of the box.","og:url":"https:\/\/danielepais.com\/journal\/make-your-own-pomodoro-timer-chrome-extension\/","og:image":"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2024\/02\/Implement-a-Pomodoro-Timer-Chrome-Extension-with-Actionable-Notifications.jpg","og:image:secure_url":"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2024\/02\/Implement-a-Pomodoro-Timer-Chrome-Extension-with-Actionable-Notifications.jpg","og:image:width":"850","og:image:height":"400","article:published_time":"2024-02-02T05:21:03+00:00","article:modified_time":"2024-02-02T05:21:03+00:00","twitter:card":"summary","twitter:site":"@daniele_pais","twitter:title":"How to Implement a Pomodoro Timer Chrome Extension with Actionable Notifications | Phuket Web Design","twitter:description":"Make your own Pomodoro Timer Chrome Extension with actionable notifications that work straight out of the box.","twitter:image":"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2024\/02\/Implement-a-Pomodoro-Timer-Chrome-Extension-with-Actionable-Notifications.jpg"},"aioseo_meta_data":{"post_id":"5674","title":null,"description":null,"keywords":[],"keyphrases":{"focus":{"keyphrase":"Pomodoro Timer Chrome Extension","score":72,"analysis":{"keyphraseInTitle":{"score":9,"maxScore":9,"error":0},"keyphraseInDescription":{"score":9,"maxScore":9,"error":0},"keyphraseLength":{"score":9,"maxScore":9,"error":0,"length":4},"keyphraseInURL":{"score":1,"maxScore":5,"error":1},"keyphraseInIntroduction":{"score":9,"maxScore":9,"error":0},"keyphraseInSubHeadings":{"score":3,"maxScore":9,"error":1},"keyphraseInImageAlt":{"score":9,"maxScore":9,"error":0},"keywordDensity":{"score":0,"type":"low","maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":"#post_title #separator_sa #site_title","og_description":"#post_excerpt","og_object_type":"default","og_image_type":"featured","og_image_url":"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2024\/02\/Implement-a-Pomodoro-Timer-Chrome-Extension-with-Actionable-Notifications.jpg","og_image_width":"850","og_image_height":"400","og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":[],"twitter_use_og":true,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","location":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"created":"2024-02-02 02:01:16","updated":"2025-06-11 19:10:43","ai":null,"seo_analyzer_scan_date":null},"_links":{"self":[{"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/posts\/5674"}],"collection":[{"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/comments?post=5674"}],"version-history":[{"count":0,"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/posts\/5674\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/media\/5680"}],"wp:attachment":[{"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/media?parent=5674"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/categories?post=5674"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/tags?post=5674"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}