Merge pull request #144 from abhijithvijayan/master

Use `browsingActivity` as a required `data_collection_permissions`

.babelrc

@@ -1,3 +0,0 @@
-{
-    "presets": ["@babel/preset-env"]
-}

.github/FUNDING.yml

@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: [abhijithvijayan]
+patreon: abhijithvijayan
+open_collective: abhijithvijayan
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: abhijithvijayan
+otechie: # Replace with a single Otechie username
+custom: ['https://www.buymeacoffee.com/abhijithvijayan', 'https://www.paypal.me/iamabhijithvijayan']

.github/workflows/build.yml

@@ -0,0 +1,82 @@
+name: Build and Deploy
+run-name: ${{ github.actor }} started build action
+on:
+  push:
+    branches:
+      - master
+    tags:
+      - 'v*.*.*'
+  pull_request:
+    branches:
+      - master
+
+  # Allows to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: '${{ github.workflow }}-${{ github.ref }}'
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci --legacy-peer-deps
+
+      - name: Build for all browsers
+        run: npm run build
+
+      - name: Upload Chrome extension artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: chrome-extension
+          path: extension/chrome.zip
+
+      - name: Upload Firefox extension artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: firefox-extension
+          path: extension/firefox.xpi
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    # Only deploy when a tag is pushed (e.g., v1.0.0)
+    if: startsWith(github.ref, 'refs/tags/v')
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci --legacy-peer-deps
+
+      - name: Build for all browsers
+        run: npm run build
+
+      - name: Deploy to extension branch
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./extension
+          publish_branch: extension
+          keep_files: false

.gitignore

@@ -1,3 +1,6 @@
+# ignore all haters
+haters/
+
 # Logs
 logs
 *.log
@@ -62,4 +65,104 @@ typings/
 .DS_Store
 
 ## scripts build
-extension/
+extension/
+dist/
+
+# awesome-ts-loader cache
+.awcache
+
+# yarn 2
+# https://github.com/yarnpkg/berry/issues/454#issuecomment-530312089
+.yarn/*
+!.yarn/releases
+!.yarn/plugins
+.pnp.*
+
+### WebStorm+all ###
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+# User-specific stuff
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/**/usage.statistics.xml
+.idea/**/dictionaries
+.idea/**/shelf
+
+# Generated files
+.idea/**/contentModel.xml
+
+# Sensitive or high-churn files
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+.idea/**/dbnavigator.xml
+
+# Gradle
+.idea/**/gradle.xml
+.idea/**/libraries
+
+# Gradle and Maven with auto-import
+# When using Gradle or Maven with auto-import, you should exclude module files,
+# since they will be recreated, and may cause churn.  Uncomment if using
+# auto-import.
+# .idea/artifacts
+# .idea/compiler.xml
+# .idea/jarRepositories.xml
+# .idea/modules.xml
+# .idea/*.iml
+# .idea/modules
+# *.iml
+# *.ipr
+
+# CMake
+cmake-build-*/
+
+# Mongo Explorer plugin
+.idea/**/mongoSettings.xml
+
+# File-based project format
+*.iws
+
+# IntelliJ
+out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Cursive Clojure plugin
+.idea/replstate.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+# Editor-based Rest Client
+.idea/httpRequests
+
+# Android studio 3.1+ serialized cache file
+.idea/caches/build_file_checksums.ser
+
+### WebStorm+all Patch ###
+# Ignores the whole .idea folder and all .iml files
+# See https://github.com/joeblau/gitignore.io/issues/186 and https://github.com/joeblau/gitignore.io/issues/360
+
+.idea/
+
+# Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-249601023
+
+*.iml
+modules.xml
+.idea/misc.xml
+*.ipr
+
+# Sonarlint plugin
+.idea/sonarlint

.nvmrc

@@ -0,0 +1 @@
+20

.travis.yml

@@ -1,19 +0,0 @@
-language: node_js
-cache:
-  directories:
-    - ~/.npm
-node_js:
-  - stable
-git:
-  depth: 3
-script:
-  - npm run build
-deploy:
-  provider: pages
-  skip-cleanup: true
-  keep-history: true
-  github-token: $GITHUB_TOKEN
-  local-dir: extension
-  target-branch: extension
-  on:
-    branch: master

CODE_OF_CONDUCT.md

@@ -63,14 +63,4 @@ Further details of specific enforcement policies may be posted separately.
 
 Project maintainers who do not follow or enforce the Code of Conduct in good
 faith may face temporary or permanent repercussions as determined by other
-members of the project's leadership.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
-available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
-
-[homepage]: https://www.contributor-covenant.org
-
-For answers to common questions about this code of conduct, see
-https://www.contributor-covenant.org/faq
+members of the project's leadership.

CONTRIBUTING.md

@@ -1,26 +1,56 @@
 ## Contributing Guidelines
 
 ## Assets
+
 - [kutt.it API](https://github.com/thedevs-network/kutt#api) is used to retreive shortened URLs.
-- QR Code is generated using <a href="http://goqr.me/">`http://goqr.me/`</a> API
 
 ## Development
+
 - `npm install` to install dependencies.
-- `npm run dev` to to watch file changes in developement 
-    - (Reload Extension Manually with reload button in `chrome://extensions`)
-- Load extension via `chrome://extensions` as unpacked from `extension/` directory.
-- You need to generate an API Key from <a href="https://kutt.it">`https://kutt.it/`</a> (Settings page)
+- To watch file changes in developement
+
+  - Chrome
+    - `npm run dev:chrome`
+  - Firefox
+    - `npm run dev:firefox`
+
+  (Reload Extension Manually in the browser)
+
+- Load extension in browser
+
+  - ### Chrome
+
+    - Go to the browser address bar and type `chrome://extensions`
+    - Check the `Developer Mode` button to enable it.
+    - Click on the `Load Unpacked Extension…` button.
+    - Select your extension’s extracted directory.
+
+      <img width="400" src="https://i.imgur.com/dJRL7By.png" />
+
+  - ### Firefox
+
+    - Load the Add-on via `about:debugging` as temporary Add-on.
+    - Choose the `manifest.json` file in the extracted directory
+
+      <img width="400" src="https://i.imgur.com/aAL5dQg.png" />
+
+- Generate an API Key from <a href="https://kutt.it">`https://kutt.it/`</a> (Settings page)
 - Paste and Save the `Key` in extension's `options page`.
 
-`npm run build` builds the extension to `extension/` directory.
+`npm run build` builds the extension for all the browsers to `extension/(browser)` directory respectively.
 
-## TODO list
+## Testing
 
-- [ ] UI Improvements
-- [ ] Custom Domain Support
-- [ ] Password
-- [x] API Key Page
-- [ ] Logo Change
+Download latest `Release`
 
-## Note:
-Shortening may take a while, it's not the issue with the extension but with <a href="https://github.com/thedevs-network/kutt">Kutt.it's API</a>.
+[<img src=".github/assets/direct-download.png"
+alt="Direct download"
+height="50">](https://github.com/thedevs-network/kutt-extension/releases)
+
+<hr />
+
+## Self-hosted Kutt
+
+- **Enable Developer Options** to use with self-hosted kutt
+  - Save the self hosted domain in the input (eg: https://mykutt.it)
+    - **Note**: the api endpoint is automatically appended during the api call.

README.md

@@ -1,28 +1,128 @@
-<div align="center"><img width="150" src="src/assets/logo.png" /></div>
-<h1 align="center">kuttURL-Chrome</h1>
-<p align="center">Chrome browser extension to to shorten URLs for <a href="https://kutt.it">Kutt.it</a></p>
+<div align="center"><img width="150" src="source/public/assets/logo.png" /></div>
+<h1 align="center">kutt-extension</h1>
+<p align="center">Browser extension for <a href="https://kutt.it">Kutt.it</a> URL shortener</p>
+<div align="center">
+  <a href="https://github.com/thedevs-network/kutt-extension/actions/workflows/build.yml">
+    <img src="https://github.com/thedevs-network/kutt-extension/actions/workflows/build.yml/badge.svg?branch=master" alt="Build" />
+  </a>
+  <a href="https://github.com/thedevs-network/kutt-extension/releases/latest">
+    <img src="https://img.shields.io/github/release/thedevs-network/kutt-extension.svg?colorB=blue" alt="Releases" />
+  </a>
+  <a href="https://github.com/thedevs-network/kutt-extension/issues?q=is%3Aopen+is%3Aissue">
+    <img src="https://img.shields.io/github/issues-raw/thedevs-network/kutt-extension.svg?colorB=lightgrey" alt="Open Issues" />
+  </a>
+  <a href="https://github.com/thedevs-network/kutt-extension/issues?q=is%3Aissue+is%3Aclosed">
+    <img src="https://img.shields.io/github/issues-closed-raw/thedevs-network/kutt-extension.svg?colorB=red" alt="Closed Issues" />
+  </a>
+  <a href="https://github.com/thedevs-network/kutt-extension/blob/master/license">
+    <img src="https://img.shields.io/github/license/thedevs-network/kutt-extension.svg" alt="LICENSE" />
+  </a>
+</div>
+<hr />
+
+❤️ it? ⭐️ it on [GitHub](https://github.com/thedevs-network/kutt-extension/stargazers)
+
+## Features
+
+- Minimal UI
+- Instant QR Code
+- Cross Browser Support
+- Supports Secure Passwords for URLs
+- History & Incognito Feature
+- Auto Copy Feature
+- Free and Open Source
+- Uses WebExtensions API
+
+## Tech Stack
+
+- **Bundler**: [Vite](https://vitejs.dev/) 6
+- **UI**: [React](https://react.dev/) 19
+- **Language**: [TypeScript](https://www.typescriptlang.org/) 5.7
+- **Styling**: SCSS with CSS Modules
+- **Linting**: ESLint 9 (flat config) + Prettier
+
+## Browser Support
+
+This extension uses **Manifest V3**.
+
+| [![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png)](https://chrome.google.com/webstore/detail/kutt/pklakpjfiegjacoppcodencchehlfnpd) | [![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png)](https://addons.mozilla.org/firefox/addon/kutt/) | [![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png)](https://chrome.google.com/webstore/detail/kutt/pklakpjfiegjacoppcodencchehlfnpd) | [![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png)](https://chrome.google.com/webstore/detail/kutt/pklakpjfiegjacoppcodencchehlfnpd) | [![Brave](https://raw.github.com/alrra/browser-logos/master/src/brave/brave_48x48.png)](https://chrome.google.com/webstore/detail/kutt/pklakpjfiegjacoppcodencchehlfnpd) |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| 88+                                                                                                                                                                         | 109+                                                                                                                                          | 74+                                                                                                                                                                      | 88+                                                                                                                                                                         | 1.21+                                                                                                                                                                    |
+
+## Installation
+
+- **Chrome**: [Kutt :: Chrome Web Store](https://chrome.google.com/webstore/detail/kutt/pklakpjfiegjacoppcodencchehlfnpd)
+- **Firefox**: [Kutt :: Add-ons for Firefox](https://addons.mozilla.org/firefox/addon/kutt/)
+- **Edge**: [Kutt :: Chrome Web Store](https://chrome.google.com/webstore/detail/kutt/pklakpjfiegjacoppcodencchehlfnpd)
+
+## How to Use
+
+1. Generate an API Key from <a href="https://kutt.it">`https://kutt.it/`</a> after signing up (Settings page)
+
+   <img width="400" src="https://i.imgur.com/qQwqeH5.png" />
+
+2. Paste and Save this `Key` in extension's `options page` when asked
 
 ## Screenshots
 
-<div align="center">
-  <img width="250" src="https://i.imgur.com/6WKLJQB.gif" alt="image1" />
-  <img width="300" src="https://i.imgur.com/RVCKF8G.png" alt="image2" />
-  <img width="250" src="https://i.imgur.com/ju7Vrc5.gif" alt="image3" />
+<div>
+  <img width="250" src="./.github/assets/popup-v4-1.png" alt="popup" />
+  <div>_</div>
+  <img width="330" src="./.github/assets/options-v4-1.png" alt="options" />
 </div>
 
-Note: 
+## Development
 
-Until Kutt.it provides CORS Support, a CORS Proxy is used temporarily: 
-- https://cors-anywhere.herokuapp.com/
+Ensure you have [Node.js](https://nodejs.org) 20 or later installed.
 
-## How to use
-- Download and Extract the latest zip file from [here](https://github.com/abhijithvijayan/kuttUrl-Chrome-extension/releases/latest)
-- Load extension via `chrome://extensions` as unpacked from extracted directory.
-- You'll need to generate an API Key from <a href="https://kutt.it">`https://kutt.it/`</a>. (Settings page)
-- Paste and Save this `Key` in extension's `options page`.
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev:chrome    # For Chrome
+npm run dev:firefox   # For Firefox
+
+# Build for production
+npm run build:chrome  # Build Chrome extension
+npm run build:firefox # Build Firefox addon
+npm run build         # Build for all browsers
+
+# Linting
+npm run lint          # Run ESLint
+npm run lint:fix      # Run ESLint with auto-fix
+```
+
+### Loading the Extension
+
+#### Chrome
+
+1. Navigate to `chrome://extensions`
+2. Enable "Developer mode"
+3. Click "Load unpacked"
+4. Select `extension/chrome` directory
+
+#### Firefox
+
+1. Navigate to `about:debugging`
+2. Click "This Firefox"
+3. Click "Load Temporary Add-on"
+4. Select `extension/firefox/manifest.json`
+
+## Note
+
+- <a href="https://kutt.it">Kutt.it</a> API permits **50** URLs shortening per day using the API Key
+- **Enable Custom Host** option to use with self-hosted kutt
+  - Save the self hosted domain in the input (eg: `https://mykutt.it`)
+  - **Note**: the api endpoint is automatically appended during the api call
+- _Delay at times while shortening might be the issue with Kutt.it API and not with the extension's_
+
+## Contributing and Support
 
-## How to contribute
 View the Contributing guidelines [here](CONTRIBUTING.md).
 
-## Licence
-Code released under the [MIT License](LICENSE).
+Original Repo: [thedevs-network/kutt](https://github.com/thedevs-network/kutt)
+
+## License
+
+Code released under the [MIT License](license).

eslint.config.mjs

@@ -0,0 +1,48 @@
+import nodeConfig from '@abhijithvijayan/eslint-config/node';
+import tsConfig from '@abhijithvijayan/eslint-config/typescript';
+import reactConfig from '@abhijithvijayan/eslint-config/react';
+
+export default [
+	{
+		ignores: [
+			'node_modules/**',
+			'dist/**',
+			'extension/**',
+			'.yarn/**',
+			'.pnp.js',
+			'*.js',
+			'*.mjs',
+			'vite.config.ts',
+		],
+	},
+	...nodeConfig({
+		files: ['**/*.ts', '**/*.tsx'],
+	}),
+	...tsConfig({
+		files: ['**/*.ts', '**/*.tsx'],
+	}),
+	...reactConfig({
+		files: ['**/*.tsx'],
+	}),
+	{
+		files: ['**/*.ts', '**/*.tsx'],
+		rules: {
+			'no-console': 'off',
+			'@typescript-eslint/no-use-before-define': 'warn',
+			'@typescript-eslint/no-explicit-any': 'warn',
+			// Disable due to resolver issues in ESM
+			'import-x/no-duplicates': 'off',
+			// Browser extension code uses browser APIs, not Node.js
+			'n/no-unsupported-features/node-builtins': 'off',
+		},
+	},
+	{
+		files: ['**/*.tsx'],
+		rules: {
+			'react/jsx-props-no-spreading': 'off',
+			'react/react-in-jsx-scope': 'off',
+			'react/no-array-index-key': 'warn',
+			'jsx-a11y/label-has-associated-control': 'off',
+		},
+	},
+];

license

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Abhijith V
+Copyright (c) Abhijith Vijayan <email@abhijithvijayan.in> (https://abhijithvijayan.in)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package.json

@@ -1,51 +1,76 @@
 {
-  "name": "kutturl",
-  "version": "1.0.0",
-  "main": "background.js",
-  "scripts": {
-    "dev": "webpack --watch --mode development",
-    "build": "webpack --mode production",
-    "start": "webpack-dev-server --mode development --open"
-  },
-  "author": "abhijithvijayan",
+  "name": "kutt-extension",
+  "version": "4.4.2",
+  "description": "Kutt.it extension for browsers.",
   "license": "MIT",
-  "devDependencies": {
-    "@babel/core": "^7.2.2",
-    "@babel/preset-env": "^7.2.3",
-    "autoprefixer": "^9.4.4",
-    "babel-loader": "^8.0.4",
-    "clean-webpack-plugin": "^1.0.0",
-    "copy-webpack-plugin": "^4.6.0",
-    "css-loader": "^2.1.0",
-    "extract-loader": "^3.1.0",
-    "file-loader": "^3.0.1",
-    "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^3.2.0",
-    "node-sass": "^4.11.0",
-    "postcss-loader": "^3.0.0",
-    "precss": "^4.0.0",
-    "resolve-url-loader": "^3.0.0",
-    "sass-loader": "^7.1.0",
-    "url-loader": "^1.1.2",
-    "webpack": "^4.28.3",
-    "webpack-cli": "^3.2.0",
-    "webpack-dev-server": "^3.1.14"
+  "repository": "https://github.com/thedevs-network/kutt-extension.git",
+  "author": {
+    "name": "abhijithvijayan",
+    "email": "email@abhijithvijayan.in",
+    "url": "https://abhijithvijayan.in"
   },
-  "dependencies": {
-    "axios": "^0.18.0",
-    "babel-polyfill": "^6.26.0"
+  "engines": {
+    "node": ">=20"
   },
-  "description": "<div align=\"center\"><img width=\"100\" src=\"src/assets/logo.png\" /></div>\r <h1 align=\"center\">kuttURL-Chrome</h1>\r <p align=\"center\">Chrome extension to to shorten URLs</p>",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/abhijithvijayan/kuttUrl-Chrome.git"
+  "type": "module",
+  "scripts": {
+    "dev:chrome": "cross-env TARGET_BROWSER=chrome vite build --config vite.config.ts --mode development --watch",
+    "dev:firefox": "cross-env TARGET_BROWSER=firefox vite build --config vite.config.ts --mode development --watch",
+    "build:chrome": "cross-env TARGET_BROWSER=chrome vite build --config vite.config.ts",
+    "build:firefox": "cross-env TARGET_BROWSER=firefox vite build --config vite.config.ts",
+    "build": "npm run build:chrome && npm run build:firefox",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
   },
   "keywords": [
     "url",
-    "shortener"
+    "shortener",
+    "browser",
+    "extension",
+    "addon",
+    "kutt"
   ],
-  "bugs": {
-    "url": "https://github.com/abhijithvijayan/kuttUrl-Chrome/issues"
+  "private": true,
+  "dependencies": {
+    "@abhijithvijayan/ts-utils": "^1.2.2",
+    "advanced-css-reset": "^2.1.3",
+    "axios": "^1.7.9",
+    "clsx": "^2.1.1",
+    "qrcode.react": "^4.2.0",
+    "react": "^19.0.0",
+    "react-copy-to-clipboard": "^5.1.0",
+    "react-dom": "^19.0.0",
+    "webextension-polyfill": "^0.12.0"
   },
-  "homepage": "https://github.com/abhijithvijayan/kuttUrl-Chrome#readme"
+  "devDependencies": {
+    "@abhijithvijayan/eslint-config": "^3.0.1",
+    "@abhijithvijayan/tsconfig": "^1.5.1",
+    "@types/node": "^25.0.3",
+    "@types/react": "^19.0.2",
+    "@types/react-copy-to-clipboard": "^5.0.7",
+    "@types/react-dom": "^19.0.2",
+    "@types/webextension-polyfill": "^0.12.1",
+    "@typescript-eslint/eslint-plugin": "^8.51.0",
+    "@typescript-eslint/parser": "^8.51.0",
+    "@vitejs/plugin-react": "^5.1.2",
+    "autoprefixer": "^10.4.20",
+    "cross-env": "^10.1.0",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import-x": "^4.16.1",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-n": "^17.23.1",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "globals": "^17.0.0",
+    "postcss": "^8.4.49",
+    "prettier": "^3.7.4",
+    "sass": "^1.83.0",
+    "typescript": "^5.7.2",
+    "vite": "^7.3.0",
+    "vite-plugin-checker": "^0.12.0",
+    "vite-plugin-wext-manifest": "^1.2.2",
+    "vite-plugin-zip-pack": "^1.2.4"
+  }
 }

postcss.config.js

@@ -0,0 +1,5 @@
+import autoprefixer from 'autoprefixer';
+
+export default {
+  plugins: [autoprefixer()],
+};

source/Background/constants.ts

@@ -0,0 +1,8 @@
+export const CHECK_API_KEY = 'api.checkApiKey';
+export const CHECK_API_KEY_TIMEOUT = 8000; // 8secs
+
+export const SHORTEN_URL = 'api.shortenUrl';
+export const SHORTEN_URL_TIMEOUT = 20000; // 20secs
+
+export const FETCH_URLS_HISTORY = 'api.fetchUrlsHistory';
+export const MAX_HISTORY_ITEMS = 15;

source/Background/index.ts

@@ -0,0 +1,358 @@
+/**
+ *  kutt-extension
+ *
+ *  @author   abhijithvijayan <abhijithvijayan.in>
+ *  @license  MIT License
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import browser, {Runtime} from 'webextension-polyfill';
+import axios, {AxiosPromise, AxiosError} from 'axios';
+import * as constants from './constants';
+
+export enum Kutt {
+  hostDomain = 'kutt.it',
+  hostUrl = 'https://kutt.it',
+}
+
+export enum StoreLinks {
+  chrome = 'https://chrome.google.com/webstore/detail/kutt/pklakpjfiegjacoppcodencchehlfnpd/reviews',
+  firefox = 'https://addons.mozilla.org/en-US/firefox/addon/kutt/reviews/',
+}
+
+// **** ------------------ **** //
+
+export type ErrorStateProperties = {
+  error: boolean | null;
+  message: string;
+};
+
+export type ApiErroredProperties = {
+  error: true;
+  message: string;
+};
+
+export type AuthRequestBodyProperties = {
+  apikey: string;
+  hostUrl: HostUrlProperties;
+};
+
+// **** ------------------ **** //
+
+type HostUrlProperties = string;
+
+export type DomainEntryProperties = {
+  address: string;
+  banned: boolean;
+  created_at: string;
+  id: string;
+  homepage: string;
+  updated_at: string;
+};
+
+type ShortenUrlBodyProperties = {
+  target: string;
+  password?: string;
+  customurl?: string;
+  reuse: boolean;
+  domain?: string;
+};
+
+type ShortenLinkResponseProperties = {
+  id: string;
+  address: string;
+  banned: boolean;
+  password: boolean;
+  target: string;
+  visit_count: number;
+  created_at: string;
+  updated_at: string;
+  link: string;
+};
+
+export interface ApiBodyProperties extends ShortenUrlBodyProperties {
+  apikey: string;
+}
+
+export type ShortUrlActionBodyProperties = {
+  apiBody: ApiBodyProperties;
+  hostUrl: HostUrlProperties;
+};
+
+export type SuccessfulShortenStatusProperties = {
+  error: false;
+  data: ShortenLinkResponseProperties;
+};
+
+/**
+ *  Shorten URL using v2 API
+ */
+async function shortenUrl({
+  apiBody,
+  hostUrl,
+}: ShortUrlActionBodyProperties): Promise<
+  SuccessfulShortenStatusProperties | ApiErroredProperties
+> {
+  try {
+    const {apikey, ...otherParams} = apiBody;
+
+    const {data}: {data: ShortenLinkResponseProperties} = await axios({
+      method: 'POST',
+      timeout: constants.SHORTEN_URL_TIMEOUT,
+      url: `${hostUrl}/api/v2/links`,
+      headers: {
+        'X-API-Key': apikey,
+      },
+      data: {
+        ...otherParams,
+      },
+      // Prevent cookies from being sent to avoid session-based auth conflicts
+      withCredentials: false,
+    });
+
+    return {
+      error: false,
+      data,
+    };
+  } catch (error) {
+    const err = error as AxiosError<{error?: string}>;
+    if (err.response) {
+      if (err.response.status === 401) {
+        return {
+          error: true,
+          message: 'Error: Invalid API Key',
+        };
+      }
+
+      // server request validation errors
+      if (
+        err.response.status === 400 &&
+        Object.prototype.hasOwnProperty.call(err.response.data, 'error')
+      ) {
+        return {
+          error: true,
+          message: `Error: ${err.response.data?.error}`,
+        };
+      }
+
+      // ToDo: remove in the next major update
+      if (err.response.status === 404) {
+        return {
+          error: true,
+          message:
+            'Error: This extension now uses API v2, please update your kutt.it instance.',
+        };
+      }
+    }
+
+    if (err.code === 'ECONNABORTED') {
+      return {
+        error: true,
+        message: 'Error: Timed out',
+      };
+    }
+
+    return {
+      error: true,
+      message: 'Error: Something went wrong',
+    };
+  }
+}
+
+// **** ------------------ **** //
+
+export type UserSettingsResponseProperties = {
+  apikey: string;
+  email: string;
+  domains: DomainEntryProperties[];
+};
+
+export type SuccessfulApiKeyCheckProperties = {
+  error: false;
+  data: UserSettingsResponseProperties;
+};
+
+function getUserSettings({
+  apikey,
+  hostUrl,
+}: AuthRequestBodyProperties): AxiosPromise<any> {
+  return axios({
+    method: 'GET',
+    url: `${hostUrl}/api/v2/users`,
+    timeout: constants.CHECK_API_KEY_TIMEOUT,
+    headers: {
+      'X-API-Key': apikey,
+    },
+    // Prevent cookies from being sent to avoid session-based auth conflicts
+    withCredentials: false,
+  });
+}
+
+async function checkApiKey({
+  apikey,
+  hostUrl,
+}: AuthRequestBodyProperties): Promise<
+  SuccessfulApiKeyCheckProperties | ApiErroredProperties
+> {
+  try {
+    const {data}: {data: UserSettingsResponseProperties} =
+      await getUserSettings({
+        apikey,
+        hostUrl,
+      });
+
+    return {
+      error: false,
+      data,
+    };
+  } catch (error) {
+    const err = error as AxiosError;
+    if (err.response) {
+      if (err.response.status === 401) {
+        return {
+          error: true,
+          message: 'Error: Invalid API Key',
+        };
+      }
+
+      return {
+        error: true,
+        message: 'Error: Something went wrong.',
+      };
+    }
+
+    if (err.code === 'ECONNABORTED') {
+      return {
+        error: true,
+        message: 'Error: Timed out',
+      };
+    }
+
+    return {
+      error: true,
+      message: 'Error: Requesting to server failed.',
+    };
+  }
+}
+
+// **** ------------------ **** //
+
+export type SuccessfulUrlsHistoryFetchProperties = {
+  error: false;
+  data: UserShortenedLinksHistoryResponseBody;
+};
+
+type UserShortenedLinksHistoryResponseBody = {
+  limit: number;
+  skip: number;
+  total: number;
+  data: UserShortenedLinkStats[];
+};
+
+export type UserShortenedLinkStats = {
+  address: string;
+  banned: boolean;
+  created_at: string;
+  id: string;
+  link: string;
+  password: boolean;
+  target: string;
+  updated_at: string;
+  visit_count: number;
+};
+
+/**
+ *  Fetch User's recent 15 shortened urls
+ */
+
+async function fetchUrlsHistory({
+  apikey,
+  hostUrl,
+}: AuthRequestBodyProperties): Promise<
+  SuccessfulUrlsHistoryFetchProperties | ApiErroredProperties
+> {
+  try {
+    const {data}: {data: UserShortenedLinksHistoryResponseBody} = await axios({
+      method: 'GET',
+      timeout: constants.SHORTEN_URL_TIMEOUT,
+      url: `${hostUrl}/api/v2/links`,
+      params: {
+        limit: constants.MAX_HISTORY_ITEMS,
+      },
+      headers: {
+        'X-API-Key': apikey,
+      },
+      // Prevent cookies from being sent to avoid session-based auth conflicts
+      withCredentials: false,
+    });
+
+    return {
+      error: false,
+      data,
+    };
+  } catch (error) {
+    const err = error as AxiosError;
+    if (err.response) {
+      if (err.response.status === 401) {
+        return {
+          error: true,
+          message: 'Error: Invalid API Key',
+        };
+      }
+
+      return {
+        error: true,
+        message: 'Error: Something went wrong.',
+      };
+    }
+
+    if (err.code === 'ECONNABORTED') {
+      return {
+        error: true,
+        message: 'Error: Timed out',
+      };
+    }
+
+    return {
+      error: true,
+      message: 'Error: Requesting to server failed.',
+    };
+  }
+}
+
+// **** ------------------ **** //
+
+/**
+ *  Service worker installation listener (MV3)
+ */
+browser.runtime.onInstalled.addListener((): void => {
+  console.log('Kutt extension installed');
+});
+
+type MessageRequest = {
+  action: string;
+  params: any;
+};
+
+/**
+ *  Listen for messages from UI pages
+ */
+browser.runtime.onMessage.addListener(
+  (message: unknown, _sender: Runtime.MessageSender): void | Promise<any> => {
+    const request = message as MessageRequest;
+
+    switch (request.action) {
+      case constants.CHECK_API_KEY: {
+        return checkApiKey(request.params);
+      }
+
+      case constants.SHORTEN_URL: {
+        return shortenUrl(request.params);
+      }
+
+      case constants.FETCH_URLS_HISTORY: {
+        return fetchUrlsHistory(request.params);
+      }
+    }
+  }
+);

source/History/History.module.scss

@@ -0,0 +1,36 @@
+@use '../styles/variables' as *;
+
+.historyPage {
+  height: 100vh;
+  overflow: hidden;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
+}
+
+.historyContent {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 2rem 1.5rem;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.errorMessage {
+  text-align: center;
+  font-size: 1rem;
+  font-weight: $medium;
+  color: $gray-600;
+  padding: 2rem;
+  background-color: $white;
+  border-radius: $radius-lg;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  margin-top: 1.5rem;
+}
+
+.loaderContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 10rem;
+  margin-top: 1.5rem;
+}

source/History/History.tsx

@@ -0,0 +1,160 @@
+import type {JSX} from 'react';
+import {useEffect, useState} from 'react';
+
+import {
+  useShortenedLinks,
+  ShortenedLinksActionTypes,
+} from '../contexts/shortened-links-context';
+import {
+  HostProperties,
+  useExtensionSettings,
+} from '../contexts/extension-settings-context';
+import {
+  useRequestStatus,
+  RequestStatusActionTypes,
+} from '../contexts/request-status-context';
+import messageUtil from '../util/messageUtil';
+import {FETCH_URLS_HISTORY} from '../Background/constants';
+import {getExtensionSettings} from '../util/settings';
+import {
+  SuccessfulUrlsHistoryFetchProperties,
+  AuthRequestBodyProperties,
+  ApiErroredProperties,
+  ErrorStateProperties,
+  Kutt,
+} from '../Background';
+import {isValidUrl} from '../util/link';
+
+import BodyWrapper from '../components/BodyWrapper';
+import Loader from '../components/Loader';
+import Header from '../Options/Header';
+import Table from './Table';
+
+import styles from './History.module.scss';
+
+function History(): JSX.Element {
+  const [, shortenedLinksDispatch] = useShortenedLinks();
+  const [, extensionSettingsDispatch] = useExtensionSettings();
+  const [requestStatusState, requestStatusDispatch] = useRequestStatus();
+  const [errored, setErrored] = useState<ErrorStateProperties>({
+    error: null,
+    message: '',
+  });
+  const [hostUrl, setHostUrl] = useState<string>(Kutt.hostUrl);
+
+  useEffect(() => {
+    async function getUrlsHistoryStats(): Promise<void> {
+      // ********************************* //
+      // **** GET EXTENSIONS SETTINGS **** //
+      // ********************************* //
+      const {settings = {}} = await getExtensionSettings();
+      const advancedSettings: boolean =
+        (settings?.advanced as boolean) || false;
+
+      const defaultHost: HostProperties =
+        (advancedSettings &&
+          (settings?.host as string) &&
+          isValidUrl(settings.host as string) && {
+            hostDomain:
+              (settings.host as string)
+                .replace('http://', '')
+                .replace('https://', '')
+                .replace('www.', '')
+                .split(/[/?#]/)[0] || '', // extract domain
+            hostUrl: (settings.host as string).endsWith('/')
+              ? (settings.host as string).slice(0, -1)
+              : (settings.host as string), // slice `/` at the end
+          }) ||
+        Kutt;
+
+      // inject existing keys (if field doesn't exist, use default)
+      const defaultExtensionConfig = {
+        apikey: (settings?.apikey as string)?.trim() || '',
+        history: (settings?.history as boolean) || false,
+        advanced:
+          defaultHost.hostUrl.trim() !== Kutt.hostUrl && advancedSettings, // disable `advanced` if customhost is not set
+        host: defaultHost,
+      };
+
+      setHostUrl(defaultExtensionConfig.host.hostUrl);
+
+      // extensionSettingsDispatch({
+      //   type: ExtensionSettingsActionTypes.HYDRATE_EXTENSION_SETTINGS,
+      //   payload: defaultExtensionConfig,
+      // });
+
+      if (defaultExtensionConfig.history) {
+        // ****************************************************** //
+        // **************** FETCH URLS HISTORY ****************** //
+        // ****************************************************** //
+        const urlsHistoryFetchRequetBody: AuthRequestBodyProperties = {
+          apikey: defaultExtensionConfig.apikey,
+          hostUrl: defaultExtensionConfig.host.hostUrl,
+        };
+
+        // call api
+        const response:
+          | SuccessfulUrlsHistoryFetchProperties
+          | ApiErroredProperties = await messageUtil.send(
+          FETCH_URLS_HISTORY,
+          urlsHistoryFetchRequetBody
+        );
+
+        if (!response.error) {
+          setErrored({error: false, message: 'Fetch successful'});
+
+          shortenedLinksDispatch({
+            type: ShortenedLinksActionTypes.HYDRATE_SHORTENED_LINKS,
+            payload: {
+              items: response.data.data,
+              total: response.data.total,
+            },
+          });
+        } else {
+          setErrored({error: true, message: response.message});
+        }
+      } else {
+        setErrored({
+          error: true,
+          message: 'History page disabled. Please enable it from settings.',
+        });
+      }
+
+      requestStatusDispatch({
+        type: RequestStatusActionTypes.SET_LOADING,
+        payload: false,
+      });
+    }
+
+    getUrlsHistoryStats();
+  }, [
+    extensionSettingsDispatch,
+    requestStatusDispatch,
+    shortenedLinksDispatch,
+  ]);
+
+  return (
+    <BodyWrapper>
+      <div id="history" className={styles.historyPage}>
+        <div className={styles.historyContent}>
+          <Header subtitle="Recent Links" hostUrl={hostUrl} />
+
+          {}
+          {!requestStatusState.loading ? (
+            !errored.error ? (
+              <Table />
+            ) : (
+              <h2 className={styles.errorMessage}>{errored.message}</h2>
+            )
+          ) : (
+            <div className={styles.loaderContainer}>
+              <Loader />
+            </div>
+          )}
+        </div>
+      </div>
+    </BodyWrapper>
+  );
+}
+
+export default History;

source/History/Modal.module.scss

@@ -0,0 +1,63 @@
+@use '../styles/variables' as *;
+
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  z-index: 1000;
+}
+
+.modalContent {
+  padding: 2.5rem 3rem;
+  text-align: center;
+  background-color: $white;
+  border-radius: $radius-lg;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+
+.qrCodeWrapper {
+  display: flex;
+  justify-content: center;
+  padding: 1rem;
+  background-color: $white;
+  border-radius: $radius-md;
+}
+
+.buttonWrapper {
+  display: flex;
+  justify-content: center;
+  margin-top: 1.5rem;
+}
+
+.closeButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.5rem;
+  padding: 0 1.5rem;
+  font-size: 0.875rem;
+  font-weight: $medium;
+  color: $white;
+  cursor: pointer;
+  border-radius: $radius-md;
+  border: none;
+  background: $primary-gradient;
+  box-shadow: 0 4px 6px -1px rgba(126, 87, 194, 0.3);
+  transition: transform $transition-fast, box-shadow $transition-fast;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 6px 10px -1px rgba(126, 87, 194, 0.4);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+}

source/History/Modal.tsx

@@ -0,0 +1,50 @@
+import {QRCodeSVG} from 'qrcode.react';
+import type {JSX} from 'react';
+import {Dispatch, SetStateAction} from 'react';
+
+import styles from './Modal.module.scss';
+
+type Props = {
+  link: string;
+  setModalView: Dispatch<SetStateAction<boolean>>;
+};
+
+function Modal({link, setModalView}: Props): JSX.Element {
+  return (
+    <>
+      <div
+        className={styles.modalOverlay}
+        onClick={(): void => setModalView(false)}
+        onKeyDown={(e): void => {
+          if (e.key === 'Escape') setModalView(false);
+        }}
+        role="button"
+        tabIndex={0}
+      >
+        <div
+          className={styles.modalContent}
+          onClick={(e): void => e.stopPropagation()}
+          onKeyDown={(e): void => e.stopPropagation()}
+          role="button"
+          tabIndex={0}
+        >
+          <div className={styles.qrCodeWrapper}>
+            <QRCodeSVG size={196} value={link} />
+          </div>
+
+          <div className={styles.buttonWrapper}>
+            <button
+              onClick={(): void => setModalView(false)}
+              className={styles.closeButton}
+              type="button"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Modal;

source/History/Table.module.scss

@@ -0,0 +1,227 @@
+@use '../styles/variables' as *;
+
+.tableContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  flex: 1;
+  min-height: 0;
+  margin-top: 1.5rem;
+}
+
+.tableWrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 1200px;
+  flex: 1;
+  min-height: 0;
+}
+
+.tableHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+
+.tableTitle {
+  font-size: 0.875rem;
+  font-weight: $medium;
+  color: $gray-600;
+  margin: 0;
+}
+
+.table {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  background-color: $white;
+  border-radius: $radius-lg;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+}
+
+.thead {
+  display: flex;
+  flex-direction: column;
+  background-color: $gray-200;
+}
+
+.theadRow {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 1.5rem;
+  border-bottom: 1px solid $gray-300;
+}
+
+.th {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0.875rem 0;
+  font-size: 0.75rem;
+  font-weight: $semibold;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: $gray-600;
+  line-height: normal;
+}
+
+.thOriginal {
+  flex: 2 2 0px;
+}
+
+.thShort {
+  flex: 1 1 0px;
+}
+
+.tbody {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.tr {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 1.5rem;
+  border-bottom: 1px solid $gray-200;
+  transition: background-color $transition-fast;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background-color: rgba($gray-200, 0.3);
+  }
+}
+
+.td {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 1rem 0;
+}
+
+.tdOriginal {
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  flex: 2 2 0px;
+  padding-right: 1rem;
+
+  &::after {
+    content: '';
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    height: 100%;
+    width: 48px;
+    background: linear-gradient(to left, $white, $white, transparent);
+    pointer-events: none;
+  }
+
+  .tr:hover &::after {
+    background: linear-gradient(to left, rgba($gray-200, 0.3), rgba($gray-200, 0.3), transparent);
+  }
+}
+
+.tdShort {
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  flex: 1 1 0px;
+  padding-right: 1rem;
+
+  &::after {
+    content: '';
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    height: 100%;
+    width: 48px;
+    background: linear-gradient(to left, $white, $white, transparent);
+    pointer-events: none;
+  }
+
+  .tr:hover &::after {
+    background: linear-gradient(to left, rgba($gray-200, 0.3), rgba($gray-200, 0.3), transparent);
+  }
+}
+
+.link {
+  font-size: 0.875rem;
+  line-height: normal;
+  text-decoration: none;
+  color: $blue-500;
+  transition: color $transition-fast;
+
+  &:hover {
+    color: darken($blue-500, 10%);
+    text-decoration: underline;
+  }
+}
+
+.copiedNotification {
+  position: absolute;
+  top: 0.25rem;
+  left: 0;
+  font-size: 0.625rem;
+  font-weight: $medium;
+  color: $green-500;
+  background-color: rgba($green-500, 0.1);
+  padding: 0.125rem 0.375rem;
+  border-radius: $radius-sm;
+}
+
+.shortUrlWrapper {
+  display: flex;
+  align-items: center;
+}
+
+.actionsWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+.actionIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  background-color: $gray-200;
+  border-radius: $radius-full;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  transition: transform $transition-fast, background-color $transition-fast;
+
+  &:hover {
+    transform: translateY(-2px);
+    background-color: $gray-300;
+  }
+
+  svg {
+    stroke: $gray-600;
+    stroke-width: 2;
+  }
+
+  &:first-child svg {
+    stroke: $green-500;
+  }
+}
+
+.emptyRow {
+  padding: 2rem;
+  color: $gray-500;
+  text-align: center;
+  font-size: 0.875rem;
+}

source/History/Table.tsx

@@ -0,0 +1,153 @@
+import CopyToClipboard from 'react-copy-to-clipboard';
+import type {JSX} from 'react';
+import {useEffect, useState} from 'react';
+import clsx from 'clsx';
+
+import {
+  useShortenedLinks,
+  ShortenedLinksActionTypes,
+} from '../contexts/shortened-links-context';
+import {MAX_HISTORY_ITEMS} from '../Background/constants';
+
+import Icon from '../components/Icon';
+import Modal from './Modal';
+
+import styles from './Table.module.scss';
+
+function Table(): JSX.Element {
+  const [shortenedLinksState, shortenedLinksDispatch] = useShortenedLinks();
+  const [QRView, setQRView] = useState<boolean>(false);
+  const [copied, setCopied] = useState<boolean>(false);
+
+  // reset copy message
+  useEffect(() => {
+    let timer: ReturnType<typeof setTimeout> | null = null;
+
+    timer = setTimeout(() => {
+      setCopied(false);
+      // reset selected id from context
+    }, 1300);
+
+    return (): void => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+  }, [copied]);
+
+  function handleCopyToClipboard(selectedItemId: string): void {
+    shortenedLinksDispatch({
+      type: ShortenedLinksActionTypes.SET_CURRENT_SELECTED,
+      payload: selectedItemId,
+    });
+
+    setCopied(true);
+  }
+
+  function handleQRCodeViewToggle(selectedItemId: string): void {
+    shortenedLinksDispatch({
+      type: ShortenedLinksActionTypes.SET_CURRENT_SELECTED,
+      payload: selectedItemId,
+    });
+
+    setQRView(true);
+  }
+
+  return (
+    <>
+      <div className={styles.tableContainer}>
+        <div className={styles.tableWrapper}>
+          <div className={styles.tableHeader}>
+            <h2 className={styles.tableTitle}>
+              Recent shortened links. (last {MAX_HISTORY_ITEMS} results)
+            </h2>
+          </div>
+          <table className={styles.table}>
+            <thead className={styles.thead}>
+              <tr className={styles.theadRow}>
+                <th className={clsx(styles.th, styles.thOriginal)}>
+                  Original URL
+                </th>
+                <th className={clsx(styles.th, styles.thShort)}>Short URL</th>
+              </tr>
+            </thead>
+            <tbody className={styles.tbody}>
+              {!(shortenedLinksState.total === 0) ? (
+                shortenedLinksState.items.map((item) => (
+                  <tr key={item.id} className={styles.tr}>
+                    <td className={clsx(styles.td, styles.tdOriginal)}>
+                      <a
+                        className={styles.link}
+                        href={item.target}
+                        target="_blank"
+                        rel="noopener noreferrer nofollow"
+                      >
+                        {item.target}
+                      </a>
+                    </td>
+
+                    <td className={clsx(styles.td, styles.tdShort)}>
+                      {copied &&
+                        shortenedLinksState.selected?.id === item.id && (
+                          <div className={styles.copiedNotification}>
+                            Copied to clipboard!
+                          </div>
+                        )}
+
+                      <div className={styles.shortUrlWrapper}>
+                        <a
+                          className={styles.link}
+                          href={item.link}
+                          target="_blank"
+                          rel="noopener noreferrer nofollow"
+                        >
+                          {item.link}
+                        </a>
+                      </div>
+                    </td>
+
+                    <td className={styles.td}>
+                      <div className={styles.actionsWrapper}>
+                        {/* // **** COPY TO CLIPBOARD **** // */}
+
+                        {copied &&
+                        shortenedLinksState.selected?.id === item.id ? (
+                          <Icon name="tick" className={styles.actionIcon} />
+                        ) : (
+                          <CopyToClipboard
+                            text={item.link}
+                            onCopy={(): void => handleCopyToClipboard(item.id)}
+                          >
+                            <Icon name="copy" className={styles.actionIcon} />
+                          </CopyToClipboard>
+                        )}
+
+                        <Icon
+                          onClick={(): void => handleQRCodeViewToggle(item.id)}
+                          className={styles.actionIcon}
+                          name="qrcode"
+                        />
+                      </div>
+
+                      {/* // **** QR CODE MODAL **** // */}
+                      {QRView &&
+                        shortenedLinksState.selected?.id === item.id && (
+                          <Modal link={item.link} setModalView={setQRView} />
+                        )}
+                    </td>
+                  </tr>
+                ))
+              ) : (
+                <tr>
+                  <td className={styles.emptyRow}>No URLs History</td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Table;

source/History/history.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>History: Kutt</title>
+  </head>
+  <body>
+    <div id="history-root"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

source/History/index.tsx

@@ -0,0 +1,27 @@
+import {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+
+import {ExtensionSettingsProvider} from '../contexts/extension-settings-context';
+import {RequestStatusProvider} from '../contexts/request-status-context';
+import {ShortenedLinksProvider} from '../contexts/shortened-links-context';
+import History from './History';
+
+import './styles.scss';
+
+const container = document.getElementById('history-root');
+if (!container) {
+  throw new Error('Could not find history-root container');
+}
+
+const root = createRoot(container);
+root.render(
+  <StrictMode>
+    <ExtensionSettingsProvider>
+      <RequestStatusProvider>
+        <ShortenedLinksProvider>
+          <History />
+        </ShortenedLinksProvider>
+      </RequestStatusProvider>
+    </ExtensionSettingsProvider>
+  </StrictMode>
+);

source/History/styles.scss

@@ -0,0 +1,5 @@
+@use '../styles/main.scss';
+
+body {
+  background-color: #edf2f7;
+}

source/Options/Footer.module.scss

@@ -0,0 +1,108 @@
+@use '../styles/variables' as *;
+
+.footer {
+  margin-top: 1.25rem;
+  padding-top: 1rem;
+  font-weight: $regular;
+  font-size: 0.75rem;
+}
+
+.ratingSection {
+  display: flex;
+  align-items: center;
+  color: $gray-800;
+}
+
+.dividerLine {
+  display: block;
+  width: 33.333%;
+  border: 1px solid $gray-200;
+
+  &.left {
+    margin-right: 0.5rem;
+  }
+
+  &.right {
+    margin-left: 0.5rem;
+  }
+}
+
+.ratingLink {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  color: inherit;
+}
+
+.starsContainer {
+  display: flex;
+  align-items: center;
+  margin-top: 0.25rem;
+
+  &:hover .starIcon {
+    transform: scale(1.1);
+  }
+}
+
+.starIcon {
+  margin-right: 0.25rem;
+  fill: currentColor;
+  transition: transform $transition-normal, color $transition-normal;
+
+  &.yellow {
+    color: $yellow-500;
+  }
+
+  &.gray {
+    color: $gray-400;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .ratingLink:hover &.gray {
+    color: $yellow-500;
+  }
+}
+
+.ratingText {
+  margin-bottom: 0;
+  margin-top: 0.25rem;
+}
+
+.linksSection {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  text-align: center;
+  margin-top: 1rem;
+}
+
+.linkItem {
+  padding: 0.25rem;
+  cursor: pointer;
+  color: $gray-500;
+  text-decoration: none;
+  transition: color $transition-fast;
+
+  &:hover {
+    color: $blue-500;
+  }
+
+  &.narrow {
+    width: 33.333%;
+  }
+
+  &.wide {
+    width: 66.666%;
+  }
+}
+
+.linkDivider {
+  width: 1px;
+  height: 1rem;
+  background-color: $gray-300;
+}

source/Options/Footer.tsx

@@ -0,0 +1,88 @@
+import type {JSX} from 'react';
+import {memo} from 'react';
+import clsx from 'clsx';
+
+import {detectBrowser} from '../util/browser';
+import {StoreLinks} from '../Background';
+
+import Icon from '../components/Icon';
+
+import styles from './Footer.module.scss';
+
+function Footer(): JSX.Element {
+  return (
+    <>
+      <footer className={styles.footer}>
+        <div className={styles.ratingSection}>
+          <span className={clsx(styles.dividerLine, styles.left)} />
+          <a
+            href={
+              detectBrowser() === 'firefox'
+                ? StoreLinks.firefox
+                : StoreLinks.chrome
+            }
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+            className={styles.ratingLink}
+          >
+            <div className={styles.starsContainer}>
+              <Icon
+                className={clsx(styles.starIcon, styles.gray)}
+                name="star-white"
+              />
+              <Icon
+                className={clsx(styles.starIcon, styles.gray)}
+                name="star-white"
+              />
+              <Icon
+                className={clsx(styles.starIcon, styles.gray)}
+                name="star-white"
+              />
+              <Icon
+                className={clsx(styles.starIcon, styles.gray)}
+                name="star-white"
+              />
+              <Icon
+                className={clsx(styles.starIcon, styles.gray)}
+                name="star-white"
+              />
+            </div>
+            <p className={styles.ratingText}>Rate on Store</p>
+          </a>
+          <span className={clsx(styles.dividerLine, styles.right)} />
+        </div>
+
+        <div className={styles.linksSection}>
+          <a
+            href="https://kutt.it"
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+            className={clsx(styles.linkItem, styles.narrow)}
+          >
+            Kutt.it
+          </a>
+          <span className={styles.linkDivider} />
+          <a
+            href="https://git.io/Jn5hS"
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+            className={clsx(styles.linkItem, styles.wide)}
+          >
+            Report an issue
+          </a>
+          <span className={styles.linkDivider} />
+          <a
+            href="https://github.com/thedevs-network/kutt-extension"
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+            className={clsx(styles.linkItem, styles.narrow)}
+          >
+            GitHub
+          </a>
+        </div>
+      </footer>
+    </>
+  );
+}
+
+export default memo(Footer);

source/Options/Form.module.scss

@@ -0,0 +1,540 @@
+@use '../styles/variables' as *;
+
+.formSection {
+  margin-top: 1.25rem;
+}
+
+.inputGroup {
+  display: flex;
+  flex-direction: column;
+  font-size: 0.875rem;
+}
+
+.label {
+  margin-bottom: 0.5rem;
+  font-weight: $semibold;
+  color: $gray-700;
+  font-size: 0.8125rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.labelLink {
+  margin-left: 0.5rem;
+  color: $blue-500;
+  text-decoration: none;
+  text-transform: lowercase;
+  letter-spacing: normal;
+  font-weight: $medium;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.labelLinkWrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  &:hover .tooltip {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+.labelWithInfo {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.inputWrapper {
+  position: relative;
+}
+
+.inputIconWrapper {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  width: 2.5rem;
+  height: 100%;
+  border: 1px solid transparent;
+}
+
+.inputIcon {
+  z-index: 10;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: $gray-600;
+  border-radius: $radius-sm 0 0 $radius-sm;
+}
+
+.input {
+  position: relative;
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  padding-right: 3rem;
+  font-size: 0.875rem;
+  background-color: $white;
+  border: 1.5px solid $gray-300;
+  border-radius: $radius-md;
+  transition: border-color $transition-fast, box-shadow $transition-fast;
+
+  &::placeholder {
+    color: $gray-400;
+  }
+
+  &:hover {
+    border-color: $gray-500;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: $indigo-400;
+    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
+  }
+
+  @media (min-width: 640px) {
+    font-size: 0.9375rem;
+  }
+}
+
+.inputError {
+  border-color: $red-500;
+}
+
+.errorText {
+  display: flex;
+  align-items: center;
+  margin-top: 0.25rem;
+  margin-left: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: $medium;
+  letter-spacing: 0.025em;
+  color: $red-500;
+}
+
+.validateSection {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.validateButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1rem;
+  margin-top: 1rem;
+  font-size: 0.8125rem;
+  font-weight: $semibold;
+  text-align: center;
+  color: $white;
+  background: $primary-gradient;
+  border: none;
+  border-radius: $radius-md;
+  box-shadow: 0 4px 6px -1px rgba(126, 87, 194, 0.3);
+  cursor: pointer;
+  transition: transform $transition-fast, box-shadow $transition-fast, opacity $transition-fast;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 6px 10px -1px rgba(126, 87, 194, 0.4);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(126, 87, 194, 0.3);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+  }
+}
+
+.validateText {}
+
+.validateIcon {
+  display: inline-flex;
+  padding: 0;
+  background-color: transparent;
+
+  svg {
+    stroke: currentColor;
+    stroke-width: 2;
+    transition: transform $transition-normal;
+  }
+}
+
+.validationFeedback {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 0.875rem;
+  border-radius: $radius-md;
+  animation: slideIn $transition-normal ease-out;
+
+  &.error {
+    background-color: rgba($red-500, 0.1);
+    border: 1px solid rgba($red-500, 0.2);
+  }
+
+  &.success {
+    background-color: rgba($green-500, 0.1);
+    border: 1px solid rgba($green-500, 0.2);
+  }
+}
+
+.feedbackIcon {
+  flex-shrink: 0;
+
+  svg {
+    stroke-width: 2;
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .error & svg {
+    stroke: $red-500;
+  }
+
+  .success & svg {
+    stroke: $green-500;
+  }
+}
+
+.feedbackMessage {
+  font-size: 0.8125rem;
+  font-weight: $medium;
+  line-height: 1.4;
+
+  .error & {
+    color: $red-500;
+  }
+
+  .success & {
+    color: $green-500;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.toggleSection {
+  display: flex;
+  flex-direction: column;
+  margin-top: 1.5rem;
+  padding-top: 1.25rem;
+  border-top: 1px solid $gray-200;
+}
+
+.toggleLabel {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.625rem 0;
+  cursor: pointer;
+  border-radius: $radius-sm;
+  transition: background-color $transition-fast;
+
+  &:hover {
+    background-color: rgba($gray-200, 0.5);
+    margin: 0 -0.5rem;
+    padding: 0.625rem 0.5rem;
+  }
+}
+
+.toggleText {
+  font-size: 0.875rem;
+}
+
+.toggleTextWithInfo {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.infoIcon {
+  position: relative;
+  display: inline-flex;
+  color: $gray-500;
+  cursor: help;
+
+  &:hover {
+    color: $gray-700;
+  }
+
+  &:hover .tooltip {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+.tooltip {
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 0.5rem);
+  transform: translateX(-50%);
+  width: max-content;
+  max-width: 200px;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: $regular;
+  line-height: 1.4;
+  color: $white;
+  background-color: $gray-800;
+  border-radius: $radius-sm;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  transition: opacity $transition-normal, visibility $transition-normal;
+  z-index: 100;
+  pointer-events: none;
+  text-transform: none;
+  letter-spacing: normal;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 0.375rem;
+    border-style: solid;
+    border-color: $gray-800 transparent transparent transparent;
+  }
+}
+
+.toggleWrapper {
+  position: relative;
+  width: 2.5rem;
+  height: 1.5rem;
+  margin-left: 0.75rem;
+  flex-shrink: 0;
+}
+
+.toggleTrack {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: $gray-400;
+  border-radius: 9999px;
+  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  transition: background-color $transition-normal;
+}
+
+.toggleKnob {
+  position: absolute;
+  top: 0.25rem;
+  left: 0.25rem;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 9999px;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  transition: transform $transition-normal;
+  background-color: $white;
+
+  &.active {
+    transform: translateX(1rem);
+  }
+}
+
+.toggleWrapper:has(.toggleKnob.active) .toggleTrack {
+  background-color: $purple-600;
+}
+
+.toggleInput {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+}
+
+.advancedSection {
+  margin-top: 0.75rem;
+  padding: 1rem;
+  background-color: rgba($gray-200, 0.5);
+  border-radius: $radius-md;
+  border: 1px solid $gray-200;
+  max-height: 200px;
+  opacity: 1;
+  overflow: visible;
+  transition: max-height $transition-normal, opacity $transition-normal, margin-top $transition-normal, padding $transition-normal;
+
+  &.hidden {
+    max-height: 0;
+    opacity: 0;
+    margin-top: 0;
+    padding: 0 1rem;
+    border-color: transparent;
+    overflow: hidden;
+  }
+}
+
+.resetSection {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+  padding-top: 1.25rem;
+  border-top: 1px solid $gray-200;
+}
+
+.resetButton {
+  padding: 0.5rem 1rem;
+  font-size: 0.8125rem;
+  font-weight: $medium;
+  color: $red-500;
+  background-color: transparent;
+  border: 1.5px solid $red-500;
+  border-radius: $radius-md;
+  cursor: pointer;
+  transition: background-color $transition-fast, color $transition-fast;
+
+  &:hover {
+    background-color: $red-500;
+    color: $white;
+  }
+}
+
+.resetHint {
+  font-size: 0.75rem;
+  color: $gray-500;
+}
+
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn $transition-fast ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.modal {
+  background-color: $white;
+  border-radius: $radius-lg;
+  padding: 1.5rem;
+  max-width: 320px;
+  width: 90%;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+  animation: modalSlideIn $transition-fast ease-out;
+}
+
+@keyframes modalSlideIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.modalHeader {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.modalIcon {
+  color: $red-500;
+
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+    stroke-width: 2;
+  }
+}
+
+.modalTitle {
+  font-size: 1rem;
+  font-weight: $semibold;
+  color: $gray-800;
+}
+
+.modalText {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: $gray-600;
+  margin: 0 0 1.25rem 0;
+}
+
+.modalActions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+}
+
+.modalCancelButton {
+  padding: 0.5rem 1rem;
+  font-size: 0.8125rem;
+  font-weight: $medium;
+  color: $gray-600;
+  background-color: $gray-200;
+  border: none;
+  border-radius: $radius-md;
+  cursor: pointer;
+  transition: background-color $transition-fast;
+
+  &:hover {
+    background-color: $gray-300;
+  }
+}
+
+.modalConfirmButton {
+  padding: 0.5rem 1rem;
+  font-size: 0.8125rem;
+  font-weight: $medium;
+  color: $white;
+  background-color: $red-500;
+  border: none;
+  border-radius: $radius-md;
+  cursor: pointer;
+  transition: background-color $transition-fast;
+
+  &:hover {
+    background-color: darken($red-500, 10%);
+  }
+}

source/Options/Form.tsx

@@ -0,0 +1,525 @@
+import {isNull, isUndefined} from '@abhijithvijayan/ts-utils';
+import type {JSX} from 'react';
+import {useState, useEffect, useRef, ChangeEvent} from 'react';
+import clsx from 'clsx';
+
+import {useExtensionSettings} from '../contexts/extension-settings-context';
+import {
+  updateExtensionSettings,
+  clearExtensionSettings,
+} from '../util/settings';
+import {CHECK_API_KEY} from '../Background/constants';
+import messageUtil from '../util/messageUtil';
+import {isValidUrl} from '../util/link';
+import {
+  SuccessfulApiKeyCheckProperties,
+  AuthRequestBodyProperties,
+  ApiErroredProperties,
+  ErrorStateProperties,
+  Kutt,
+} from '../Background';
+
+import Icon from '../components/Icon';
+
+import styles from './Form.module.scss';
+
+type OptionsFormValuesProperties = {
+  apikey: string;
+  history: boolean;
+  advanced: boolean;
+  host: string;
+  reuse: boolean;
+};
+
+type FormErrors = {
+  apikey?: string;
+  host?: string;
+};
+
+type FormValidity = {
+  apikey?: boolean;
+  host?: boolean;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const onSave = (values: OptionsFormValuesProperties): Promise<any> =>
+  // should always return a Promise
+  updateExtensionSettings(values); // update local settings
+function Form(): JSX.Element {
+  const extensionSettingsState = useExtensionSettings()[0];
+  const hostInputRef = useRef<HTMLInputElement>(null);
+  const [submitting, setSubmitting] = useState<boolean>(false);
+  const [showApiKey, setShowApiKey] = useState<boolean>(false);
+  const [showResetConfirm, setShowResetConfirm] = useState<boolean>(false);
+  const [errored, setErrored] = useState<ErrorStateProperties>({
+    error: null,
+    message: '',
+  });
+
+  const [formValues, setFormValues] = useState<OptionsFormValuesProperties>({
+    apikey: extensionSettingsState.apikey,
+    history: extensionSettingsState.history,
+    advanced: extensionSettingsState.advanced,
+    host:
+      (extensionSettingsState.advanced &&
+        extensionSettingsState.host.hostUrl) ||
+      '',
+    reuse: extensionSettingsState.reuse,
+  });
+
+  const [formErrors, setFormErrors] = useState<FormErrors>({});
+  const [formValidity, setFormValidity] = useState<FormValidity>({});
+
+  const isFormValid: boolean =
+    ((isUndefined(formValidity.apikey) || formValidity.apikey) &&
+      formValues.apikey.trim().length === 40 &&
+      isUndefined(formErrors.apikey) &&
+      (((isUndefined(formValidity.host) || formValidity.host) &&
+        isUndefined(formErrors.host)) ||
+        !formValues.advanced)) ||
+    false;
+
+  // on component mount -> save `settings` object
+  useEffect(() => {
+    onSave({
+      ...formValues,
+      ...(formValues.advanced === false && {host: ''}),
+    });
+  }, [formValues]);
+
+  function handleApiKeyInputChange(apikey: string): void {
+    setFormValues((prev) => {
+      return {...prev, apikey};
+    });
+    // ToDo: Remove special symbols
+
+    if (!(apikey.trim().length > 0)) {
+      setFormErrors((prev) => {
+        return {...prev, apikey: 'API key missing'};
+      });
+      setFormValidity((prev) => {
+        return {...prev, apikey: false};
+      });
+    } else if (apikey && apikey.trim().length < 40) {
+      setFormErrors((prev) => {
+        return {...prev, apikey: 'API key must be 40 characters'};
+      });
+      setFormValidity((prev) => {
+        return {...prev, apikey: false};
+      });
+    } else if (apikey && apikey.trim().length > 40) {
+      setFormErrors((prev) => {
+        return {...prev, apikey: 'API key cannot exceed 40 characters'};
+      });
+      setFormValidity((prev) => {
+        return {...prev, apikey: false};
+      });
+    } else {
+      setFormErrors((prev) => {
+        const {apikey: _, ...rest} = prev;
+        return rest;
+      });
+      setFormValidity((prev) => {
+        return {...prev, apikey: true};
+      });
+    }
+  }
+
+  function handleHostUrlInputChange(host: string): void {
+    if (!formValues.advanced) {
+      setFormErrors((prev) => {
+        return {...prev, host: 'Enable Advanced Options first'};
+      });
+      setFormValidity((prev) => {
+        return {...prev, host: false};
+      });
+      return;
+    }
+
+    setFormValues((prev) => {
+      return {...prev, host};
+    });
+
+    if (!(host.trim().length > 0)) {
+      setFormErrors((prev) => {
+        return {...prev, host: 'Custom URL cannot be empty'};
+      });
+      setFormValidity((prev) => {
+        return {...prev, host: false};
+      });
+      return;
+    }
+
+    if (!isValidUrl(host.trim()) || host.trim().length < 10) {
+      setFormErrors((prev) => {
+        return {...prev, host: 'Please enter a valid url'};
+      });
+      setFormValidity((prev) => {
+        return {...prev, host: false};
+      });
+    } else {
+      setFormErrors((prev) => {
+        const {host: _, ...rest} = prev;
+        return rest;
+      });
+      setFormValidity((prev) => {
+        return {...prev, host: true};
+      });
+    }
+  }
+
+  async function handleApiKeyVerification(): Promise<void> {
+    setSubmitting(true);
+    // request API validation request
+    const apiKeyValidationBody: AuthRequestBodyProperties = {
+      apikey: formValues.apikey.trim(),
+      hostUrl:
+        (formValues.advanced &&
+          formValues.host.trim().length > 0 &&
+          formValues.host.trim()) ||
+        Kutt.hostUrl,
+    };
+
+    // API call
+    const response: SuccessfulApiKeyCheckProperties | ApiErroredProperties =
+      await messageUtil.send(CHECK_API_KEY, apiKeyValidationBody);
+
+    if (!response.error) {
+      // set top-level status
+      setErrored({error: false, message: 'Valid API Key'});
+
+      // Store user account information
+      const {domains, email} = response.data;
+      await updateExtensionSettings({user: {domains, email}});
+    } else {
+      // ---- errored ---- //
+      setErrored({error: true, message: response.message});
+
+      // Delete `user` field from settings
+      await updateExtensionSettings({user: null});
+    }
+
+    // enable validate button
+    setSubmitting(false);
+
+    setTimeout(() => {
+      // Reset status
+      setErrored({error: null, message: ''});
+    }, 3000);
+  }
+
+  async function handleResetSettings(): Promise<void> {
+    await clearExtensionSettings();
+    setShowResetConfirm(false);
+    // Reload the page to reflect cleared settings
+    window.location.reload();
+  }
+
+  return (
+    <>
+      <div className={styles.formSection}>
+        <div className={styles.inputGroup}>
+          <label htmlFor="apikey" className={styles.label}>
+            API Key
+            <span className={styles.labelLinkWrapper}>
+              <a
+                href={`${
+                  (formValues.advanced && formValues.host) || Kutt.hostUrl
+                }/login`}
+                target="blank"
+                rel="nofollow noopener noreferrer"
+                className={styles.labelLink}
+              >
+                get one?
+              </a>
+              <span className={styles.tooltip}>
+                Get your API key from your Kutt account settings page
+              </span>
+            </span>
+          </label>
+
+          <div className={styles.inputWrapper}>
+            <div className={styles.inputIconWrapper}>
+              <Icon
+                className={styles.inputIcon}
+                onClick={(): void => setShowApiKey(!showApiKey)}
+                name={!showApiKey ? 'eye-closed' : 'eye'}
+              />
+            </div>
+
+            <input
+              id="apikey"
+              name="apikey"
+              type={!showApiKey ? 'password' : 'text'}
+              value={formValues.apikey}
+              onChange={(e: ChangeEvent<HTMLInputElement>): void => {
+                handleApiKeyInputChange(e.target.value.trim());
+              }}
+              spellCheck="false"
+              className={clsx(
+                styles.input,
+                !isUndefined(formValidity.apikey) &&
+                  !formValidity.apikey &&
+                  styles.inputError
+              )}
+            />
+          </div>
+
+          <span className={styles.errorText}>{formErrors.apikey}</span>
+        </div>
+      </div>
+
+      <div className={styles.validateSection}>
+        <button
+          type="button"
+          disabled={submitting || !isFormValid}
+          onClick={handleApiKeyVerification}
+          className={styles.validateButton}
+        >
+          <span className={styles.validateText}>Validate</span>
+
+          <Icon
+            name={
+              submitting
+                ? 'spinner'
+                : (!isNull(errored.error) &&
+                    ((!errored.error && 'tick') || 'cross')) ||
+                  'zap'
+            }
+            className={styles.validateIcon}
+          />
+        </button>
+
+        {!isNull(errored.error) && (
+          <div
+            className={clsx(
+              styles.validationFeedback,
+              errored.error ? styles.error : styles.success
+            )}
+          >
+            <Icon
+              className={styles.feedbackIcon}
+              name={errored.error ? 'cross' : 'tick'}
+            />
+            <span className={styles.feedbackMessage}>{errored.message}</span>
+          </div>
+        )}
+      </div>
+
+      <div className={styles.toggleSection}>
+        <label htmlFor="history" className={styles.toggleLabel}>
+          <span className={styles.toggleTextWithInfo}>
+            <span className={styles.toggleText}>Show Recent Links</span>
+            <span className={styles.infoIcon}>
+              <Icon name="info" />
+              <span className={styles.tooltip}>
+                Enables the History page to view your recent shortened links
+              </span>
+            </span>
+          </span>
+
+          <span className={styles.toggleWrapper}>
+            <span className={styles.toggleTrack} />
+            <span
+              className={clsx(
+                styles.toggleKnob,
+                formValues.history && styles.active
+              )}
+            >
+              <input
+                id="history"
+                name="history"
+                type="checkbox"
+                checked={formValues.history}
+                onChange={(e: ChangeEvent<HTMLInputElement>): void => {
+                  setFormValues((prev) => {
+                    return {...prev, history: e.target.checked};
+                  });
+                }}
+                className={styles.toggleInput}
+              />
+            </span>
+          </span>
+        </label>
+
+        <label htmlFor="reuse" className={styles.toggleLabel}>
+          <span className={styles.toggleTextWithInfo}>
+            <span className={styles.toggleText}>Reuse Existing URLs</span>
+            <span className={styles.infoIcon}>
+              <Icon name="info" />
+              <span className={styles.tooltip}>
+                Returns the existing short link if the same URL was shortened
+                before
+              </span>
+            </span>
+          </span>
+
+          <span className={styles.toggleWrapper}>
+            <span className={styles.toggleTrack} />
+            <span
+              className={clsx(
+                styles.toggleKnob,
+                formValues.reuse && styles.active
+              )}
+            >
+              <input
+                id="reuse"
+                name="reuse"
+                type="checkbox"
+                checked={formValues.reuse}
+                onChange={(e: ChangeEvent<HTMLInputElement>): void => {
+                  setFormValues((prev) => {
+                    return {...prev, reuse: e.target.checked};
+                  });
+                }}
+                className={styles.toggleInput}
+              />
+            </span>
+          </span>
+        </label>
+
+        <label htmlFor="advanced" className={styles.toggleLabel}>
+          <span className={styles.toggleTextWithInfo}>
+            <span className={styles.toggleText}>Show Advanced Options</span>
+            <span className={styles.infoIcon}>
+              <Icon name="info" />
+              <span className={styles.tooltip}>
+                Configure a custom self-hosted Kutt instance URL
+              </span>
+            </span>
+          </span>
+
+          <span className={styles.toggleWrapper}>
+            <span className={styles.toggleTrack} />
+            <span
+              className={clsx(
+                styles.toggleKnob,
+                formValues.advanced && styles.active
+              )}
+            >
+              <input
+                id="advanced"
+                name="advanced"
+                type="checkbox"
+                checked={formValues.advanced}
+                onChange={(e: ChangeEvent<HTMLInputElement>): void => {
+                  setFormValues((prev) => {
+                    return {...prev, advanced: e.target.checked};
+                  });
+                  if (e.target.checked) {
+                    setTimeout(() => hostInputRef.current?.focus(), 350);
+                  }
+                }}
+                className={styles.toggleInput}
+              />
+            </span>
+          </span>
+        </label>
+
+        <div
+          className={clsx(
+            styles.advancedSection,
+            !formValues.advanced && styles.hidden
+          )}
+        >
+          <div className={styles.inputGroup}>
+            <label htmlFor="host" className={styles.label}>
+              <span className={styles.labelWithInfo}>
+                Custom Host
+                <span className={styles.infoIcon}>
+                  <Icon name="info" />
+                  <span className={styles.tooltip}>
+                    URL of your self-hosted Kutt instance (e.g.,
+                    https://kutt.example.com)
+                  </span>
+                </span>
+              </span>
+            </label>
+
+            <div className={styles.inputWrapper}>
+              <input
+                ref={hostInputRef}
+                id="host"
+                name="host"
+                type="text"
+                value={formValues.host}
+                onChange={(e: ChangeEvent<HTMLInputElement>): void => {
+                  handleHostUrlInputChange(e.target.value.trim());
+                }}
+                spellCheck="false"
+                className={clsx(
+                  styles.input,
+                  !isUndefined(formValidity.host) &&
+                    !formValidity.host &&
+                    styles.inputError
+                )}
+              />
+            </div>
+
+            <span className={styles.errorText}>{formErrors.host}</span>
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.resetSection}>
+        <button
+          type="button"
+          onClick={() => setShowResetConfirm(true)}
+          className={styles.resetButton}
+        >
+          Reset All Settings
+        </button>
+        <span className={styles.resetHint}>
+          This will clear all your settings and reload the extension
+        </span>
+      </div>
+
+      {showResetConfirm && (
+        <div
+          className={styles.modalOverlay}
+          onClick={() => setShowResetConfirm(false)}
+          onKeyDown={(e) => {
+            if (e.key === 'Escape') setShowResetConfirm(false);
+          }}
+          role="button"
+          tabIndex={0}
+        >
+          <div
+            className={styles.modal}
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => e.stopPropagation()}
+            role="button"
+            tabIndex={0}
+          >
+            <div className={styles.modalHeader}>
+              <Icon name="info" className={styles.modalIcon} />
+              <span className={styles.modalTitle}>Reset Settings?</span>
+            </div>
+            <p className={styles.modalText}>
+              This will permanently delete your API key and all preferences. You
+              will need to reconfigure the extension.
+            </p>
+            <div className={styles.modalActions}>
+              <button
+                type="button"
+                onClick={() => setShowResetConfirm(false)}
+                className={styles.modalCancelButton}
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={handleResetSettings}
+                className={styles.modalConfirmButton}
+              >
+                Reset
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default Form;

source/Options/Header.module.scss

@@ -0,0 +1,45 @@
+@use '../styles/variables' as *;
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 1.5rem;
+  margin-bottom: 0.5rem;
+  border-bottom: 1px solid $gray-200;
+}
+
+.logoContainer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-decoration: none;
+  transition: opacity $transition-fast;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+.logo {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.title {
+  font-weight: $semibold;
+  font-size: 1.75rem;
+  background: $primary-gradient;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin: 0;
+}
+
+.subtitle {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  color: $gray-500;
+  font-weight: $regular;
+}

source/Options/Header.tsx

@@ -0,0 +1,39 @@
+import type {JSX} from 'react';
+import {memo} from 'react';
+
+import {Kutt} from '../Background';
+
+import styles from './Header.module.scss';
+
+type Props = {
+  subtitle?: string;
+  hostUrl?: string;
+};
+
+function Header({
+  subtitle = 'Extension Settings',
+  hostUrl = Kutt.hostUrl,
+}: Props): JSX.Element {
+  return (
+    <header className={styles.header}>
+      <a
+        href={hostUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={styles.logoContainer}
+      >
+        <img
+          className={styles.logo}
+          width="40"
+          height="40"
+          src="../assets/logo.png"
+          alt="logo"
+        />
+        <h1 className={styles.title}>Kutt</h1>
+      </a>
+      <p className={styles.subtitle}>{subtitle}</p>
+    </header>
+  );
+}
+
+export default memo(Header);

source/Options/Options.module.scss

@@ -0,0 +1,30 @@
+@use '../styles/variables' as *;
+
+.optionsPage {
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem 1.5rem;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
+  user-select: none;
+}
+
+.optionsContainer {
+  width: 100%;
+  max-width: 28rem;
+  padding: 2rem 2.5rem;
+  margin: 1rem;
+  background-color: $white;
+  height: max-content;
+  border-radius: $radius-lg;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+  @media (min-width: 640px) {
+    padding: 2.5rem 3rem;
+  }
+}
+
+.loaderContainer {
+  height: 16rem;
+}

source/Options/Options.tsx

@@ -0,0 +1,108 @@
+import type {JSX} from 'react';
+import {useEffect, useState} from 'react';
+
+import {getExtensionSettings} from '../util/settings';
+import {
+  HostProperties,
+  useExtensionSettings,
+  ExtensionSettingsActionTypes,
+} from '../contexts/extension-settings-context';
+import {
+  useRequestStatus,
+  RequestStatusActionTypes,
+} from '../contexts/request-status-context';
+import {isValidUrl} from '../util/link';
+import {Kutt} from '../Background';
+
+import BodyWrapper from '../components/BodyWrapper';
+import Loader from '../components/Loader';
+import Header from './Header';
+import Footer from './Footer';
+import Form from './Form';
+
+import styles from './Options.module.scss';
+
+function Options(): JSX.Element {
+  const [, extensionSettingsDispatch] = useExtensionSettings();
+  const [requestStatusState, requestStatusDispatch] = useRequestStatus();
+  const [hostUrl, setHostUrl] = useState<string>(Kutt.hostUrl);
+
+  useEffect(() => {
+    async function getSavedSettings(): Promise<void> {
+      const {settings = {}} = await getExtensionSettings();
+      const advancedSettings: boolean =
+        (settings?.advanced as boolean) || false;
+
+      const defaultHost: HostProperties =
+        (advancedSettings &&
+          (settings?.host as string) &&
+          isValidUrl(settings.host as string) && {
+            hostDomain:
+              (settings.host as string)
+                .replace('http://', '')
+                .replace('https://', '')
+                .replace('www.', '')
+                .split(/[/?#]/)[0] || '', // extract domain
+            hostUrl: (settings.host as string).endsWith('/')
+              ? (settings.host as string).slice(0, -1)
+              : (settings.host as string), // slice `/` at the end
+          }) ||
+        Kutt;
+
+      // inject existing keys (if field doesn't exist, use default)
+      // For history: default to true for new users, but respect existing user preference
+      const historyEnabled = Object.prototype.hasOwnProperty.call(
+        settings,
+        'history'
+      )
+        ? (settings.history as boolean)
+        : true;
+
+      const defaultExtensionConfig = {
+        apikey: (settings?.apikey as string)?.trim() || '',
+        history: historyEnabled,
+        advanced:
+          defaultHost.hostUrl.trim() !== Kutt.hostUrl && advancedSettings, // disable `advanced` if customhost is not set
+        host: defaultHost,
+        reuse: (settings?.reuse as boolean) || false,
+      };
+
+      setHostUrl(defaultExtensionConfig.host.hostUrl);
+
+      extensionSettingsDispatch({
+        type: ExtensionSettingsActionTypes.HYDRATE_EXTENSION_SETTINGS,
+        payload: defaultExtensionConfig,
+      });
+      requestStatusDispatch({
+        type: RequestStatusActionTypes.SET_LOADING,
+        payload: false,
+      });
+    }
+
+    getSavedSettings();
+  }, [extensionSettingsDispatch, requestStatusDispatch]);
+
+  return (
+    <>
+      <BodyWrapper>
+        <div id="options" className={styles.optionsPage}>
+          <div className={styles.optionsContainer}>
+            <Header hostUrl={hostUrl} />
+
+            {!requestStatusState.loading ? (
+              <Form />
+            ) : (
+              <div className={styles.loaderContainer}>
+                <Loader />
+              </div>
+            )}
+
+            <Footer />
+          </div>
+        </div>
+      </BodyWrapper>
+    </>
+  );
+}
+
+export default Options;

source/Options/index.tsx

@@ -0,0 +1,24 @@
+import {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+
+import {ExtensionSettingsProvider} from '../contexts/extension-settings-context';
+import {RequestStatusProvider} from '../contexts/request-status-context';
+import Options from './Options';
+
+import '../styles/main.scss';
+
+const container = document.getElementById('options-root');
+if (!container) {
+  throw new Error('Could not find options-root container');
+}
+
+const root = createRoot(container);
+root.render(
+  <StrictMode>
+    <ExtensionSettingsProvider>
+      <RequestStatusProvider>
+        <Options />
+      </RequestStatusProvider>
+    </ExtensionSettingsProvider>
+  </StrictMode>
+);

source/Options/options.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Options: Kutt</title>
+  </head>
+  <body>
+    <div id="options-root"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

source/Popup/Form.module.scss

@@ -0,0 +1,298 @@
+@use '../styles/variables' as *;
+
+.formContainer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 24rem;
+  padding: 1rem;
+  margin: 0 auto;
+  background-color: $white;
+  user-select: none;
+}
+
+.formGroup {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1rem;
+}
+
+.formGroupRelative {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 0.75rem;
+  position: relative;
+}
+
+.label {
+  margin-bottom: 0.25rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.025em;
+  color: $gray-600;
+
+  @media (min-width: 640px) {
+    font-size: 0.875rem;
+  }
+}
+
+.labelAbsolute {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  display: block;
+  font-size: 0.75rem;
+  letter-spacing: 0.025em;
+  color: $gray-600;
+  cursor: pointer;
+}
+
+.dropdown {
+  position: relative;
+}
+
+.dropdownTrigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  text-align: left;
+  background-color: $white;
+  border: 1.5px solid $gray-300;
+  border-radius: $radius-md;
+  cursor: pointer;
+  transition: border-color $transition-fast, box-shadow $transition-fast;
+
+  &:hover {
+    border-color: $gray-400;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: $blue-500;
+    box-shadow: 0 0 0 3px rgba($blue-500, 0.1);
+  }
+
+  &.open {
+    border-color: $blue-500;
+    box-shadow: 0 0 0 3px rgba($blue-500, 0.1);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    background-color: $gray-200;
+  }
+}
+
+.dropdownValue {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: $gray-500;
+
+  &.hasValue {
+    color: $gray-700;
+  }
+}
+
+.dropdownIcon {
+  display: flex;
+  align-items: center;
+  margin-left: 0.5rem;
+  color: $gray-400;
+  transition: transform $transition-fast, color $transition-fast;
+
+  &.open {
+    transform: rotate(180deg);
+  }
+}
+
+.dropdownMenu {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  left: 0;
+  right: 0;
+  z-index: 50;
+  max-height: 180px;
+  overflow-y: auto;
+  background-color: $white;
+  border-radius: $radius-md;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
+  animation: dropdownFade $transition-fast ease-out;
+}
+
+@keyframes dropdownFade {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.dropdownItem {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  text-align: left;
+  color: $gray-700;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background-color $transition-fast;
+
+  &:first-child {
+    border-top-left-radius: $radius-md;
+    border-top-right-radius: $radius-md;
+  }
+
+  &:last-child {
+    border-bottom-left-radius: $radius-md;
+    border-bottom-right-radius: $radius-md;
+  }
+
+  &:hover {
+    background-color: $gray-200;
+  }
+
+  &.selected {
+    color: $gray-700;
+    font-weight: $medium;
+  }
+}
+
+.input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  background-color: $white;
+  border: 1.5px solid $gray-300;
+  border-radius: $radius-md;
+  margin-top: 1.2rem;
+  transition: border-color $transition-fast, box-shadow $transition-fast;
+
+  &::placeholder {
+    color: $gray-400;
+  }
+
+  &:hover {
+    border-color: $gray-400;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: $blue-500;
+    box-shadow: 0 0 0 3px rgba($blue-500, 0.1);
+  }
+
+  @media (min-width: 640px) {
+    font-size: 1rem;
+  }
+}
+
+.inputError {
+  border-color: $red-500;
+}
+
+.errorText {
+  display: flex;
+  align-items: center;
+  margin-top: 0.25rem;
+  margin-left: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: $medium;
+  letter-spacing: 0.025em;
+  color: $red-500;
+}
+
+.passwordWrapper {
+  position: relative;
+}
+
+.passwordToggle {
+  position: absolute;
+  top: 1.2rem;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  width: 2.5rem;
+}
+
+.passwordToggleIcon {
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px 0 0 4px;
+  cursor: pointer;
+  color: $gray-400;
+  transition: color $transition-fast;
+
+  &:hover {
+    color: $gray-600;
+  }
+}
+
+.submitButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0.25rem;
+  font-size: 0.8125rem;
+  font-weight: $semibold;
+  text-align: center;
+  color: $white;
+  background: $primary-gradient;
+  border: none;
+  border-radius: $radius-md;
+  box-shadow: 0 4px 6px -1px rgba(126, 87, 194, 0.3);
+  min-height: 36px;
+  cursor: pointer;
+  transition: transform $transition-fast, box-shadow $transition-fast;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 6px 10px -1px rgba(126, 87, 194, 0.4);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+  }
+}
+
+.createIcon {
+  display: inline-flex;
+  padding: 0;
+  background-color: transparent;
+
+  svg {
+    stroke: currentColor;
+    stroke-width: 2;
+    transition: transform $transition-normal;
+  }
+}

source/Popup/Form.tsx

@@ -0,0 +1,332 @@
+import type {JSX} from 'react';
+import {useState, useRef, useEffect, type ChangeEvent} from 'react';
+import {EMPTY_STRING, isEmpty, isNull, get} from '@abhijithvijayan/ts-utils';
+import clsx from 'clsx';
+
+import {useExtensionSettings} from '../contexts/extension-settings-context';
+import {SHORTEN_URL} from '../Background/constants';
+import messageUtil from '../util/messageUtil';
+import {getCurrentTab} from '../util/tabs';
+import {
+  RequestStatusActionTypes,
+  useRequestStatus,
+} from '../contexts/request-status-context';
+import {isValidUrl, removeProtocol} from '../util/link';
+import {
+  SuccessfulShortenStatusProperties,
+  ShortUrlActionBodyProperties,
+  ApiErroredProperties,
+  ApiBodyProperties,
+} from '../Background';
+
+import Icon from '../components/Icon';
+import styles from './Form.module.scss';
+
+export enum CONSTANTS {
+  DefaultDomainId = 'default',
+}
+
+function Form(): JSX.Element {
+  const extensionSettingsState = useExtensionSettings()[0];
+  const requestStatusDispatch = useRequestStatus()[1];
+  const [showPassword, setShowPassword] = useState<boolean>(false);
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const {
+    domainOptions,
+    host: {hostDomain},
+  } = extensionSettingsState;
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent): void {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsDropdownOpen(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return (): void =>
+      document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const [formState, setFormState] = useState({
+    domain:
+      domainOptions
+        .find(({id}) => id === CONSTANTS.DefaultDomainId)
+        ?.value?.trim() || EMPTY_STRING,
+    customurl: '',
+    password: '',
+  });
+  const [formErrors, setFormErrors] = useState<{
+    customurl?: string;
+    password?: string;
+  }>({});
+
+  const isFormValid: boolean =
+    !formErrors.customurl && !formErrors.password && true;
+
+  async function handleFormSubmit(): Promise<void> {
+    // enable loading screen
+    setIsSubmitting(true);
+
+    // Get target link to shorten
+    const tabs = await getCurrentTab();
+    const target: string | null = get(tabs, '[0].url', null);
+    const shouldSubmit: boolean = !isNull(target) && isValidUrl(target);
+
+    if (!shouldSubmit) {
+      setIsSubmitting(false);
+      requestStatusDispatch({
+        type: RequestStatusActionTypes.SET_REQUEST_STATUS,
+        payload: {
+          error: true,
+          message: 'Not a valid URL',
+        },
+      });
+      return;
+    }
+
+    const apiBody: ApiBodyProperties = {
+      apikey: extensionSettingsState.apikey,
+      target: target!,
+      ...(formState.customurl.trim() !== EMPTY_STRING && {
+        customurl: formState.customurl.trim(),
+      }),
+      ...(!isEmpty(formState.password) && {password: formState.password}),
+      reuse: extensionSettingsState.reuse,
+      ...(formState.domain.trim() !== EMPTY_STRING && {
+        domain: formState.domain.trim(),
+      }),
+    };
+
+    const apiShortenUrlBody: ShortUrlActionBodyProperties = {
+      apiBody,
+      hostUrl: extensionSettingsState.host.hostUrl,
+    };
+
+    // shorten url in the background
+    const response: SuccessfulShortenStatusProperties | ApiErroredProperties =
+      await messageUtil.send(SHORTEN_URL, apiShortenUrlBody);
+
+    // disable spinner
+    setIsSubmitting(false);
+
+    if (!response.error) {
+      const {
+        data: {link},
+      } = response;
+      // show shortened url
+      requestStatusDispatch({
+        type: RequestStatusActionTypes.SET_REQUEST_STATUS,
+        payload: {
+          error: false,
+          message: link,
+        },
+      });
+      // reset form fields (keep domain selection)
+      setFormState((prev) => {
+        return {...prev, customurl: '', password: ''};
+      });
+      setFormErrors({});
+    } else {
+      // errored
+      requestStatusDispatch({
+        type: RequestStatusActionTypes.SET_REQUEST_STATUS,
+        payload: {
+          error: true,
+          message: response.message,
+        },
+      });
+    }
+  }
+
+  function handleCustomUrlInputChange(url: string): void {
+    setFormState((prev) => {
+      return {...prev, customurl: url};
+    });
+
+    if (url.length > 0 && url.length < 3) {
+      setFormErrors((prev) => {
+        return {
+          ...prev,
+          customurl: 'Custom URL must be at-least 3 characters',
+        };
+      });
+    } else {
+      setFormErrors((prev) => {
+        return {...prev, customurl: undefined};
+      });
+    }
+  }
+
+  function handlePasswordInputChange(password: string): void {
+    setFormState((prev) => {
+      return {...prev, password};
+    });
+
+    if (password.length > 0 && password.length < 3) {
+      setFormErrors((prev) => {
+        return {
+          ...prev,
+          password: 'Password must be at-least 3 characters',
+        };
+      });
+    } else {
+      setFormErrors((prev) => {
+        return {...prev, password: undefined};
+      });
+    }
+  }
+
+  return (
+    <div className={styles.formContainer}>
+      <div className={styles.formGroup}>
+        <label className={styles.label}>Domain</label>
+
+        <div className={styles.dropdown} ref={dropdownRef}>
+          <button
+            type="button"
+            className={clsx(
+              styles.dropdownTrigger,
+              isDropdownOpen && styles.open
+            )}
+            onClick={() => !isSubmitting && setIsDropdownOpen(!isDropdownOpen)}
+            disabled={isSubmitting}
+          >
+            <span
+              className={clsx(
+                styles.dropdownValue,
+                formState.domain && styles.hasValue
+              )}
+            >
+              {domainOptions.find(({value}) => value === formState.domain)
+                ?.option ||
+                (formState.domain && removeProtocol(formState.domain)) ||
+                'Select domain'}
+            </span>
+            <Icon
+              name="chevron-down"
+              className={clsx(
+                styles.dropdownIcon,
+                isDropdownOpen && styles.open
+              )}
+            />
+          </button>
+
+          {isDropdownOpen && (
+            <div className={styles.dropdownMenu}>
+              {domainOptions.filter(({disabled}) => !disabled).length > 0 ? (
+                domainOptions
+                  .filter(({disabled}) => !disabled)
+                  .map(({id, option, value}) => (
+                    <button
+                      type="button"
+                      key={id}
+                      className={clsx(
+                        styles.dropdownItem,
+                        formState.domain === value && styles.selected
+                      )}
+                      onClick={() => {
+                        setFormState((prev) => {
+                          return {...prev, domain: value};
+                        });
+                        setIsDropdownOpen(false);
+                      }}
+                    >
+                      {option || removeProtocol(value)}
+                    </button>
+                  ))
+              ) : (
+                <span className={styles.dropdownItem}>
+                  No domains available
+                </span>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className={styles.formGroupRelative}>
+        <label htmlFor="customurl" className={styles.labelAbsolute}>
+          <span>{hostDomain}/</span>
+        </label>
+
+        <input
+          id="customurl"
+          name="customurl"
+          type="text"
+          value={formState.customurl}
+          onChange={(e: ChangeEvent<HTMLInputElement>): void => {
+            handleCustomUrlInputChange(e.target.value.trim());
+          }}
+          disabled={isSubmitting}
+          spellCheck="false"
+          className={clsx(
+            styles.input,
+            formErrors.customurl && styles.inputError
+          )}
+        />
+
+        <span className={styles.errorText}>{formErrors.customurl}</span>
+      </div>
+
+      <div className={styles.formGroupRelative}>
+        <label htmlFor="password" className={styles.labelAbsolute}>
+          <span>Password</span>
+        </label>
+
+        <div className={styles.passwordWrapper}>
+          <div className={styles.passwordToggle}>
+            <Icon
+              onClick={(): void => {
+                if (!isSubmitting) {
+                  setShowPassword(!showPassword);
+                }
+              }}
+              name={!showPassword ? 'eye-closed' : 'eye'}
+              className={styles.passwordToggleIcon}
+            />
+          </div>
+
+          <input
+            id="password"
+            name="password"
+            type={!showPassword ? 'password' : 'text'}
+            value={formState.password}
+            spellCheck="false"
+            onChange={(e: ChangeEvent<HTMLInputElement>): void => {
+              handlePasswordInputChange(e.target.value);
+            }}
+            disabled={isSubmitting}
+            className={clsx(
+              styles.input,
+              formErrors.password && styles.inputError
+            )}
+          />
+        </div>
+
+        <span className={styles.errorText}>{formErrors.password}</span>
+      </div>
+
+      <button
+        type="button"
+        disabled={!isFormValid || isSubmitting}
+        onClick={handleFormSubmit}
+        className={styles.submitButton}
+      >
+        {!isSubmitting ? (
+          <span>Create</span>
+        ) : (
+          <Icon className={styles.createIcon} name="spinner" />
+        )}
+      </button>
+    </div>
+  );
+}
+
+export default Form;

source/Popup/Header.module.scss

@@ -0,0 +1,95 @@
+@use '../styles/variables' as *;
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  user-select: none;
+}
+
+.logoLink {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  transition: opacity $transition-fast;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+.logo {
+  width: 2rem;
+  height: 2rem;
+}
+
+.actions {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.iconWrapper {
+  position: relative;
+  display: inline-flex;
+
+  &:hover .tooltip {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+.styledIcon {
+  background-color: transparent;
+  box-shadow: none;
+  color: $gray-400;
+  transition: color $transition-fast;
+
+  &:hover {
+    color: $gray-600;
+  }
+}
+
+.tooltip {
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  top: calc(100% + 0.375rem);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0.375rem 0.5rem;
+  font-size: 0.6875rem;
+  font-weight: $medium;
+  white-space: nowrap;
+  color: $white;
+  background-color: $gray-800;
+  border-radius: $radius-sm;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+  transition: opacity $transition-fast, visibility $transition-fast;
+  z-index: 100;
+  pointer-events: none;
+
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 0.25rem;
+    border-style: solid;
+    border-color: transparent transparent $gray-800 transparent;
+  }
+}
+
+// Position the last tooltip (Settings) to the right to prevent overflow
+.iconWrapper:last-child .tooltip {
+  left: auto;
+  right: 0;
+  transform: none;
+
+  &::before {
+    left: auto;
+    right: 0.5rem;
+    transform: none;
+  }
+}

source/Popup/Header.tsx

@@ -0,0 +1,134 @@
+import {isNull, EMPTY_STRING} from '@abhijithvijayan/ts-utils';
+import type {JSX} from 'react';
+import {useState, useRef, useEffect} from 'react';
+import clsx from 'clsx';
+
+import {openExtOptionsPage, openHistoryPage} from '../util/tabs';
+import {updateExtensionSettings} from '../util/settings';
+import {CHECK_API_KEY} from '../Background/constants';
+import {
+  ExtensionSettingsActionTypes,
+  useExtensionSettings,
+} from '../contexts/extension-settings-context';
+import messageUtil from '../util/messageUtil';
+import {
+  SuccessfulApiKeyCheckProperties,
+  AuthRequestBodyProperties,
+  ApiErroredProperties,
+  ErrorStateProperties,
+} from '../Background';
+
+import Icon from '../components/Icon';
+import styles from './Header.module.scss';
+
+function Header(): JSX.Element {
+  const [extensionSettingsState, extensionSettingsDispatch] =
+    useExtensionSettings();
+  const [loading, setLoading] = useState<boolean>(false);
+  const [errored, setErrored] = useState<ErrorStateProperties>({
+    error: null,
+    message: EMPTY_STRING,
+  });
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Cleanup timer on unmount
+  useEffect(
+    () => (): void => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    },
+    []
+  );
+
+  async function fetchUserDomains(): Promise<void> {
+    setLoading(true);
+
+    const apiKeyValidationBody: AuthRequestBodyProperties = {
+      apikey: extensionSettingsState.apikey,
+      hostUrl: extensionSettingsState.host.hostUrl,
+    };
+
+    const response: SuccessfulApiKeyCheckProperties | ApiErroredProperties =
+      await messageUtil.send(CHECK_API_KEY, apiKeyValidationBody);
+
+    setLoading(false);
+
+    if (!response.error) {
+      setErrored({error: false, message: 'Fetching domains successful'});
+      const {domains, email} = response.data;
+      await updateExtensionSettings({user: {domains, email}});
+    } else {
+      setErrored({error: true, message: response.message});
+      await updateExtensionSettings({user: null});
+    }
+
+    extensionSettingsDispatch({
+      type: ExtensionSettingsActionTypes.RELOAD_EXTENSION_SETTINGS,
+      payload: !extensionSettingsState.reload,
+    });
+
+    // Clear any existing timer before setting a new one
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(() => {
+      setErrored({error: null, message: EMPTY_STRING});
+    }, 1000);
+  }
+
+  const iconToShow = loading
+    ? 'spinner'
+    : (!isNull(errored.error) && (!errored.error ? 'tick' : 'cross')) ||
+      'refresh';
+
+  return (
+    <header className={styles.header}>
+      <a
+        href={extensionSettingsState.host.hostUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={styles.logoLink}
+      >
+        <img
+          className={styles.logo}
+          width="32"
+          height="32"
+          src="../assets/logo.png"
+          alt="logo"
+        />
+      </a>
+
+      <div className={styles.actions}>
+        <span className={styles.iconWrapper}>
+          <Icon
+            onClick={fetchUserDomains}
+            name={iconToShow}
+            className={clsx('icon', styles.styledIcon)}
+          />
+          <span className={styles.tooltip}>Sync account</span>
+        </span>
+        {extensionSettingsState.history && (
+          <span className={styles.iconWrapper}>
+            <Icon
+              onClick={openHistoryPage}
+              name="clock"
+              className={clsx('icon', styles.styledIcon)}
+            />
+            <span className={styles.tooltip}>History</span>
+          </span>
+        )}
+        <span className={styles.iconWrapper}>
+          <Icon
+            onClick={openExtOptionsPage}
+            name="settings"
+            className={clsx('icon', styles.styledIcon)}
+          />
+          <span className={styles.tooltip}>Settings</span>
+        </span>
+      </div>
+    </header>
+  );
+}
+
+export default Header;

source/Popup/Popup.module.scss

@@ -0,0 +1,7 @@
+@use '../styles/variables' as *;
+
+.popup {
+  font-size: 1.125rem;
+  min-height: 350px;
+  min-width: 270px;
+}

source/Popup/Popup.tsx

@@ -0,0 +1,185 @@
+import {isNull, EMPTY_STRING} from '@abhijithvijayan/ts-utils';
+import type {JSX} from 'react';
+import {useEffect} from 'react';
+
+import {Kutt, UserSettingsResponseProperties} from '../Background';
+import {openExtOptionsPage} from '../util/tabs';
+import {isValidUrl} from '../util/link';
+
+import {
+  ExtensionSettingsActionTypes,
+  DomainOptionsProperties,
+  useExtensionSettings,
+  HostProperties,
+} from '../contexts/extension-settings-context';
+import {
+  RequestStatusActionTypes,
+  useRequestStatus,
+} from '../contexts/request-status-context';
+import {getExtensionSettings} from '../util/settings';
+
+import BodyWrapper from '../components/BodyWrapper';
+import ResponseBody from './ResponseBody';
+import PopupHeader from './Header';
+import Loader from '../components/Loader';
+import Form, {CONSTANTS} from './Form';
+
+import styles from './Popup.module.scss';
+
+function Popup(): JSX.Element {
+  const [extensionSettingsState, extensionSettingsDispatch] =
+    useExtensionSettings();
+  const [requestStatusState, requestStatusDispatch] = useRequestStatus();
+  const {reload: liveReloadFlag} = extensionSettingsState;
+
+  // re-renders on `liveReloadFlag` change
+  useEffect((): void => {
+    async function getUserSettings(): Promise<void> {
+      const {settings = {}} = await getExtensionSettings();
+
+      // No API Key set
+      if (
+        !Object.prototype.hasOwnProperty.call(settings, 'apikey') ||
+        (settings.apikey as string) === EMPTY_STRING
+      ) {
+        requestStatusDispatch({
+          type: RequestStatusActionTypes.SET_REQUEST_STATUS,
+          payload: {
+            error: true,
+            message: 'Extension requires an API Key to work',
+          },
+        });
+        requestStatusDispatch({
+          type: RequestStatusActionTypes.SET_LOADING,
+          payload: false,
+        });
+
+        // Open options page
+        setTimeout(() => openExtOptionsPage(), 1300);
+
+        return;
+      }
+
+      let defaultHost: HostProperties = Kutt;
+
+      // If `advanced` field is true
+      if (
+        Object.prototype.hasOwnProperty.call(settings, 'advanced') &&
+        (settings.advanced as boolean)
+      ) {
+        // If `host` field is set
+        if (
+          Object.prototype.hasOwnProperty.call(settings, 'host') &&
+          (settings.host as string)?.trim().length > 0 &&
+          isValidUrl(settings.host as string)
+        ) {
+          defaultHost = {
+            hostDomain:
+              (settings.host as string)
+                .replace('http://', EMPTY_STRING)
+                .replace('https://', EMPTY_STRING)
+                .replace('www.', EMPTY_STRING)
+                .split(/[/?#]/)[0] || EMPTY_STRING,
+            hostUrl: (settings.host as string).endsWith('/')
+              ? (settings.host as string).slice(0, -1)
+              : (settings.host as string),
+          };
+        }
+      }
+
+      // `history` field set - default to true for new users
+      let historyEnabled = true;
+      if (Object.prototype.hasOwnProperty.call(settings, 'history')) {
+        historyEnabled = settings.history as boolean;
+      }
+
+      // options menu
+      const defaultOptions: DomainOptionsProperties[] = [
+        {
+          id: EMPTY_STRING,
+          option: '-- Choose Domain --',
+          value: EMPTY_STRING,
+          disabled: true,
+        },
+        {
+          id: CONSTANTS.DefaultDomainId,
+          option: defaultHost.hostDomain,
+          value: defaultHost.hostDomain,
+          disabled: false,
+        },
+      ];
+
+      // `user` & `apikey` fields exist on storage
+      if (
+        Object.prototype.hasOwnProperty.call(settings, 'user') &&
+        (settings.user as UserSettingsResponseProperties)
+      ) {
+        const {user}: {user: UserSettingsResponseProperties} = settings;
+
+        let optionsList: DomainOptionsProperties[] = user.domains.map(
+          ({id, address, homepage, banned}) => {
+            return {
+              id,
+              option: homepage,
+              value: address,
+              disabled: banned,
+            };
+          }
+        );
+
+        // merge to beginning of array
+        optionsList = defaultOptions.concat(optionsList);
+
+        // update domain list
+        extensionSettingsDispatch({
+          type: ExtensionSettingsActionTypes.HYDRATE_EXTENSION_SETTINGS,
+          payload: {
+            apikey: (settings.apikey as string)?.trim(),
+            domainOptions: optionsList,
+            host: defaultHost,
+            history: historyEnabled,
+            reuse: (settings.reuse as boolean) || false,
+          },
+        });
+      } else {
+        // no `user` but `apikey` exist on storage
+        extensionSettingsDispatch({
+          type: ExtensionSettingsActionTypes.HYDRATE_EXTENSION_SETTINGS,
+          payload: {
+            apikey: (settings.apikey as string)?.trim(),
+            domainOptions: defaultOptions,
+            host: defaultHost,
+            history: historyEnabled,
+            reuse: (settings.reuse as boolean) || false,
+          },
+        });
+      }
+
+      // stop loader
+      requestStatusDispatch({
+        type: RequestStatusActionTypes.SET_LOADING,
+        payload: false,
+      });
+    }
+
+    getUserSettings();
+  }, [liveReloadFlag, extensionSettingsDispatch, requestStatusDispatch]);
+
+  return (
+    <BodyWrapper>
+      <div id="popup" className={styles.popup}>
+        {!requestStatusState.loading ? (
+          <>
+            <PopupHeader />
+            {!isNull(requestStatusState.error) && <ResponseBody />}
+            <Form />
+          </>
+        ) : (
+          <Loader />
+        )}
+      </div>
+    </BodyWrapper>
+  );
+}
+
+export default Popup;

source/Popup/ResponseBody.module.scss

@@ -0,0 +1,62 @@
+@use '../styles/variables' as *;
+
+.popupBody {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem 1rem 0;
+
+  .icon {
+    cursor: pointer;
+    transition: opacity $transition-fast;
+
+    &:hover {
+      opacity: 0.7;
+    }
+
+    svg {
+      stroke: $green-500;
+      stroke-width: 2;
+    }
+  }
+}
+
+.qrIcon {
+  margin: 0;
+  margin-right: 0.4rem;
+}
+
+.copyIcon {
+  margin: 0;
+  margin-right: 0.75rem;
+}
+
+.link {
+  border-bottom: 1px dotted $stats-total-underline;
+  padding-bottom: 2px;
+  color: $gray-700;
+  min-width: 0;
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: $light;
+  cursor: pointer;
+  transition: color $transition-fast;
+
+  &:hover {
+    color: $blue-500;
+  }
+}
+
+.errorMessage {
+  padding-top: 0.25rem;
+  font-size: 0.9375rem;
+  font-weight: $medium;
+  color: $red-500;
+}
+
+.qrCodeContainer {
+  display: flex;
+  justify-content: center;
+  max-width: 100%;
+  padding: 1rem 0 0;
+}

source/Popup/ResponseBody.tsx

@@ -0,0 +1,82 @@
+import CopyToClipboard from 'react-copy-to-clipboard';
+import type {JSX} from 'react';
+import {useState, useEffect} from 'react';
+import {QRCodeSVG} from 'qrcode.react';
+import clsx from 'clsx';
+
+import {useRequestStatus} from '../contexts/request-status-context';
+import {removeProtocol} from '../util/link';
+import Icon from '../components/Icon';
+
+import styles from './ResponseBody.module.scss';
+
+function ResponseBody(): JSX.Element {
+  const [{error, message}] = useRequestStatus();
+  const [copied, setCopied] = useState<boolean>(false);
+  const [QRView, setQRView] = useState<boolean>(false);
+
+  // reset copy message
+  useEffect(() => {
+    let timer: ReturnType<typeof setTimeout> | null = null;
+
+    timer = setTimeout(() => {
+      setCopied(false);
+    }, 1300);
+
+    return (): void => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+  }, [copied]);
+
+  return (
+    <>
+      <div className={styles.popupBody}>
+        {!error ? (
+          <>
+            <Icon
+              className={clsx(styles.icon, styles.qrIcon)}
+              name="qrcode"
+              onClick={(): void => setQRView(!QRView)}
+            />
+
+            {!copied ? (
+              <CopyToClipboard
+                text={message}
+                onCopy={(): void => setCopied(true)}
+              >
+                <Icon
+                  className={clsx(styles.icon, styles.copyIcon)}
+                  name="copy"
+                />
+              </CopyToClipboard>
+            ) : (
+              <Icon
+                className={clsx(styles.icon, styles.copyIcon)}
+                name="tick"
+              />
+            )}
+
+            <CopyToClipboard
+              text={message}
+              onCopy={(): void => setCopied(true)}
+            >
+              <h1 className={styles.link}>{removeProtocol(message)}</h1>
+            </CopyToClipboard>
+          </>
+        ) : (
+          <p className={styles.errorMessage}>{message}</p>
+        )}
+      </div>
+
+      {!error && QRView && (
+        <div className={styles.qrCodeContainer}>
+          <QRCodeSVG size={128} value={message} />
+        </div>
+      )}
+    </>
+  );
+}
+
+export default ResponseBody;

source/Popup/index.tsx

@@ -0,0 +1,24 @@
+import {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+
+import {ExtensionSettingsProvider} from '../contexts/extension-settings-context';
+import {RequestStatusProvider} from '../contexts/request-status-context';
+import Popup from './Popup';
+
+import '../styles/main.scss';
+
+const container = document.getElementById('popup-root');
+if (!container) {
+  throw new Error('Could not find popup-root container');
+}
+
+const root = createRoot(container);
+root.render(
+  <StrictMode>
+    <ExtensionSettingsProvider>
+      <RequestStatusProvider>
+        <Popup />
+      </RequestStatusProvider>
+    </ExtensionSettingsProvider>
+  </StrictMode>
+);

source/Popup/popup.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=500" />
+    <title>Kutt</title>
+  </head>
+  <body>
+    <div id="popup-root"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

source/components/BodyWrapper.module.scss

@@ -0,0 +1,3 @@
+.wrapper {
+  width: 100%;
+}

source/components/BodyWrapper.tsx

@@ -0,0 +1,12 @@
+import type {JSX, ReactNode} from 'react';
+import styles from './BodyWrapper.module.scss';
+
+type WrapperProperties = {
+  children: ReactNode;
+};
+
+function BodyWrapper({children}: WrapperProperties): JSX.Element {
+  return <div className={styles.wrapper}>{children}</div>;
+}
+
+export default BodyWrapper;

source/components/Icon/ChevronDown.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const ChevronDown: React.FC = () => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M6 9l6 6 6-6" />
+  </svg>
+);
+
+export default React.memo(ChevronDown);

source/components/Icon/Clock.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const Clock: React.FC = () => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="clock_svg__feather clock_svg__feather-clock"
+  >
+    <circle cx={12} cy={12} r={10} />
+    <path d="M12 6v6l4 2" />
+  </svg>
+);
+
+export default React.memo(Clock);

source/components/Icon/Copy.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const Copy: React.FC = () => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="copy_svg__feather copy_svg__feather-copy"
+  >
+    <rect x={9} y={9} width={13} height={13} rx={2} ry={2} />
+    <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+  </svg>
+);
+
+export default React.memo(Copy);

source/components/Icon/Cross.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const Cross: React.FC = () => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="x_svg__feather x_svg__feather-x"
+  >
+    <path d="M18 6L6 18M6 6l12 12" />
+  </svg>
+);
+
+export default React.memo(Cross);

source/components/Icon/Eye.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const Eye: React.FC = () => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="eye_svg__feather eye_svg__feather-eye"
+  >
+    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+    <circle cx={12} cy={12} r={3} />
+  </svg>
+);
+
+export default React.memo(Eye);

source/components/Icon/EyeClosed.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const EyeClosed: React.FC = () => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="eye-off_svg__feather eye-off_svg__feather-eye-off"
+  >
+    <path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24M1 1l22 22" />
+  </svg>
+);
+
+export default React.memo(EyeClosed);

source/components/Icon/Icon.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import ChevronDownIcon from './ChevronDown';
+import StarYellowIcon from './StarYellow';
+import EyeClosedIcon from './EyeClosed';
+import StarWhiteIcon from './StarWhite';
+import SettingsIcon from './Settings';
+import RefreshIcon from './Refresh';
+import SpinnerIcon from './Spinner';
+import QRCodeIcon from './QRCode';
+import CrossIcon from './Cross';
+import ClockIcon from './Clock';
+import CopyIcon from './Copy';
+import TickIcon from './Tick';
+import InfoIcon from './Info';
+import ZapIcon from './Zap';
+import EyeIcon from './Eye';
+
+const icons = {
+  'chevron-down': ChevronDownIcon,
+  clock: ClockIcon,
+  copy: CopyIcon,
+  cross: CrossIcon,
+  eye: EyeIcon,
+  'eye-closed': EyeClosedIcon,
+  info: InfoIcon,
+  qrcode: QRCodeIcon,
+  refresh: RefreshIcon,
+  settings: SettingsIcon,
+  spinner: SpinnerIcon,
+  'star-yellow': StarYellowIcon,
+  'star-white': StarWhiteIcon,
+  tick: TickIcon,
+  zap: ZapIcon,
+};
+
+export type Icons = keyof typeof icons;
+
+type Props = {
+  name: Icons;
+  title?: string;
+  stroke?: string;
+  fill?: string;
+  hoverFill?: string;
+  hoverStroke?: string;
+  strokeWidth?: string;
+  className?: string;
+  onClick?: () => void;
+};
+
+const Icon: React.FC<Props> = ({name, ...rest}) => (
+  <div {...rest}>{React.createElement(icons[name])}</div>
+);
+
+export default Icon;

source/components/Icon/Info.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const Info: React.FC = () => (
+  <svg
+    width={14}
+    height={14}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <circle cx="12" cy="12" r="10" />
+    <line x1="12" y1="16" x2="12" y2="12" />
+    <line x1="12" y1="8" x2="12.01" y2="8" />
+  </svg>
+);
+
+export default React.memo(Info);

source/components/Icon/QRCode.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const QRCode: React.FC = () => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="maximize_svg__feather maximize_svg__feather-maximize"
+  >
+    <path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3" />
+  </svg>
+);
+
+export default React.memo(QRCode);

source/components/Icon/Refresh.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const Refresh: React.FC = () => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="refresh-ccw_svg__feather refresh-ccw_svg__feather-refresh-ccw"
+  >
+    <path d="M1 4v6h6M23 20v-6h-6" />
+    <path d="M20.49 9A9 9 0 005.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 013.51 15" />
+  </svg>
+);
+
+export default React.memo(Refresh);

source/components/Icon/Settings.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const Settings: React.FC = () => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="settings_svg__feather settings_svg__feather-settings"
+  >
+    <circle cx={12} cy={12} r={3} />
+    <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" />
+  </svg>
+);
+
+export default React.memo(Settings);

source/components/Icon/Spinner.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+const Spinner: React.FC = () => (
+  <>
+    <svg
+      id="spinner"
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      fill="none"
+      stroke="#b8b8b8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      className="feather feather-loader"
+      viewBox="0 0 24 24"
+    >
+      <path d="M12 2L12 6" />
+      <path d="M12 18L12 22" />
+      <path d="M4.93 4.93L7.76 7.76" />
+      <path d="M16.24 16.24L19.07 19.07" />
+      <path d="M2 12L6 12" />
+      <path d="M18 12L22 12" />
+      <path d="M4.93 19.07L7.76 16.24" />
+      <path d="M16.24 7.76L19.07 4.93" />
+    </svg>
+  </>
+);
+
+export default React.memo(Spinner);

source/components/Icon/StarWhite.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const StarWhite: React.FC = () => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="star_svg__feather star_svg__feather-star"
+  >
+    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+  </svg>
+);
+
+export default React.memo(StarWhite);

source/components/Icon/StarYellow.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const StarYellow: React.FC = () => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 24 24"
+    fill="#ecc94b"
+    stroke="#ecc94b"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="star_svg__feather star_svg__feather-star"
+  >
+    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+  </svg>
+);
+
+export default React.memo(StarYellow);

source/components/Icon/Tick.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const Tick: React.FC = () => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="check_svg__feather check_svg__feather-check"
+  >
+    <path d="M20 6L9 17l-5-5" />
+  </svg>
+);
+
+export default React.memo(Tick);

source/components/Icon/Zap.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const Zap: React.FC = () => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="zap_svg__feather zap_svg__feather-zap"
+  >
+    <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
+  </svg>
+);
+
+export default React.memo(Zap);

source/components/Icon/index.ts

@@ -0,0 +1 @@
+export {default} from './Icon';

source/components/Loader.module.scss

@@ -0,0 +1,10 @@
+.loader {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

source/components/Loader.tsx

@@ -0,0 +1,13 @@
+import type {JSX} from 'react';
+import Icon from './Icon';
+import styles from './Loader.module.scss';
+
+function Loader(): JSX.Element {
+  return (
+    <div className={styles.loader}>
+      <Icon name="spinner" />
+    </div>
+  );
+}
+
+export default Loader;

source/contexts/extension-settings-context.tsx

@@ -0,0 +1,143 @@
+import type {JSX} from 'react';
+import {createContext, useReducer, useContext, type ReactNode} from 'react';
+
+import {Kutt} from '../Background';
+
+export enum ExtensionSettingsActionTypes {
+  HYDRATE_EXTENSION_SETTINGS = 'set-extension-settings',
+  RELOAD_EXTENSION_SETTINGS = 'reload-extension-settings',
+}
+
+export type HostProperties = {
+  hostDomain: string;
+  hostUrl: string;
+};
+
+export type DomainOptionsProperties = {
+  option: string;
+  value: string;
+  id: string;
+  disabled?: boolean;
+};
+
+type HYDRATE_EXTENSION_SETTINGS = {
+  type: ExtensionSettingsActionTypes.HYDRATE_EXTENSION_SETTINGS;
+  payload:
+    | {
+        apikey: string;
+        domainOptions: DomainOptionsProperties[];
+        host: HostProperties;
+        history: boolean;
+        reuse: boolean;
+      }
+    | {
+        apikey: string;
+        host: HostProperties;
+        history: boolean;
+        advanced: boolean;
+        reuse: boolean;
+      };
+};
+
+type RELOAD_EXTENSION_SETTINGS = {
+  type: ExtensionSettingsActionTypes.RELOAD_EXTENSION_SETTINGS;
+  payload: boolean;
+};
+
+type Action = HYDRATE_EXTENSION_SETTINGS | RELOAD_EXTENSION_SETTINGS;
+
+type InitialValues = {
+  apikey: string;
+  domainOptions: DomainOptionsProperties[];
+  host: HostProperties;
+  reload: boolean;
+  history: boolean;
+  advanced: boolean;
+  reuse: boolean;
+};
+
+const initialValues: InitialValues = {
+  apikey: '',
+  domainOptions: [],
+  host: Kutt,
+  reload: false,
+  history: true,
+  advanced: false,
+  reuse: false,
+};
+
+type State = InitialValues;
+type Dispatch = (action: Action) => void;
+
+const ExtensionSettingsStateContext = createContext<State | undefined>(
+  undefined
+);
+const ExtensionSettingsDispatchContext = createContext<Dispatch | undefined>(
+  undefined
+);
+
+function extensionSettingsReducer(state: State, action: Action): State {
+  switch (action.type) {
+    case ExtensionSettingsActionTypes.HYDRATE_EXTENSION_SETTINGS: {
+      return {...state, ...action.payload};
+    }
+
+    case ExtensionSettingsActionTypes.RELOAD_EXTENSION_SETTINGS: {
+      return {...state, reload: action.payload};
+    }
+
+    default:
+      return state;
+  }
+}
+
+function useExtensionSettingsState(): State {
+  const context = useContext(ExtensionSettingsStateContext);
+
+  if (context === undefined) {
+    throw new Error(
+      'useExtensionSettingsState must be used within a ExtensionSettingsProvider'
+    );
+  }
+
+  return context;
+}
+
+function useExtensionSettingsDispatch(): Dispatch {
+  const context = useContext(ExtensionSettingsDispatchContext);
+
+  if (context === undefined) {
+    throw new Error(
+      'useExtensionSettingsDispatch must be used within a ExtensionSettingsProvider'
+    );
+  }
+
+  return context;
+}
+
+function useExtensionSettings(): [State, Dispatch] {
+  // To access const [state, dispatch] = useExtensionSettings()
+  return [useExtensionSettingsState(), useExtensionSettingsDispatch()];
+}
+
+type ExtensionSettingsProviderProps = {
+  children: ReactNode;
+};
+
+function ExtensionSettingsProvider({
+  children,
+}: ExtensionSettingsProviderProps): JSX.Element {
+  const [state, dispatch] = useReducer(extensionSettingsReducer, initialValues);
+
+  return (
+    <>
+      <ExtensionSettingsStateContext.Provider value={state}>
+        <ExtensionSettingsDispatchContext.Provider value={dispatch}>
+          {children}
+        </ExtensionSettingsDispatchContext.Provider>
+      </ExtensionSettingsStateContext.Provider>
+    </>
+  );
+}
+
+export {ExtensionSettingsProvider, useExtensionSettings};

source/contexts/request-status-context.tsx

@@ -0,0 +1,108 @@
+import type {JSX} from 'react';
+import {createContext, useReducer, useContext, type ReactNode} from 'react';
+
+export enum RequestStatusActionTypes {
+  SET_REQUEST_STATUS = 'set-request-status',
+  SET_LOADING = 'set-loading',
+}
+
+type SET_REQUEST_STATUS = {
+  type: RequestStatusActionTypes.SET_REQUEST_STATUS;
+  payload: {
+    error: boolean;
+    message: string;
+  };
+};
+
+type SET_LOADING = {
+  type: RequestStatusActionTypes.SET_LOADING;
+  payload: boolean;
+};
+
+type Action = SET_REQUEST_STATUS | SET_LOADING;
+
+type InitialValues = {
+  loading: boolean;
+  error: boolean | null;
+  message: string;
+};
+
+const initialValues: InitialValues = {
+  loading: true,
+  error: null,
+  message: '',
+};
+
+type State = InitialValues;
+type Dispatch = (action: Action) => void;
+
+const RequestStatusStateContext = createContext<State | undefined>(undefined);
+const RequestStatusDispatchContext = createContext<Dispatch | undefined>(
+  undefined
+);
+
+function requestStatusReducer(state: State, action: Action): State {
+  switch (action.type) {
+    case RequestStatusActionTypes.SET_REQUEST_STATUS: {
+      return {...state, ...action.payload};
+    }
+
+    case RequestStatusActionTypes.SET_LOADING: {
+      return {...state, loading: action.payload};
+    }
+
+    default:
+      return state;
+  }
+}
+
+function useRequestStatusState(): State {
+  const context = useContext(RequestStatusStateContext);
+
+  if (context === undefined) {
+    throw new Error(
+      'useRequestStatusState must be used within a RequestStatusProvider'
+    );
+  }
+
+  return context;
+}
+
+function useRequestStatusDispatch(): Dispatch {
+  const context = useContext(RequestStatusDispatchContext);
+
+  if (context === undefined) {
+    throw new Error(
+      'useRequestStatusDispatch must be used within a RequestStatusProvider'
+    );
+  }
+
+  return context;
+}
+
+function useRequestStatus(): [State, Dispatch] {
+  // To access const [state, dispatch] = useRequestStatus()
+  return [useRequestStatusState(), useRequestStatusDispatch()];
+}
+
+type RequestStatusProviderProps = {
+  children: ReactNode;
+};
+
+function RequestStatusProvider({
+  children,
+}: RequestStatusProviderProps): JSX.Element {
+  const [state, dispatch] = useReducer(requestStatusReducer, initialValues);
+
+  return (
+    <>
+      <RequestStatusStateContext.Provider value={state}>
+        <RequestStatusDispatchContext.Provider value={dispatch}>
+          {children}
+        </RequestStatusDispatchContext.Provider>
+      </RequestStatusStateContext.Provider>
+    </>
+  );
+}
+
+export {RequestStatusProvider, useRequestStatus};

source/contexts/shortened-links-context.tsx

@@ -0,0 +1,115 @@
+import type {JSX} from 'react';
+import {createContext, useContext, useReducer, type ReactNode} from 'react';
+
+import {UserShortenedLinkStats} from '../Background';
+
+export enum ShortenedLinksActionTypes {
+  HYDRATE_SHORTENED_LINKS = 'hydrate-shortened-links',
+  SET_CURRENT_SELECTED = 'set-current-selected',
+}
+
+type HYDRATE_SHORTENED_LINKS = {
+  type: ShortenedLinksActionTypes.HYDRATE_SHORTENED_LINKS;
+  payload: {
+    items: UserShortenedLinkStats[];
+    total: number;
+  };
+};
+
+type SET_CURRENT_SELECTED = {
+  type: ShortenedLinksActionTypes.SET_CURRENT_SELECTED;
+  payload: string;
+};
+
+type Action = HYDRATE_SHORTENED_LINKS | SET_CURRENT_SELECTED;
+
+type InitialValues = {
+  items: UserShortenedLinkStats[];
+  total: number;
+  selected: UserShortenedLinkStats | null;
+};
+
+const initialValues: InitialValues = {
+  items: [],
+  total: 0,
+  selected: null,
+};
+
+type State = InitialValues;
+type Dispatch = (action: Action) => void;
+
+const ShortenedLinksStateContext = createContext<State | undefined>(undefined);
+const ShortenedLinksDispatchContext = createContext<Dispatch | undefined>(
+  undefined
+);
+
+const shortenedLinksReducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case ShortenedLinksActionTypes.HYDRATE_SHORTENED_LINKS: {
+      return {
+        ...state,
+        ...action.payload,
+      };
+    }
+
+    case ShortenedLinksActionTypes.SET_CURRENT_SELECTED: {
+      const selected: null | UserShortenedLinkStats =
+        state.items.filter((item) => item.id === action.payload)[0] || null;
+
+      return {...state, selected};
+    }
+
+    default:
+      return state;
+  }
+};
+
+function useShortenedLinksContextState(): State {
+  const context = useContext(ShortenedLinksStateContext);
+
+  if (context === undefined) {
+    throw new Error(
+      'useShortenedLinksContextState must be used within a ShortenedLinksProvider'
+    );
+  }
+
+  return context;
+}
+
+function useShortenedLinksContextDispatch(): Dispatch {
+  const context = useContext(ShortenedLinksDispatchContext);
+
+  if (context === undefined) {
+    throw new Error(
+      'useShortenedLinksContextDispatch must be used within a ShortenedLinksProvider'
+    );
+  }
+
+  return context;
+}
+
+function useShortenedLinks(): [State, Dispatch] {
+  return [useShortenedLinksContextState(), useShortenedLinksContextDispatch()];
+}
+
+type ShortenedLinksProviderProps = {
+  children: ReactNode;
+};
+
+function ShortenedLinksProvider({
+  children,
+}: ShortenedLinksProviderProps): JSX.Element {
+  const [state, dispatch] = useReducer(shortenedLinksReducer, initialValues);
+
+  return (
+    <>
+      <ShortenedLinksStateContext.Provider value={state}>
+        <ShortenedLinksDispatchContext.Provider value={dispatch}>
+          {children}
+        </ShortenedLinksDispatchContext.Provider>
+      </ShortenedLinksStateContext.Provider>
+    </>
+  );
+}
+
+export {useShortenedLinks, ShortenedLinksProvider};

source/globals.d.ts

@@ -0,0 +1,12 @@
+declare const __DEV__: boolean;
+declare const __TARGET_BROWSER__: 'chrome' | 'firefox';
+
+declare module '*.module.scss' {
+  const classes: {readonly [key: string]: string};
+  export default classes;
+}
+
+declare module '*.scss' {
+  const content: string;
+  export default content;
+}

source/manifest.json

@@ -0,0 +1,52 @@
+{
+  "manifest_version": 3,
+  "name": "Kutt",
+  "version": "0.0.0",
+  "short_name": "Kutt",
+  "description": "Shorten long URLs with just one click.",
+  "icons": {
+    "16": "assets/icons/favicon-16.png",
+    "32": "assets/icons/favicon-32.png",
+    "48": "assets/icons/favicon-48.png",
+    "128": "assets/icons/favicon-128.png"
+  },
+  "homepage_url": "https://github.com/thedevs-network/kutt-extension.git",
+  "__firefox__browser_specific_settings": {
+    "gecko": {
+      "id": "support@kutt.it",
+      "strict_min_version": "112.0",
+      "data_collection_permissions": {
+        "required": ["websiteActivity"],
+        "optional": []
+      }
+    }
+  },
+  "__chrome|firefox__author": "abhijithvijayan",
+  "action": {
+    "default_popup": "Popup/popup.html",
+    "default_icon": {
+      "16": "assets/icons/favicon-16.png",
+      "32": "assets/icons/favicon-32.png",
+      "48": "assets/icons/favicon-48.png",
+      "128": "assets/icons/favicon-128.png"
+    },
+    "default_title": "Shorten this URL"
+  },
+  "background": {
+    "__chrome__service_worker": "assets/js/background.bundle.js",
+    "__chrome__type": "module",
+    "__firefox__scripts": ["assets/js/background.bundle.js"],
+    "__firefox__type": "module"
+  },
+  "__chrome__minimum_chrome_version": "88",
+  "permissions": ["activeTab", "storage"],
+  "host_permissions": ["http://*/*", "https://*/*"],
+  "content_security_policy": {
+    "extension_pages": "script-src 'self'; object-src 'self';"
+  },
+  "__chrome__options_page": "Options/options.html",
+  "options_ui": {
+    "page": "Options/options.html",
+    "open_in_tab": true
+  }
+}

source/styles/_components.scss

@@ -0,0 +1,25 @@
+@use 'variables' as *;
+
+.icon {
+  width: 26px;
+  height: 26px;
+  background-color: rgb(235, 255, 243);
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  position: relative;
+  cursor: pointer;
+  box-shadow: rgba(138, 158, 168, 0.12) 0px 2px 1px;
+  padding: 4px;
+  outline: none;
+  transition: transform 0.4s ease-out 0s;
+  border-radius: 100%;
+
+  svg {
+    transition: all 0.2s ease-out 0s;
+  }
+}
+
+.d-none {
+  display: none !important;
+}

source/styles/_reset.scss

@@ -0,0 +1,67 @@
+// CSS reset
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  height: auto;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  min-height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.5;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button {
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+// Spinner animation (used by Icon component)
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+#spinner {
+  animation: spin 1s linear infinite;
+}

source/styles/_variables.scss

@@ -0,0 +1,48 @@
+// Colors
+$black: #111111;
+$light-black: #0f0f0f;
+$grey-white: #f3f3f3;
+$white: #ffffff;
+
+// Tailwind-like colors
+$gray-200: #e5e7eb;
+$gray-300: #d1d5db;
+$gray-400: #9ca3af;
+$gray-500: #6b7280;
+$gray-600: #4b5563;
+$gray-700: #374151;
+$gray-800: #1f2937;
+$gray-900: #111827;
+$red-500: #ef4444;
+$green-500: #22c55e;
+$green-900: #14532d;
+$blue-500: #3b82f6;
+$indigo-400: #818cf8;
+$purple-600: #9333ea;
+$yellow-500: #eab308;
+
+// Custom colors
+$copy-icon-bg: hsl(144, 100%, 96%);
+$stats-total-underline: hsl(200, 35%, 65%);
+$primary-gradient: linear-gradient(to right, rgb(126, 87, 194), rgb(98, 0, 234));
+
+// Font weights
+$thin: 100;
+$exlight: 200;
+$light: 300;
+$regular: 400;
+$medium: 500;
+$semibold: 600;
+$bold: 700;
+$exbold: 800;
+$exblack: 900;
+
+// Transitions
+$transition-fast: 200ms ease-out;
+$transition-normal: 300ms ease-in-out;
+
+// Border radius
+$radius-sm: 4px;
+$radius-md: 8px;
+$radius-lg: 12px;
+$radius-full: 9999px;

source/styles/main.scss

@@ -0,0 +1,3 @@
+@use 'reset';
+@use 'variables';
+@use 'components';

source/util/browser.ts

@@ -0,0 +1,47 @@
+import {EMPTY_STRING} from '@abhijithvijayan/ts-utils';
+
+// Custom fork of https://github.com/DamonOehlman/detect-browser/blob/master/src/index.ts
+type Browser = 'edge-chromium' | 'chrome' | 'firefox' | 'opera';
+type UserAgentRule = [Browser, RegExp];
+type UserAgentMatch = [Browser, RegExpExecArray] | false;
+
+const userAgentRules: UserAgentRule[] = [
+  ['edge-chromium', /Edg\/([0-9.]+)/],
+  ['chrome', /(?!Chrom.*OPR)Chrom(?:e|ium)\/([0-9.]+)(:?\s|$)/],
+  ['firefox', /Firefox\/([0-9.]+)(?:\s|$)/],
+  ['opera', /Opera\/([0-9.]+)(?:\s|$)/],
+  ['opera', /OPR\/([0-9.]+)(:?\s|$)/],
+];
+
+function matchUserAgent(ua: string): UserAgentMatch {
+  return (
+    ua !== EMPTY_STRING &&
+    userAgentRules.reduce<UserAgentMatch>(
+      (matched: UserAgentMatch, [browser, regex]) => {
+        if (matched) {
+          return matched;
+        }
+
+        const uaMatch = regex.exec(ua);
+        return !!uaMatch && [browser, uaMatch];
+      },
+      false
+    )
+  );
+}
+export function detectBrowser(): Browser | null {
+  const matchedRule = matchUserAgent(navigator.userAgent);
+
+  if (!matchedRule) {
+    return null;
+  }
+
+  const [name, match] = matchedRule;
+
+  let versionParts = match[1] && match[1].split(/[._]/).slice(0, 3);
+  if (!versionParts) {
+    versionParts = [];
+  }
+
+  return name;
+}

source/util/link.ts

@@ -0,0 +1,14 @@
+import {IPV4_REGEX} from '@abhijithvijayan/ts-utils';
+
+export const removeProtocol = (link: string): string =>
+  link.replace(/^https?:\/\//i, '').replace(/^www\./i, '');
+
+export function isValidUrl(url: string): boolean {
+  // https://regex101.com/r/BzoIRR/1
+  const ipRegex = IPV4_REGEX.toString().slice(2, -2);
+  const re = new RegExp(
+    `^(http[s]?:\\/\\/)(www\\.){0,1}(([a-zA-Z0-9.-]+\\.[a-zA-Z]{2,5}[.]{0,1})|(${ipRegex}))`
+  );
+
+  return re.test(url);
+}

source/util/messageUtil.ts

@@ -0,0 +1,14 @@
+import browser from 'webextension-polyfill';
+
+const messageUtil = {
+  send(name: string, params?: unknown): Promise<any> {
+    const data = {
+      action: name,
+      params,
+    };
+
+    return browser.runtime.sendMessage(data);
+  },
+};
+
+export default messageUtil;

source/util/settings.ts

@@ -0,0 +1,38 @@
+import browser from 'webextension-polyfill';
+
+import {DomainEntryProperties} from '../Background';
+
+// Core Extensions settings props
+export type ExtensionSettingsProperties = {
+  apikey: string;
+  history: boolean;
+  user?: {
+    email?: string;
+    domains?: DomainEntryProperties[];
+  } | null;
+};
+
+// update extension settings in browser storage
+export function saveExtensionSettings(settings: any): Promise<void> {
+  return browser.storage.local.set({
+    settings,
+  });
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function getExtensionSettings(): Promise<{[s: string]: any}> {
+  return browser.storage.local.get('settings');
+}
+
+export async function updateExtensionSettings(newFields?: {
+  [s: string]: any;
+}): Promise<void> {
+  const {settings = {}} = await getExtensionSettings();
+
+  return saveExtensionSettings({...settings, ...newFields});
+}
+
+// Clear all extension settings
+export function clearExtensionSettings(): Promise<void> {
+  return browser.storage.local.clear();
+}

source/util/tabs.ts

@@ -0,0 +1,20 @@
+import browser from 'webextension-polyfill';
+import type {Tabs} from 'webextension-polyfill';
+
+export function openExtOptionsPage(): Promise<void> {
+  return browser.runtime.openOptionsPage();
+}
+
+export function openHistoryPage(): Promise<Tabs.Tab> {
+  return browser.tabs.create({
+    active: true,
+    url: '/History/history.html',
+  });
+}
+
+export function getCurrentTab(): Promise<Tabs.Tab[]> {
+  return browser.tabs.query({
+    active: true,
+    lastFocusedWindow: true,
+  });
+}

src/assets/arrow.svg

@@ -1 +0,0 @@
-<svg aria-hidden="true" data-prefix="fas" data-icon="location-arrow" class="svg-inline--fa fa-location-arrow fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M444.52 3.52L28.74 195.42c-47.97 22.39-31.98 92.75 19.19 92.75h175.91v175.91c0 51.17 70.36 67.17 92.75 19.19l191.9-415.78c15.99-38.39-25.59-79.97-63.97-63.97z"></path></svg>

src/assets/copy.svg

@@ -1 +0,0 @@
-<svg aria-hidden="true" data-prefix="far" data-icon="copy" class="svg-inline--fa fa-copy fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"></path></svg>

src/assets/github.svg

@@ -1,2 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5q0 251-146.5 451.5t-378.5 277.5q-27 5-40-7t-13-30q0-3 .5-76.5t.5-134.5q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-119-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-85-13.5q-45 113-8 204-79 87-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-39 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 88.5t.5 54.5q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103zm-477 1103q3-7-7-12-10-3-13 2-3 7 7 12 9 6 13-2zm31 34q7-5-2-16-10-9-16-3-7 5 2 16 10 10 16 3zm30 45q9-7 0-19-8-13-17-6-9 5 0 18t17 7zm42 42q8-8-4-19-12-12-20-3-9 8 4 19 12 12 20 3zm57 25q3-11-13-16-15-4-19 7t13 15q15 6 19-6zm63 5q0-13-17-11-16 0-16 11 0 13 17 11 16 0 16-11zm58-10q-2-11-18-9-16 3-14 15t18 8 14-14z"/></svg>

src/assets/qrcode.svg

@@ -1 +0,0 @@
-<svg aria-hidden="true" data-prefix="fas" data-icon="qrcode" class="svg-inline--fa fa-qrcode fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M0 224h192V32H0v192zM64 96h64v64H64V96zm192-64v192h192V32H256zm128 128h-64V96h64v64zM0 480h192V288H0v192zm64-128h64v64H64v-64zm352-64h32v128h-96v-32h-32v96h-64V288h96v32h64v-32zm0 160h32v32h-32v-32zm-64 0h32v32h-32v-32z"></path></svg>

src/assets/settings.svg

@@ -1 +0,0 @@
-<svg aria-hidden="true" data-prefix="fas" data-icon="cog" class="svg-inline--fa fa-cog fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M444.788 291.1l42.616 24.599c4.867 2.809 7.126 8.618 5.459 13.985-11.07 35.642-29.97 67.842-54.689 94.586a12.016 12.016 0 0 1-14.832 2.254l-42.584-24.595a191.577 191.577 0 0 1-60.759 35.13v49.182a12.01 12.01 0 0 1-9.377 11.718c-34.956 7.85-72.499 8.256-109.219.007-5.49-1.233-9.403-6.096-9.403-11.723v-49.184a191.555 191.555 0 0 1-60.759-35.13l-42.584 24.595a12.016 12.016 0 0 1-14.832-2.254c-24.718-26.744-43.619-58.944-54.689-94.586-1.667-5.366.592-11.175 5.459-13.985L67.212 291.1a193.48 193.48 0 0 1 0-70.199l-42.616-24.599c-4.867-2.809-7.126-8.618-5.459-13.985 11.07-35.642 29.97-67.842 54.689-94.586a12.016 12.016 0 0 1 14.832-2.254l42.584 24.595a191.577 191.577 0 0 1 60.759-35.13V25.759a12.01 12.01 0 0 1 9.377-11.718c34.956-7.85 72.499-8.256 109.219-.007 5.49 1.233 9.403 6.096 9.403 11.723v49.184a191.555 191.555 0 0 1 60.759 35.13l42.584-24.595a12.016 12.016 0 0 1 14.832 2.254c24.718 26.744 43.619 58.944 54.689 94.586 1.667 5.366-.592 11.175-5.459 13.985L444.788 220.9a193.485 193.485 0 0 1 0 70.2zM336 256c0-44.112-35.888-80-80-80s-80 35.888-80 80 35.888 80 80 80 80-35.888 80-80z"></path></svg>

src/manifest.json

@@ -1,28 +0,0 @@
-{
-    "name": "kuttUrl - Shorten URLs",
-    "version": "0.2.0",
-    "description": "URL Shortener",
-    "background": {
-        "scripts": ["js/background.js"],
-        "persistent": false
-    },
-    "permissions": ["tabs", "storage", "clipboardWrite", "clipboardRead"],
-    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
-    "manifest_version": 2,
-    "browser_action": {
-        "default_popup": "popup.html",
-        "default_icon": {
-            "16": "assets/favicon-16.png",
-            "32": "assets/favicon-32.png",
-            "48": "assets/favicon-48.png",
-            "128": "assets/favicon-128.png"
-        }
-    },
-    "options_page": "options.html",
-    "icons": {
-        "16": "assets/favicon-16.png",
-        "32": "assets/favicon-32.png",
-        "48": "assets/favicon-48.png",
-        "128": "assets/favicon-128.png"
-    }
-  }

src/options.html

@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-      <meta charset="UTF-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <meta http-equiv="X-UA-Compatible" content="ie=edge">
-      <title>Options : kuttUrl</title>
-      <link rel="stylesheet" href="css/options.css" />
-  </head>
-  <body>
-      <section id="options">
-        <div class="container options__content--holder">
-          <div class="head__content--holder">
-              <img class="head__content--logo" src="assets/logo.png" /> 
-              <h2 class="head__content--title">kuttUrl</h2>
-          </div>
-          <div class="form__content--holder">
-              <form class="form__content">
-                <label class="api__key--label">API Key:</label>
-                <input class="api__key--holder" id="api__key--value" type="text" />
-                <br>
-                <label class="saved__alert v-none">Saved!!</label>
-                <button class="button__submit" id="button__submit" type="button">Save</button>
-              </form>              
-          </div>
-        </div>
-      </section>
-      
-      <script src="js/options.js"></script>
-  </body>
-</html>

src/popup.html

@@ -1,53 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-      <meta charset="UTF-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <meta http-equiv="X-UA-Compatible" content="ie=edge">
-      <title>kuttUrl</title>
-      <link rel="stylesheet" href="css/popup.css" />
-  </head>
-  <body>
-    <section id="home">
-        <div class="container">
-            <nav class="navbar">
-              <ul class="navbar__main">
-                <li class="logo__content--holder">
-                  <img class="main__logo" src="assets/logo.png">
-                </li>
-                <li class="github__content-holder">
-                  <a href="https://github.com/abhijithvijayan/kuttUrl-Chrome/" target="_blank" rel="noopener" title="GitHub">
-                      <img class="github__logo" src="assets/github.svg"></a>
-                </li>
-                <li class="options__content-holder" id="options__content-holder" title="Options">
-                  <a href="options.html" target="_blank" rel="noopener">
-                      <img class="settings__logo" src="assets/settings.svg"></a>
-                </li>
-              </ul>
-            </nav>
-            <div class="content__holder">
-                <div class="url__content--holder">
-                  <h4 id="url__content-inner">Shortening...</h4>
-                </div>
-                <ul class="buttons__content--holder d-none">
-                  <li class="copy__content--holder">
-                    <img id="button__copy" src="assets/copy.svg" alt="copy" title="Copy"/>
-                  </li>
-                  <li class="details__content--holder">
-                    <img id="button__details" src="assets/arrow.svg" alt="copy" title="Details" />
-                  </li>
-                  <li class="qrbtn__content--holder">
-                    <img id="button__qrcode" src="assets/qrcode.svg" alt="copy" title="QR code" />
-                  </li>
-                </ul>
-                <p class="copy__alert d-none">Copied!!!</p>
-              <div class="qrcode__content--holder d-none">
-                  <img id="qr_code" src="#" alt="QRCode" />
-              </div>
-            </div>
-        </div>
-    </section>
-
-    <script src="js/popup.js"></script>
-  </body>
-</html>

src/scripts/background.js

@@ -1,38 +0,0 @@
-import axios from "axios";
-
-// Shorten url
-async function getShortURL(API_key, URLtoShorten) {
-    let shortLink;
-    const api_url = 'https://cors-anywhere.herokuapp.com/https://kutt.it/api/url/submit';
-    try {
-        const rawData = await axios({
-            method: "POST",
-            url: api_url,
-            headers: { 
-                'X-API-Key': API_key 
-            },
-            data: { target: URLtoShorten }
-        });
-        shortLink = rawData.data.shortUrl;
-    } catch (error) {
-        console.log(error); 
-    }
-    // returns the promise
-    return shortLink;
-};
-
-// Calling function
-chrome.runtime.onMessage.addListener(
-    // receive the message
-    (request, sender, sendResponse) => {
-        if(request.msg == "start") {
-            let shortLink;
-            // consume the promise
-            getShortURL(request.API_key, request.pageUrl).then((data) => {
-                shortLink = data;
-                sendResponse({ shortUrl: `${shortLink}` });
-            });
-            return true;
-        }
-    }
-);

src/scripts/options.js

@@ -1,32 +0,0 @@
-// update UI - API Key on options page load
-document.addEventListener('DOMContentLoaded', () => {
-    // replace the input value with current value on load
-    chrome.storage.local.get(['key'], function(result) {
-        // to string
-        let API_KEY = `${result.key}`;
-        if (API_KEY === 'undefined') {
-            document.getElementById('api__key--value').value = '';
-        } else {
-            document.getElementById('api__key--value').value = API_KEY;
-        }
-    });
-});
-
-
-// Store new API Key on save click
-document.getElementById('button__submit').addEventListener('click', () => {
-    let API_KEY = document.getElementById('api__key--value').value;
-    // store value locally
-    chrome.storage.local.set({key: API_KEY}, function() {
-        console.log('Value is set to ' + API_KEY);
-    });
-});
-
-// Saved Alert
-document.getElementById('button__submit').addEventListener('click', () => {
-    let element = document.querySelector('.saved__alert');
-    element.classList.toggle('v-none');
-    setTimeout(() => {
-        element.classList.toggle('v-none');
-    }, 1300);
-});

src/scripts/popup.js

@@ -1,95 +0,0 @@
-let shortUrl;
-
-document.addEventListener('DOMContentLoaded', () => {
-    
-    // 1. Pass the message and receive response
-    chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, (tabs) => {
-            
-        let longUrl, start, qrcode__src = 'https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=';
-        let API_key;
-
-        longUrl = tabs[0].url;
-        start = longUrl.substr(0, 6);
-        
-        // i) Get api key from options page
-        chrome.storage.local.get(['key'], function(result) {
-
-            API_key = result.key;
-            
-            if(start !== 'chrome' && API_key !== '' && API_key !== undefined) {
-                // send start message to background.js and receive response
-                chrome.runtime.sendMessage({ msg: "start", API_key: `${API_key}`, pageUrl: `${longUrl}` }, (response) => {
-                    // store the shortened link
-                    shortUrl = response.shortUrl;
-                    // invalid response
-                    if(shortUrl === 'undefined') {
-                        document.getElementById('url__content-inner').textContent = "API Error!!";
-                    } else {
-                        // update the content with shortened link
-                        document.getElementById('url__content-inner').textContent = shortUrl;
-                        // fetch qrcode from http://goqr.me
-                        document.getElementById('qr_code').src = `${qrcode__src}${shortUrl}`;
-                        // show buttons                        
-                        toggleDisplay('.buttons__content--holder');
-                    }
-                });
-            }
-            else if (start === 'chrome') {
-                document.getElementById('url__content-inner').textContent = 'Not a Valid URL!!';
-            }
-            else if (API_key === '' || API_key === undefined) {
-                // no api key set
-                document.getElementById('url__content-inner').textContent = 'Set API Key in Settings!';
-            }
-            else {
-                document.getElementById('url__content-inner').textContent = 'Error!!!';
-            }
-
-       });
-
-    });
-
-
-    // 2. Copy Function
-    document.getElementById('button__copy').addEventListener("click", () => {
-        try {
-            let copyTextarea = `${shortUrl}`;
-            let input = document.createElement('textarea');
-            document.body.appendChild(input);
-            input.value = copyTextarea;
-            input.focus();
-            input.select();
-            document.execCommand('copy');
-            input.remove();    
-            toggleDisplay('.copy__alert');
-            setTimeout(() => {
-                toggleDisplay('.copy__alert');
-            }, 1300);
-        } 
-        catch (error) {
-          console.log('Oops, unable to copy');
-        }
-    });
-
-
-    // 3. Details button
-    document.getElementById('button__details').addEventListener('click', () => {
-        let win = window.open(`${shortUrl}+`, '_blank');
-        win.focus();
-    });
-
-
-    // 4. QR Code
-    document.getElementById('button__qrcode').addEventListener('click', () => {
-        // document.getElementById('button__qrcode').style = "display: none;";
-        toggleDisplay('.qrcode__content--holder');
-    });
-
-    
-    // 5. elements visiblity function
-    function toggleDisplay(className) {
-        let element = document.querySelector(className);
-        element.classList.toggle('d-none');
-    }
-
-});

src/styles/_variables.scss

@@ -1,35 +0,0 @@
-@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600');
-
-// Colors
-$color-black:       #111111;
-$color-white:       #ffffff;
-$color-light:       #fcfcfc;
-$color-blue:        #4d5be7;
-$color-light-blue:  #4d5bfa;
-
-$font-montserrat: 'Montserrat', sans-serif;
-
-$font-weight-regular:   400;
-$font-weight-bold:      600;
-
-*, *:before, *:after {
-    box-sizing: border-box;
-}
-
-.d-none {
-    display: none !important;
-}
-
-.v-none {
-    visibility: hidden !important;
-}
-
-html, body {
-    padding: 0;
-    border: 0;
-    margin: 0;
-}
-
-body {
-    font-family: $font-montserrat;
-}