check in dist for testing

.gitignore

@@ -5,7 +5,6 @@ yarn-error.log
 package-lock.json  # Optional: include if you use yarn or want to lock versions separately
 
 # Build output
-dist/
 build/
 worker/build
 *.bundle.js

dist/frontend/styles.css

@@ -0,0 +1,220 @@
+/* Define the IBM Plex Mono font */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  src: url('./fonts/IBMPlexMono-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+body {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+}
+
+/* Base styles for widget containers */
+.container {
+  position: absolute;
+  -moz-box-sizing: border-box; 
+  -webkit-box-sizing: border-box; 
+  box-sizing: border-box;
+  z-index: 0;
+  container-type: size;
+  overflow: hidden;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+.globalsettings {
+  overflow: visible !important;
+  padding: 0px !important;
+}
+
+.aero {
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-color: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+
+/* Styles for the close button */
+.close-button {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: #ccc;
+  color: #fff;
+  font-size: 12px;
+  line-height: 16px;
+  text-align: center;
+  cursor: pointer;
+}
+
+/* Styles for the settings button */
+.settings-button {
+  position: absolute;
+  top: 5px;
+  right: 25px;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: #ccc;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.settings-button:hover {
+  background: #666;
+}
+
+.settings-button:active {
+  background: #333;
+}
+
+
+.accept-button {
+  margin-top: 10px;
+  padding: 5px 10px;
+  background: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.accept-button:hover {
+  background: #0056b3;
+}
+
+.widget-modal-content .seconds-toggle,
+.widget-modal-content .hours-toggle {
+  text-align: left;
+  color: #333;
+}
+
+.widget-modal-content input[type="checkbox"] {
+  margin-right: 5px;
+  vertical-align: middle;
+}
+
+/* Settings toggle (cogwheel for main settings) */
+.settings-toggle {
+  background: rgba(255, 255, 255, 0.2);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  left:0; 
+  top:0; 
+  width:100%; 
+  height:100%;
+}
+
+
+.settings-toggle:hover {
+  background: rgba(255, 255, 255, 0.4);
+}
+
+/* Main settings modal */
+.settings-modal {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: rgba(255, 255, 255, 0.9);
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  width: 800px;
+  text-align: center;
+}
+
+.modal-content h2 {
+  margin-top: 0;
+  color: #333;
+}
+
+.modal-content label {
+  display: block;
+  margin: 15px 0;
+  color: #333;
+}
+
+.modal-content .slider {
+  display: block;
+  margin: 10px auto;
+}
+
+.widget-buttons {
+  margin: 15px 0;
+}
+
+.widget-buttons button {
+  margin: 5px;
+  padding: 5px 10px;
+  background: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.widget-buttons button:hover {
+  background: #0056b3;
+}
+
+.close-modal {
+  padding: 5px 10px;
+  background: #ccc;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.close-modal:hover {
+  background: #999;
+}
+
+/* Grid overlay */
+.grid-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 500;
+}
+
+.grid-line {
+  position: absolute;
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.grid-line.vertical {
+  width: 1px;
+  height: 100%;
+}
+
+.grid-line.horizontal {
+  width: 100%;
+  height: 1px;
+}

dist/frontend/utab.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" style="height: 100%; margin: 0; padding: 0;">
+<head>
+  <meta charset="UTF-8">
+  <title>New Tab</title>
+  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="widget-styles.css">
+</head>
+<body style="height: 100%; margin: 0; padding: 0;">
+  <div id="root"></div>
+  <script src="index.js"></script>
+</body>
+</html>

dist/frontend/widget-styles.css

@@ -0,0 +1,58 @@
+@font-face {
+    font-family: 'IBM Plex Mono';
+    src: url('./fonts/IBMPlexMono-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+}
+
+.clock {
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+/* Styles for ClockWidget time display */
+.clock>.time {
+    color: #ffffff;
+    font-size: 48px;
+    font-family: 'IBM Plex Mono', monospace;
+    text-align: center;
+    font-size: 50cqmin;
+}
+
+.clock>.timezone {
+    font-size: small;
+    text-align: center;
+    color: #ffffff;
+    font-size: 15cqmin;
+}
+
+/* Styles for ClockWidget time display */
+.quote>.quote-text {
+    color: #AEAEAE;
+    font-style: italic;
+    text-align: center;
+    font-size: 25cqmin;
+}
+
+.quote>.author {
+    font-size: small;
+    text-align: center;
+    color: #AEAEAE;
+    font-size: 15cqh;
+}
+
+/* Styles for SearchWidget */
+.search form {
+    display: flex;
+    justify-content: center;
+}
+
+.search form input[type="text"] {
+    width: 100%;
+    padding: 5px;
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    border-radius: 4px;
+    background: rgba(255, 255, 255, 1);
+    color: #000;
+}

dist/manifest.json

@@ -0,0 +1,27 @@
+{
+  "manifest_version": 3,
+  "name": "Custom New Tab",
+  "version": "0.0.1",
+  "description": "Customizable new tab page with background and search",
+  "chrome_url_overrides": {
+    "newtab": "frontend/utab.html"
+  },
+  "permissions": [
+    "storage",
+    "unlimitedStorage"
+  ],
+  "optional_permissions": [],
+  "host_permissions": [
+    "https://zenquotes.io/*"
+  ],
+  "icons": {
+    "128": "icon.png"
+  },
+  "incognito": "split",
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "addon@example.com",
+      "strict_min_version": "58.0"
+    }
+  }
+}

dist/worker/main.js

@@ -0,0 +1,2 @@
+"use strict";(()=>{var i={writeFile:(n,t)=>"OK",writeFileAsync:async(n,t)=>"async OK"};chrome.runtime.onMessage.addListener((n,t,r)=>{let e=i[n.endpoint].apply(void 0,n.args);if(e instanceof Promise)return e.then(s=>{r(s)}),!0;if(e!==void 0)return r(e),!0});})();
+//# sourceMappingURL=main.js.map

dist/worker/main.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/worker/Endpoints.ts", "../../src/worker/main.ts"],
+  "sourcesContent": ["export const ExposedEndpoints = {\n    writeFile: (filename: string, fileContent: string) => {\n        return \"OK\"\n    },\n\n    writeFileAsync: async (path: string, fileContent: string) => {\n        return \"async OK\"\n    }\n} as const;", "import { ExposedEndpoints } from \"./Endpoints\";\n\nchrome.runtime.onMessage.addListener((param: { endpoint: keyof typeof ExposedEndpoints, args: any }, sender, sendReponse) => {\n    const returnValue = (ExposedEndpoints[param.endpoint] as Function).apply(undefined, param.args)\n    if(returnValue instanceof Promise){\n        returnValue.then(value => {\n            sendReponse(value)\n        })\n        return true;\n    }\n    if(returnValue !== undefined){\n        sendReponse(returnValue)\n        return true;\n    }\n});"],
+  "mappings": "mBAAO,IAAMA,EAAmB,CAC5B,UAAW,CAACC,EAAkBC,IACnB,KAGX,eAAgB,MAAOC,EAAcD,IAC1B,UAEf,ECNA,OAAO,QAAQ,UAAU,YAAY,CAACE,EAA+DC,EAAQC,IAAgB,CACzH,IAAMC,EAAeC,EAAiBJ,EAAM,QAAQ,EAAe,MAAM,OAAWA,EAAM,IAAI,EAC9F,GAAGG,aAAuB,QACtB,OAAAA,EAAY,KAAKE,GAAS,CACtBH,EAAYG,CAAK,CACrB,CAAC,EACM,GAEX,GAAGF,IAAgB,OACf,OAAAD,EAAYC,CAAW,EAChB,EAEf,CAAC",
+  "names": ["ExposedEndpoints", "filename", "fileContent", "path", "param", "sender", "sendReponse", "returnValue", "ExposedEndpoints", "value"]
+}