From 3ac6fb5acc130cecc2088191b5e2732c18e17ba1 Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Sat, 18 May 2024 12:13:35 +0200
Subject: [PATCH 01/23] Remove content script and add scripting permission

---
 manifest.json | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/manifest.json b/manifest.json
index 9018c1ec..7c035516 100644
--- a/manifest.json
+++ b/manifest.json
@@ -2,7 +2,8 @@
   "manifest_version": 3,
   "name": "Pop-a-loon",
   "description": "The new rising trend (literally) that changes the browser game completely.",
-  "permissions": ["storage", "alarms", "idle"],
+  "permissions": ["storage", "alarms", "idle", "scripting"],
+  "host_permissions": ["https://*/*", "http://*/*"],
   "icons": {
     "16": "./resources/icons/icon-16.png",
     "24": "./resources/icons/icon-24.png",
@@ -10,12 +11,6 @@
     "48": "./resources/icons/icon-48.png",
     "128": "./resources/icons/icon-128.png"
   },
-  "content_scripts": [
-    {
-      "matches": ["https://*/*", "http://*/*"],
-      "js": ["./content.js"]
-    }
-  ],
   "web_accessible_resources": [
     {
       "matches": ["https://*/*", "http://*/*"],

From 662bf40ebb8ff31f23f55a6adfe06e451b00a083 Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Sat, 18 May 2024 12:19:48 +0200
Subject: [PATCH 02/23] Refactor balloon container handling

---
 src/balloon.ts |  6 ++----
 src/const.ts   |  3 +++
 src/utils.ts   | 14 +++++++++++++-
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/balloon.ts b/src/balloon.ts
index b1a57867..054f75ad 100644
--- a/src/balloon.ts
+++ b/src/balloon.ts
@@ -1,9 +1,7 @@
 import browser from 'webextension-polyfill';
 import storage from '@/storage';
 import { random, sendMessage } from '@utils';
-
-export const balloonContainer = document.createElement('div');
-balloonContainer.id = 'balloon-container';
+import { BalloonContainerId } from '@const';
 
 export const balloonResourceLocation = browser.runtime.getURL(
   'resources/balloons/'
@@ -98,7 +96,7 @@ export default abstract class Balloon {
       onAnimationend: this.remove.bind(this),
     });
     // Add the balloon to the container
-    balloonContainer.appendChild(this.element);
+    document.getElementById(BalloonContainerId)?.appendChild(this.element);
   }
 
   public remove(): void {
diff --git a/src/const.ts b/src/const.ts
index 5cc63d15..189535ae 100644
--- a/src/const.ts
+++ b/src/const.ts
@@ -167,10 +167,13 @@ export const devRemoteResponse: Record<Endpoint, any> = new Proxy(
     },
   }
 );
+
 //
 // * Other
 //
 
+export const BalloonContainerId = 'balloon-container';
+
 export type hexColor = string;
 
 export type Prettify<T> = {
diff --git a/src/utils.ts b/src/utils.ts
index fd422f79..2bf37fae 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,5 +1,5 @@
 import browser from 'webextension-polyfill';
-import { Message } from '@const';
+import { Message, BalloonContainerId } from '@const';
 import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import storage from '@/storage';
@@ -100,3 +100,15 @@ export async function calculateBalloonSpawnDelay() {
 
   return randomDelay / spawnRateMultiplier;
 }
+
+function createBalloonContainer() {
+  const balloonContainer = document.createElement('div');
+  balloonContainer.id = BalloonContainerId;
+  document.body.appendChild(balloonContainer);
+  return balloonContainer;
+}
+export function getBalloonContainer() {
+  return (
+    document.getElementById(BalloonContainerId) ?? createBalloonContainer()
+  );
+}

From 75a2d62d7bf514776fbbabfc9d4b0b2582a82526 Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Sat, 18 May 2024 12:26:54 +0200
Subject: [PATCH 03/23] Dynamically load content scripts

---
 webpack.config.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/webpack.config.js b/webpack.config.js
index 2abd025d..4d8d6aed 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,5 +1,6 @@
 const fs = require('fs');
 const path = require('path');
+const glob = require('glob');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
@@ -30,12 +31,20 @@ console.log(`Building for ${browser} in ${mode} mode`);
 console.log(`Version: ${process.env.npm_package_version}`);
 console.log(`Remote: ${process.env.REMOTE}`);
 
+const contentScripts = glob
+  .sync('./src/content/*.ts')
+  .reduce((acc, filePath) => {
+    const fileName = path.basename(filePath, path.extname(filePath));
+    acc[fileName] = './' + filePath;
+    return acc;
+  }, {});
+
 module.exports = {
   mode,
   entry: {
     background: './src/background/background.ts',
-    content: './src/content/content.ts',
     popup: './src/popup/index.tsx',
+    ...contentScripts,
   },
   output: {
     filename: '[name].js',

From 1eb52f6f8edf231a23d33ec8fa975a8da95de538 Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Sat, 18 May 2024 12:27:19 +0200
Subject: [PATCH 04/23] Update content script to spawn one balloon #187

---
 src/content/content.ts       | 42 ------------------------------------
 src/content/spawn-balloon.ts | 25 +++++++++++++++++++++
 2 files changed, 25 insertions(+), 42 deletions(-)
 delete mode 100644 src/content/content.ts
 create mode 100644 src/content/spawn-balloon.ts

diff --git a/src/content/content.ts b/src/content/content.ts
deleted file mode 100644
index cf83e988..00000000
--- a/src/content/content.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import browser from 'webextension-polyfill';
-import { Message } from '@const';
-import { balloonContainer } from '@/balloon';
-import { weightedRandom } from '@/utils';
-import * as balloons from '@/balloons';
-import './style.css';
-
-(() => {
-  if (
-    // Prevent running in popup
-    document.body.id === 'pop-a-loon' ||
-    // Prevent multiple script loads
-    document.body.contains(balloonContainer)
-  ) {
-    return;
-  }
-
-  browser.runtime.onMessage.addListener(
-    async (message: Message, sender, sendResponse) => {
-      // Always call sendResponse, this is required
-      sendResponse();
-      // If the message is not spawnBalloon, ignore it
-      if (message.action !== 'spawnBalloon') return;
-
-      const balloonClasses = Object.values(balloons);
-      // Make a list from the spawn_chance from each balloon class
-      const spawnChances = balloonClasses.map(
-        (BalloonType) => BalloonType.spawn_chance
-      );
-
-      // Create a new balloon and make it rise
-      const Balloon = weightedRandom(balloonClasses, spawnChances, {
-        default: balloons.Default,
-      });
-
-      const balloon = new Balloon();
-      balloon.rise();
-    }
-  );
-
-  document.body.appendChild(balloonContainer);
-})();
diff --git a/src/content/spawn-balloon.ts b/src/content/spawn-balloon.ts
new file mode 100644
index 00000000..d2462b91
--- /dev/null
+++ b/src/content/spawn-balloon.ts
@@ -0,0 +1,25 @@
+import * as balloons from '@/balloons';
+import { getBalloonContainer, weightedRandom } from '@/utils';
+import './style.css';
+
+(() => {
+  // Prevent running in popup
+  if (document.body.id === 'pop-a-loon') return;
+
+  // Add the balloon container to the document
+  const _ = getBalloonContainer();
+
+  const balloonClasses = Object.values(balloons);
+  // Make a list from the spawn_chance from each balloon class
+  const spawnChances = balloonClasses.map(
+    (BalloonType) => BalloonType.spawn_chance
+  );
+
+  // Create a new balloon and make it rise
+  const Balloon = weightedRandom(balloonClasses, spawnChances, {
+    default: balloons.Default,
+  });
+
+  const balloon = new Balloon();
+  balloon.rise();
+})();

From 0c735092248aa5837ba3eb09c39bf7e8f3ec5c0b Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Sat, 18 May 2024 13:28:46 +0200
Subject: [PATCH 05/23] Update background script to use
 browser.scripting.executeScript for spawning balloons

---
 src/background/background.ts | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/background/background.ts b/src/background/background.ts
index fb9417ee..c95c5130 100644
--- a/src/background/background.ts
+++ b/src/background/background.ts
@@ -114,15 +114,15 @@ const updateBadgeColors = () => {
     const alarms = await browser.alarms.getAll();
     if (alarms.some((alarm) => alarm.name === 'spawnBalloon'))
       return skipSpawnMessage('Spawn alarm already set');
-    console.log(`Sending spawnBalloon message`);
-
-    // Send the spawnBalloon message
-    const response = await browser.tabs
-      .sendMessage(tab.id, { action: 'spawnBalloon' })
-      .catch((e) => {});
-    if (browser.runtime.lastError) {
-      browser.runtime.lastError;
-    }
+    console.log(`Spawning balloon on tab`, tab.id);
+
+    try {
+      // Execute content script on tab
+      await browser.scripting.executeScript({
+        files: ['spawn-balloon.js'],
+        target: { tabId: tab.id },
+      });
+    } catch (e) {}
     lastSpawn = now;
   };
 

From 4bbcb9ab1768fce7b345637184bdaf22abd32cdf Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Mon, 20 May 2024 16:19:56 +0200
Subject: [PATCH 06/23] Update firefox manifest to v3 and add scripting
 permission #187

---
 manifest.chrome.json  | 14 +-------------
 manifest.firefox.json | 23 +++--------------------
 manifest.json         | 11 +++++++++++
 3 files changed, 15 insertions(+), 33 deletions(-)

diff --git a/manifest.chrome.json b/manifest.chrome.json
index 2246e3de..0967ef42 100644
--- a/manifest.chrome.json
+++ b/manifest.chrome.json
@@ -1,13 +1 @@
-{
-  "action": {
-    "default_icon": {
-      "16": "./resources/icons/icon-16.png",
-      "24": "./resources/icons/icon-24.png",
-      "32": "./resources/icons/icon-32.png",
-      "48": "./resources/icons/icon-48.png",
-      "128": "./resources/icons/icon-128.png"
-    },
-    "default_title": "Pop-a-loon",
-    "default_popup": "./popup.html"
-  }
-}
+{}
diff --git a/manifest.firefox.json b/manifest.firefox.json
index 4c1b73a0..9471958b 100644
--- a/manifest.firefox.json
+++ b/manifest.firefox.json
@@ -1,27 +1,10 @@
 {
-  "manifest_version": 2,
-  "browser_action": {
-    "default_icon": {
-      "16": "./resources/icons/icon-16.png",
-      "24": "./resources/icons/icon-24.png",
-      "32": "./resources/icons/icon-32.png",
-      "48": "./resources/icons/icon-48.png",
-      "128": "./resources/icons/icon-128.png"
-    },
-    "default_title": "Pop-a-loon",
-    "default_popup": "./popup.html"
-  },
   "background": {
-    "scripts": [
-      "./background.js"
-    ]
+    "scripts": ["./background.js"]
   },
   "browser_specific_settings": {
     "gecko": {
       "id": "pop-a-loon@pop-a-loon"
     }
-  },
-  "web_accessible_resources": [
-    "resources/*"
-  ]
-}
\ No newline at end of file
+  }
+}
diff --git a/manifest.json b/manifest.json
index 7c035516..b6bfb569 100644
--- a/manifest.json
+++ b/manifest.json
@@ -11,6 +11,17 @@
     "48": "./resources/icons/icon-48.png",
     "128": "./resources/icons/icon-128.png"
   },
+  "action": {
+    "default_icon": {
+      "16": "./resources/icons/icon-16.png",
+      "24": "./resources/icons/icon-24.png",
+      "32": "./resources/icons/icon-32.png",
+      "48": "./resources/icons/icon-48.png",
+      "128": "./resources/icons/icon-128.png"
+    },
+    "default_title": "Pop-a-loon",
+    "default_popup": "./popup.html"
+  },
   "web_accessible_resources": [
     {
       "matches": ["https://*/*", "http://*/*"],

From f158804d8a0c954591afe7545a61535d4a437544 Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Mon, 20 May 2024 19:12:41 +0200
Subject: [PATCH 07/23] Add mini-css-extract-plugin

---
 package-lock.json | 74 +++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |  1 +
 2 files changed, 75 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 9e1c287d..a6c33974 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -48,6 +48,7 @@
         "jest-environment-jsdom": "^29.7.0",
         "jest-fetch-mock": "^3.0.3",
         "lint-staged": "^15.2.1",
+        "mini-css-extract-plugin": "^2.9.0",
         "mkdirp": "^3.0.1",
         "postcss": "^8.4.33",
         "prettier": "^3.2.5",
@@ -6838,6 +6839,79 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/mini-css-extract-plugin": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.0.tgz",
+      "integrity": "sha512-Zs1YsZVfemekSZG+44vBsYTLQORkPMwnlv+aehcxK/NLKC+EGhDB39/YePYYqx/sTk6NnYpuqikhSn7+JIevTA==",
+      "dev": true,
+      "dependencies": {
+        "schema-utils": "^4.0.0",
+        "tapable": "^2.2.1"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/ajv": {
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.13.0.tgz",
+      "integrity": "sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.4.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/schema-utils": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
+      "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/minimatch": {
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
diff --git a/package.json b/package.json
index 7eb81f42..04c4dd36 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "lint-staged": "^15.2.1",
+    "mini-css-extract-plugin": "^2.9.0",
     "mkdirp": "^3.0.1",
     "postcss": "^8.4.33",
     "prettier": "^3.2.5",

From 4dec61b7d17be01b3b5598286cd4cd924f995d71 Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Mon, 20 May 2024 19:59:14 +0200
Subject: [PATCH 08/23] Copy stylesheets to dist and exclude popup stylesheets
 from being copied

---
 webpack.config.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/webpack.config.js b/webpack.config.js
index 4d8d6aed..4d87e8b5 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -82,6 +82,14 @@ module.exports = {
       patterns: [
         // Copy resource files to dist
         { from: 'resources/', to: 'resources/' },
+        // Copy sylesheets to dist but exclude stylesheets from popup folder
+        {
+          from: 'src/**/*.css',
+          globOptions: {
+            ignore: ['**/popup/**'],
+          },
+          to: 'resources/stylesheets/[name][ext]',
+        },
         // Copy manifest.json to dist
         {
           from: `manifest.json`,

From 58a887992958fb9511f5d8e571a76b5321490458 Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Mon, 20 May 2024 20:00:21 +0200
Subject: [PATCH 09/23] Add function to import stylesheets dynamically

---
 src/utils.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/utils.ts b/src/utils.ts
index 2bf37fae..a6773e95 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -112,3 +112,20 @@ export function getBalloonContainer() {
     document.getElementById(BalloonContainerId) ?? createBalloonContainer()
   );
 }
+
+export async function importStylesheet(id: string, href: string) {
+  id = `pop-a-loon-${id}`;
+  if (!document.getElementById(id)) {
+    // Fetch the CSS file content
+    const response = await fetch(href);
+    const css = await response.text();
+
+    // Create a <style> element with the CSS content
+    let style = document.createElement('style');
+    style.id = id;
+    style.textContent = css;
+
+    // Append the <style> element to the <head>
+    document.head.appendChild(style);
+  }
+}

From 411378d6bcdfdbda5dc2cb99eb4b4fa413c1d0c8 Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Mon, 20 May 2024 20:00:38 +0200
Subject: [PATCH 10/23] Import stylesheet dynamically

---
 src/balloons/confetti.ts     | 7 +++++--
 src/content/spawn-balloon.ts | 9 +++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/balloons/confetti.ts b/src/balloons/confetti.ts
index 3d7eab63..c5cf1538 100644
--- a/src/balloons/confetti.ts
+++ b/src/balloons/confetti.ts
@@ -1,6 +1,5 @@
 import Balloon, { balloonResourceLocation } from '@/balloon';
-import { random } from '@/utils';
-import '@/../resources/balloons/confetti/confetti.css';
+import { importStylesheet, random } from '@/utils';
 
 export default class Confetti extends Balloon {
   public readonly name = 'confetti';
@@ -10,6 +9,10 @@ export default class Confetti extends Balloon {
 
   constructor() {
     super();
+    importStylesheet(
+      'confetti-styles',
+      balloonResourceLocation + 'confetti/confetti.css'
+    );
 
     this.element.appendChild(this.mask);
     this.mask.src = balloonResourceLocation + this.name + '/mask.png';
diff --git a/src/content/spawn-balloon.ts b/src/content/spawn-balloon.ts
index d2462b91..c44f79e5 100644
--- a/src/content/spawn-balloon.ts
+++ b/src/content/spawn-balloon.ts
@@ -1,11 +1,16 @@
+import browser from 'webextension-polyfill';
 import * as balloons from '@/balloons';
-import { getBalloonContainer, weightedRandom } from '@/utils';
-import './style.css';
+import { getBalloonContainer, importStylesheet, weightedRandom } from '@/utils';
 
 (() => {
   // Prevent running in popup
   if (document.body.id === 'pop-a-loon') return;
 
+  importStylesheet(
+    'balloon-styles',
+    browser.runtime.getURL('resources/stylesheets/style.css')
+  );
+
   // Add the balloon container to the document
   const _ = getBalloonContainer();
 

From fa046df0bbca553e59e9932c4e38e3aa2cee2da1 Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Tue, 21 May 2024 09:37:44 +0200
Subject: [PATCH 11/23] Add host permission grant button to LocalSettings form
 close #191

---
 src/popup/components/forms/LocalSettings.tsx | 57 ++++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/src/popup/components/forms/LocalSettings.tsx b/src/popup/components/forms/LocalSettings.tsx
index 817ce05b..83437019 100644
--- a/src/popup/components/forms/LocalSettings.tsx
+++ b/src/popup/components/forms/LocalSettings.tsx
@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from 'react';
+import browser, { manifest, type Permissions } from 'webextension-polyfill';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
+import { Button } from '@components/ui/button';
 import {
   Form,
   FormField,
@@ -24,11 +26,18 @@ const SPAWN_RATE_STEP = 0.1;
 const formSchema = z.object({
   popVolume: z.number().int().min(MIN_POP_VOLUME).max(MAX_POP_VOLUME),
   spawnRate: z.number().int().min(MIN_SPAWN_RATE).max(MAX_SPAWN_RATE),
+  permissions: z.object({
+    origins: z.array(z.string()),
+    permissions: z.array(z.string()),
+  }),
 });
 
 export default () => {
   const [popVolume, setPopVolume] = useState(0);
   const [spawnRate, setSpawnRate] = useState(0);
+  const [permissions, setPermissions] = useState<Permissions.AnyPermissions>(
+    {}
+  );
   const form = useForm<z.infer<typeof formSchema>>({});
   const popSound = new DefaultBalloon().popSound;
 
@@ -66,12 +75,25 @@ export default () => {
     );
   };
 
+  const onGrantOriginPermissionClick = async () => {
+    const host_permissions =
+      await browser.runtime.getManifest().host_permissions;
+    if (!host_permissions) return console.error('No host_permissions found');
+    const permissions = await browser.permissions.request({
+      origins: host_permissions,
+    });
+    console.log('Permissions granted for', permissions);
+
+    setPermissions(await browser.permissions.getAll());
+  };
+
   useEffect(() => {
     const loadVolume = async () => {
       const config = await storage.get('config');
       // Load volume from storage
       setPopVolume(config.popVolume);
       setSpawnRate(config.spawnRate);
+      setPermissions(await browser.permissions.getAll());
     };
 
     loadVolume();
@@ -151,6 +173,41 @@ export default () => {
             </FormItem>
           )}
         />
+        {/* If the user hasn't granted the host permissions; show the grant permission button */}
+        {!(permissions.origins?.length !== 0) && (
+          <FormField
+            control={form.control}
+            name="permissions.origins"
+            render={({ field: { onChange } }) => (
+              <FormItem>
+                <FormLabel className="flex justify-between gap-1">
+                  <span>Host Permission</span>
+                  <InfoIcon>
+                    <h4 className="font-medium leading-none mb-1">
+                      Host Permission
+                    </h4>
+                    <p className="text-sm font-normal text-muted-foreground leading-tight">
+                      Pop-a-loon requires host permissions to function properly.
+                      Allowing this permission is recommended.
+                    </p>
+                  </InfoIcon>
+                </FormLabel>
+                <FormControl>
+                  <span className="flex gap-2">
+                    <Button
+                      className="w-full"
+                      size={'sm'}
+                      onClick={onGrantOriginPermissionClick}
+                    >
+                      Grant permission
+                    </Button>
+                  </span>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        )}
       </form>
     </Form>
   );

From 3e1dc81bd5532e2ae69cc1250bddce2f1daf4e41 Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Tue, 21 May 2024 10:01:18 +0200
Subject: [PATCH 12/23] Display recommended in tooltip header #191

---
 src/popup/components/forms/LocalSettings.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/popup/components/forms/LocalSettings.tsx b/src/popup/components/forms/LocalSettings.tsx
index 83437019..362dd6e6 100644
--- a/src/popup/components/forms/LocalSettings.tsx
+++ b/src/popup/components/forms/LocalSettings.tsx
@@ -184,11 +184,11 @@ export default () => {
                   <span>Host Permission</span>
                   <InfoIcon>
                     <h4 className="font-medium leading-none mb-1">
-                      Host Permission
+                      Host Permission{' '}
+                      <span className="text-red-500 text-xs">*recommended</span>
                     </h4>
                     <p className="text-sm font-normal text-muted-foreground leading-tight">
                       Pop-a-loon requires host permissions to function properly.
-                      Allowing this permission is recommended.
                     </p>
                   </InfoIcon>
                 </FormLabel>

From d15cfc2f11e90c0fd4b55f522822f002c57cf1f2 Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Tue, 21 May 2024 11:17:35 +0200
Subject: [PATCH 13/23] Refactor balloon.ts to use getBalloonContainer

---
 src/balloon.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/balloon.ts b/src/balloon.ts
index 054f75ad..d62774f4 100644
--- a/src/balloon.ts
+++ b/src/balloon.ts
@@ -1,7 +1,6 @@
 import browser from 'webextension-polyfill';
 import storage from '@/storage';
-import { random, sendMessage } from '@utils';
-import { BalloonContainerId } from '@const';
+import { getBalloonContainer, random, sendMessage } from '@utils';
 
 export const balloonResourceLocation = browser.runtime.getURL(
   'resources/balloons/'
@@ -96,7 +95,7 @@ export default abstract class Balloon {
       onAnimationend: this.remove.bind(this),
     });
     // Add the balloon to the container
-    document.getElementById(BalloonContainerId)?.appendChild(this.element);
+    getBalloonContainer().appendChild(this.element);
   }
 
   public remove(): void {

From a2ebb5d5aa4b8f28f7e058b687c45fa59e2f57e2 Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Tue, 21 May 2024 11:21:38 +0200
Subject: [PATCH 14/23] Add swing and wave animations #188

---
 src/content/style.css | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/content/style.css b/src/content/style.css
index ce66e16a..711a799b 100644
--- a/src/content/style.css
+++ b/src/content/style.css
@@ -42,3 +42,24 @@
     transform: translateY(-10vh);
   }
 }
+
+@keyframes swing {
+  0% {
+    transform: translateX(15px);
+  }
+  50% {
+    transform: translateX(-15px);
+  }
+  100% {
+    transform: translateX(15px);
+  }
+}
+
+@keyframes wave {
+  0% {
+    transform: rotate(-8deg);
+  }
+  100% {
+    transform: rotate(8deg);
+  }
+}
\ No newline at end of file

From 4159ac718f213e673326ba45bc9f15c2263b6784 Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Tue, 21 May 2024 11:22:39 +0200
Subject: [PATCH 15/23] Add styles to the balloon to make it wave close #188

---
 src/balloon.ts | 38 +++++++++++++++++++++++++-------------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/balloon.ts b/src/balloon.ts
index d62774f4..260647f3 100644
--- a/src/balloon.ts
+++ b/src/balloon.ts
@@ -18,19 +18,31 @@ const buildBalloonElement = (
     onAnimationend: () => void;
   }
 ) => {
-  element.classList.add('balloon');
+  const balloon = document.createElement('div');
+  balloon.classList.add('balloon');
 
   // Set the balloon's width and height
-  element.style.width = props.size + 'px';
-  element.style.height = element.style.width;
-  element.style.left = `calc(${props.positionX.toString() + 'vw'} - ${props.size / 2}px)`;
-  element.style.animationDuration = props.riseDuration.toString() + 'ms';
-  element.style.animationTimingFunction = 'linear';
-  element.style.animationFillMode = 'forwards';
-  element.style.animationName = 'rise';
-  element.addEventListener('animationend', props.onAnimationend);
-
-  return element;
+  balloon.style.width = props.size + 'px';
+  balloon.style.height = balloon.style.width;
+  balloon.style.left = `calc(${props.positionX.toString() + 'vw'} - ${props.size / 2}px)`;
+  balloon.style.animationDuration = props.riseDuration.toString() + 'ms';
+  balloon.style.animationTimingFunction = 'linear';
+  balloon.style.animationFillMode = 'forwards';
+  balloon.style.animationName = 'rise';
+  balloon.addEventListener('animationend', props.onAnimationend);
+
+  // Create a second div and apply the swing animation to it
+  const swingElement = document.createElement('div');
+  swingElement.style.animation = 'swing 2s infinite ease-in-out';
+  const waveElement = document.createElement('div');
+  waveElement.style.animation = 'wave 1s infinite ease-in-out alternate';
+  waveElement.style.animationDelay = '0.5s';
+
+  balloon.appendChild(swingElement);
+  swingElement.appendChild(waveElement);
+  waveElement.appendChild(element);
+
+  return balloon;
 };
 
 export default abstract class Balloon {
@@ -88,14 +100,14 @@ export default abstract class Balloon {
     // Load the balloon image
     this.balloonImage.src = this.balloonImageUrl;
     // Build the balloon element
-    buildBalloonElement(this.element, {
+    const balloonElement = buildBalloonElement(this.element, {
       size: random(50, 75),
       positionX: random(5, 95),
       riseDuration: this.getRandomDuration(),
       onAnimationend: this.remove.bind(this),
     });
     // Add the balloon to the container
-    getBalloonContainer().appendChild(this.element);
+    getBalloonContainer().appendChild(balloonElement);
   }
 
   public remove(): void {

From a71c7cd98220b2f2535a6b35d80726dfbdfec1ce Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Tue, 21 May 2024 11:38:44 +0200
Subject: [PATCH 16/23] Make the balloon wave with a random duration #188

---
 src/balloon.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/balloon.ts b/src/balloon.ts
index 260647f3..b9357450 100644
--- a/src/balloon.ts
+++ b/src/balloon.ts
@@ -15,6 +15,7 @@ const buildBalloonElement = (
     size: number;
     positionX: number;
     riseDuration: number;
+    waveDuration: number;
     onAnimationend: () => void;
   }
 ) => {
@@ -33,10 +34,10 @@ const buildBalloonElement = (
 
   // Create a second div and apply the swing animation to it
   const swingElement = document.createElement('div');
-  swingElement.style.animation = 'swing 2s infinite ease-in-out';
+  swingElement.style.animation = `swing ${props.waveDuration}s infinite ease-in-out`;
   const waveElement = document.createElement('div');
-  waveElement.style.animation = 'wave 1s infinite ease-in-out alternate';
-  waveElement.style.animationDelay = '0.5s';
+  waveElement.style.animation = `wave ${props.waveDuration / 2}s infinite ease-in-out alternate`;
+  waveElement.style.animationDelay = `${props.waveDuration / 4}s`;
 
   balloon.appendChild(swingElement);
   swingElement.appendChild(waveElement);
@@ -104,6 +105,7 @@ export default abstract class Balloon {
       size: random(50, 75),
       positionX: random(5, 95),
       riseDuration: this.getRandomDuration(),
+      waveDuration: random(2, 4),
       onAnimationend: this.remove.bind(this),
     });
     // Add the balloon to the container

From 7aa8424c63195831d79cf9c7a0b3dafe66648bf3 Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Tue, 21 May 2024 11:44:09 +0200
Subject: [PATCH 17/23] Remove Balloon.getRandomDuration as it is unnecessary

---
 src/balloon.ts                 | 17 +++++++++--------
 tests/balloons/default.test.ts |  5 -----
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/balloon.ts b/src/balloon.ts
index b9357450..0d689d50 100644
--- a/src/balloon.ts
+++ b/src/balloon.ts
@@ -56,6 +56,7 @@ export default abstract class Balloon {
 
   public readonly element: HTMLDivElement;
   public readonly riseDurationThreshold: [number, number] = [10000, 15000];
+  public readonly swingDurationThreshold: [number, number] = [2, 4];
 
   public get popSound(): HTMLAudioElement {
     if (!this._popSound.src) {
@@ -91,12 +92,6 @@ export default abstract class Balloon {
     return this.element.style.animationName === 'rise';
   }
 
-  public getRandomDuration(
-    duration: [number, number] = this.riseDurationThreshold
-  ): number {
-    return random(duration[0], duration[1]);
-  }
-
   public rise(): void {
     // Load the balloon image
     this.balloonImage.src = this.balloonImageUrl;
@@ -104,8 +99,14 @@ export default abstract class Balloon {
     const balloonElement = buildBalloonElement(this.element, {
       size: random(50, 75),
       positionX: random(5, 95),
-      riseDuration: this.getRandomDuration(),
-      waveDuration: random(2, 4),
+      riseDuration: random(
+        this.riseDurationThreshold[0],
+        this.riseDurationThreshold[1]
+      ),
+      waveDuration: random(
+        this.swingDurationThreshold[0],
+        this.swingDurationThreshold[1]
+      ),
       onAnimationend: this.remove.bind(this),
     });
     // Add the balloon to the container
diff --git a/tests/balloons/default.test.ts b/tests/balloons/default.test.ts
index 7fc45802..f838f2e6 100644
--- a/tests/balloons/default.test.ts
+++ b/tests/balloons/default.test.ts
@@ -15,9 +15,4 @@ describe('Default Balloon', () => {
     expect(balloon.name).toBe('default');
     expect(balloon.name).toBe(Default.name.toLowerCase());
   });
-
-  test('getRandomDuration should return a number', () => {
-    const duration = balloon.getRandomDuration();
-    expect(typeof duration).toBe('number');
-  });
 });

From 8d08134b29d92e7a772eecc6cb70855dc8253497 Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Tue, 21 May 2024 11:58:14 +0200
Subject: [PATCH 18/23] Make sure the wave animation has started when it rises
 the screen #188

---
 src/balloon.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/balloon.ts b/src/balloon.ts
index 0d689d50..53dacfb6 100644
--- a/src/balloon.ts
+++ b/src/balloon.ts
@@ -37,7 +37,8 @@ const buildBalloonElement = (
   swingElement.style.animation = `swing ${props.waveDuration}s infinite ease-in-out`;
   const waveElement = document.createElement('div');
   waveElement.style.animation = `wave ${props.waveDuration / 2}s infinite ease-in-out alternate`;
-  waveElement.style.animationDelay = `${props.waveDuration / 4}s`;
+  // Start wave animation at -3/4 of the swing animation (makes sure the wave has started before the balloon comes on screen)
+  waveElement.style.animationDelay = `-${(props.waveDuration * 3) / 4}s`;
 
   balloon.appendChild(swingElement);
   swingElement.appendChild(waveElement);

From 9b813f6e74f9315977b4ddca96b4b386ea5eea94 Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Tue, 21 May 2024 12:14:15 +0200
Subject: [PATCH 19/23] bugfix: Refactor balloon.ts to remove the topElement
 when removing the balloon

---
 src/balloon.ts | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/balloon.ts b/src/balloon.ts
index 53dacfb6..d14b61a0 100644
--- a/src/balloon.ts
+++ b/src/balloon.ts
@@ -74,6 +74,20 @@ export default abstract class Balloon {
     return balloonResourceLocation + this.name + '/pop.mp3';
   }
 
+  public get topElement(): HTMLDivElement {
+    let element = this.element;
+    while (!element.classList.contains('balloon')) {
+      if (
+        !element.parentElement ||
+        !(element.parentElement instanceof HTMLDivElement) ||
+        element.parentElement === getBalloonContainer()
+      )
+        return element;
+      element = element.parentElement;
+    }
+    return element;
+  }
+
   constructor() {
     // Create the balloon element
     this.element = document.createElement('div');
@@ -115,7 +129,8 @@ export default abstract class Balloon {
   }
 
   public remove(): void {
-    this.element.remove();
+    // loop until the parent node has 'balloon' class
+    this.topElement.remove();
     this.element.style.animationName = 'none';
   }
 

From 35b1a6d56228a427e058b876c7a0ce74b379f14c Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Thu, 23 May 2024 21:02:43 +0200
Subject: [PATCH 20/23] Refactor Header component and add check for balloon
 alarms close #196

---
 src/popup/components/Header.tsx | 50 +++++++++++++++++++++++++++++----
 1 file changed, 44 insertions(+), 6 deletions(-)

diff --git a/src/popup/components/Header.tsx b/src/popup/components/Header.tsx
index 879f2e1f..1c97fc11 100644
--- a/src/popup/components/Header.tsx
+++ b/src/popup/components/Header.tsx
@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from 'react';
+import browser from 'webextension-polyfill';
 import { useLocation } from 'react-router-dom';
 import { ClassValue } from 'clsx';
-import { LucideIcon } from 'lucide-react';
+import { LucideIcon, RotateCcw } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { ArrowLeft, List, Settings } from 'lucide-react';
 import remote from '@/remote';
+import { Button } from './ui/button';
 
 type iconProps = {
   to: string;
@@ -17,6 +19,10 @@ type HeaderProps = {
   className?: ClassValue[];
 };
 
+type BannerProps = {
+  remoteAvailable: boolean;
+};
+
 const routeTitles: { [key: string]: string } = {
   '/settings': 'Settings',
 };
@@ -32,6 +38,42 @@ const HeaderIcon = (props: iconProps) => {
   );
 };
 
+const Banner = (props: BannerProps) => {
+  if (!props.remoteAvailable)
+    return (
+      <div className="flex justify-center items-center bg-destructive text-destructive-foreground p-1">
+        Remote not available
+      </div>
+    );
+
+  const [alarms, setAlarms] = useState<browser.Alarms.Alarm[]>([]);
+
+  useEffect(() => {
+    const fetchAlarms = async () => {
+      const alarms = await browser.alarms.getAll();
+      setAlarms(alarms);
+    };
+    fetchAlarms();
+  }, []);
+
+  if (alarms.length === 0)
+    return (
+      <div className="flex justify-center items-center bg-secondary text-secondary-foreground p-1 gap-2">
+        <span>Something went wrong, please restart the extension.</span>
+        <Button
+          className="size-3"
+          variant={'ghost'}
+          size={'icon'}
+          onClick={() => browser.runtime.reload()}
+        >
+          <RotateCcw className="hover:animate-spin" />
+        </Button>
+      </div>
+    );
+
+  return null;
+};
+
 export default (props: HeaderProps) => {
   const [isAvailable, setIsAvailable] = useState<boolean>(true);
   const location = useLocation();
@@ -63,11 +105,7 @@ export default (props: HeaderProps) => {
           ))}
         </div>
       </header>
-      {!isAvailable && (
-        <div className="flex justify-center items-center bg-destructive text-destructive-foreground p-1">
-          Remote not available
-        </div>
-      )}
+      <Banner remoteAvailable={isAvailable} />
     </>
   );
 };

From a635046d74d42eb8240d2b5f288e2756e38736be Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Thu, 23 May 2024 21:07:20 +0200
Subject: [PATCH 21/23] Add select-none class to Header component

---
 src/popup/components/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/popup/components/Header.tsx b/src/popup/components/Header.tsx
index 1c97fc11..6055909b 100644
--- a/src/popup/components/Header.tsx
+++ b/src/popup/components/Header.tsx
@@ -94,7 +94,7 @@ export default (props: HeaderProps) => {
 
   return (
     <>
-      <header className="flex items-center justify-center bg-primary p-2 text-primary-foreground">
+      <header className="flex items-center justify-center bg-primary p-2 text-primary-foreground select-none">
         <div className="absolute left-1 flex items-center justify-center">
           {location.pathname !== '/' && <HeaderIcon to="/" icon={ArrowLeft} />}
         </div>

From 0377806a44e0bfa4d2ad34d45b2829f4d136ba34 Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Thu, 23 May 2024 21:15:58 +0200
Subject: [PATCH 22/23] Bump package version to 1.10.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a6c33974..99880509 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "pop-a-loon",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pop-a-loon",
-      "version": "1.9.0",
+      "version": "1.10.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@hookform/resolvers": "^3.3.4",
diff --git a/package.json b/package.json
index 04c4dd36..a81afc72 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pop-a-loon",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "The new rising trend (literally) that changes the browser game completely.",
   "private": true,
   "scripts": {

From 722f4e1023ac1ad2d9c1db50f498815b96d0bd75 Mon Sep 17 00:00:00 2001
From: SimonStnn <simon.stijnen.23@gmail.com>
Date: Thu, 23 May 2024 21:26:06 +0200
Subject: [PATCH 23/23] Update screenshots and descriptions in README.md close
 #195

---
 README.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index d97dbd0c..2b0c8f40 100644
--- a/README.md
+++ b/README.md
@@ -18,20 +18,20 @@ The new rising trend (literally) that changes the browser game completely.
 
 Pop-a-loon is a browser extension that adds balloons to every website you visit. The balloons rise up the page and can be popped by clicking on them. See the [installation](#installation) instructions to get started with the extension.
 
-![Screenshot-1](./docs/images/Screenshot-1.png)
+![Screenshot-1](./docs/images/Screenshot-1-1280x800.png)
 
 > Balloons rise up the page on every website you visit. Click on them to pop them and earn points!
-> Pop balloons by clicking on them. The more balloons you pop, the higher your score!
-
-![Screenshot-2](./docs/images/Screenshot-2.png)
-
+>
 > View your score and the number of balloons popped in the extension popup.
 
-![Screenshot-3](./docs/images/Screenshot-3.png)
+![Screenshot-2](./docs/images/Screenshot-2-1280x800.png)
 
-> See your position in the leaderboard and compete with others to get the highest score!
 > Pop as many balloons as you can to earn points and climb the leaderboard!
-> _Leaderboard from 27/04/2024_
+> _Leaderboard from 16/05/2024_
+
+![Screenshot-3](./docs/images/Screenshot-3-1280x800.png)
+
+> Customize your experience in the extension settings.
 
 ## Table of Contents