web-extension 0.0.0-stage → 2.0.0

package/templates/features/extras/storage/ts/src/lib/storage.ts

@@ -0,0 +1,15 @@
+import { api } from './browser';
+
+export async function getStorage<T = any>(key: string, defaultValue?: T): Promise<T | undefined> {
+  const result = await api.storage.local.get(key);
+  return (result[key] as T) ?? defaultValue;
+}
+
+export async function setStorage<T = any>(key: string, value: T): Promise<void> {
+  await api.storage.local.set({ [key]: value });
+}
+
+export async function removeStorage(key: string): Promise<void> {
+  await api.storage.local.remove(key);
+}
+

package/templates/features/newtab/js/src/newtab/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>New Tab</title>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <h1>Welcome to {{name}}</h1>
+      <p id="time"></p>
+    </div>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>
+

package/templates/features/newtab/js/src/newtab/main.js

@@ -0,0 +1,8 @@
+const timeElem = document.getElementById('time');
+if (timeElem) {
+  timeElem.textContent = new Date().toLocaleTimeString();
+  setInterval(() => {
+    timeElem.textContent = new Date().toLocaleTimeString();
+  }, 1000);
+}
+

package/templates/features/newtab/js/src/newtab/style.css

@@ -0,0 +1,30 @@
+body {
+  margin: 0;
+  display: flex;
+  min-height: 100vh;
+  align-items: center;
+  justify-content: center;
+  font-family: system-ui, -apple-system, sans-serif;
+  color: #1f2937;
+  background-color: #f3f4f6;
+}
+
+.container {
+  text-align: center;
+  padding: 32px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+  margin: 0 0 12px 0;
+  font-size: 1.5rem;
+}
+
+#time {
+  font-size: 1.25rem;
+  color: #4b5563;
+  margin: 0;
+}
+

package/templates/features/newtab/ts/src/newtab/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>New Tab</title>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <h1>Welcome to {{name}}</h1>
+      <p id="time"></p>
+    </div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>
+

package/templates/features/newtab/ts/src/newtab/main.ts

@@ -0,0 +1,8 @@
+const timeElem = document.getElementById('time');
+if (timeElem) {
+  timeElem.textContent = new Date().toLocaleTimeString();
+  setInterval(() => {
+    timeElem.textContent = new Date().toLocaleTimeString();
+  }, 1000);
+}
+

package/templates/features/newtab/ts/src/newtab/style.css

@@ -0,0 +1,30 @@
+body {
+  margin: 0;
+  display: flex;
+  min-height: 100vh;
+  align-items: center;
+  justify-content: center;
+  font-family: system-ui, -apple-system, sans-serif;
+  color: #1f2937;
+  background-color: #f3f4f6;
+}
+
+.container {
+  text-align: center;
+  padding: 32px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+  margin: 0 0 12px 0;
+  font-size: 1.5rem;
+}
+
+#time {
+  font-size: 1.25rem;
+  color: #4b5563;
+  margin: 0;
+}
+

package/templates/features/options/js/src/options/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{name}} Options</title>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <h1>{{name}} Options</h1>
+      <label>
+        <input type="checkbox" id="enabled" />
+        Enable feature
+      </label>
+      <div id="status"></div>
+    </div>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>
+

package/templates/features/options/js/src/options/main.js

@@ -0,0 +1,11 @@
+import { api } from '../lib/browser.js';
+
+const checkbox = /** @type {HTMLInputElement | null} */ (document.getElementById('enabled'));
+const status = document.getElementById('status');
+
+checkbox?.addEventListener('change', () => {
+  if (status) {
+    status.textContent = checkbox.checked ? 'Setting enabled' : 'Setting disabled';
+  }
+});
+

package/templates/features/options/js/src/options/style.css

@@ -0,0 +1,37 @@
+body {
+  max-width: 600px;
+  margin: 32px auto;
+  padding: 0 16px;
+  font-family: system-ui, -apple-system, sans-serif;
+  color: #1f2937;
+  background-color: #f9fafb;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  background-color: #ffffff;
+  padding: 24px;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+  font-size: 1.25rem;
+  margin: 0;
+}
+
+label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 0.95rem;
+}
+
+#status {
+  font-size: 0.875rem;
+  color: #4b5563;
+}
+

package/templates/features/options/ts/src/options/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{name}} Options</title>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <h1>{{name}} Options</h1>
+      <label>
+        <input type="checkbox" id="enabled" />
+        Enable feature
+      </label>
+      <div id="status"></div>
+    </div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>
+

package/templates/features/options/ts/src/options/main.ts

@@ -0,0 +1,11 @@
+import { api } from '../lib/browser';
+
+const checkbox = document.getElementById('enabled') as HTMLInputElement | null;
+const status = document.getElementById('status');
+
+checkbox?.addEventListener('change', () => {
+  if (status) {
+    status.textContent = checkbox.checked ? 'Setting enabled' : 'Setting disabled';
+  }
+});
+

package/templates/features/options/ts/src/options/style.css

@@ -0,0 +1,37 @@
+body {
+  max-width: 600px;
+  margin: 32px auto;
+  padding: 0 16px;
+  font-family: system-ui, -apple-system, sans-serif;
+  color: #1f2937;
+  background-color: #f9fafb;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  background-color: #ffffff;
+  padding: 24px;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+  font-size: 1.25rem;
+  margin: 0;
+}
+
+label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 0.95rem;
+}
+
+#status {
+  font-size: 0.875rem;
+  color: #4b5563;
+}
+

package/templates/features/popup/js/src/popup/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Popup</title>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <h1>{{name}}</h1>
+      <p id="status">Extension popup loaded.</p>
+      <button id="btn">Click me</button>
+    </div>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>
+

package/templates/features/popup/js/src/popup/main.js

@@ -0,0 +1,9 @@
+import { api } from '../lib/browser.js';
+
+document.getElementById('btn')?.addEventListener('click', () => {
+  const status = document.getElementById('status');
+  if (status) {
+    status.textContent = 'Button clicked!';
+  }
+});
+

package/templates/features/popup/js/src/popup/style.css

@@ -0,0 +1,39 @@
+body {
+  width: 280px;
+  margin: 0;
+  padding: 16px;
+  font-family: system-ui, -apple-system, sans-serif;
+  color: #1f2937;
+  background-color: #f9fafb;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+h1 {
+  font-size: 1.1rem;
+  margin: 0;
+}
+
+p {
+  font-size: 0.875rem;
+  margin: 0;
+}
+
+button {
+  padding: 8px 12px;
+  font-size: 0.875rem;
+  color: #ffffff;
+  background-color: #3b82f6;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #2563eb;
+}
+

package/templates/features/popup/ts/src/popup/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Popup</title>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <h1>{{name}}</h1>
+      <p id="status">Extension popup loaded.</p>
+      <button id="btn">Click me</button>
+    </div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>
+

package/templates/features/popup/ts/src/popup/main.ts

@@ -0,0 +1,9 @@
+import { api } from '../lib/browser';
+
+document.getElementById('btn')?.addEventListener('click', () => {
+  const status = document.getElementById('status');
+  if (status) {
+    status.textContent = 'Button clicked!';
+  }
+});
+

package/templates/features/popup/ts/src/popup/style.css

@@ -0,0 +1,39 @@
+body {
+  width: 280px;
+  margin: 0;
+  padding: 16px;
+  font-family: system-ui, -apple-system, sans-serif;
+  color: #1f2937;
+  background-color: #f9fafb;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+h1 {
+  font-size: 1.1rem;
+  margin: 0;
+}
+
+p {
+  font-size: 0.875rem;
+  margin: 0;
+}
+
+button {
+  padding: 8px 12px;
+  font-size: 0.875rem;
+  color: #ffffff;
+  background-color: #3b82f6;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #2563eb;
+}
+

package/templates/features/sidepanel/js/src/sidepanel/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Side Panel</title>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <h1>{{name}} Side Panel</h1>
+      <p id="info">Side panel content loaded.</p>
+    </div>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>
+

package/templates/features/sidepanel/js/src/sidepanel/main.js

@@ -0,0 +1,7 @@
+import { api } from '../lib/browser.js';
+
+const info = document.getElementById('info');
+if (info) {
+  info.textContent = 'Side panel initialized.';
+}
+

package/templates/features/sidepanel/js/src/sidepanel/style.css

@@ -0,0 +1,25 @@
+body {
+  margin: 0;
+  padding: 16px;
+  font-family: system-ui, -apple-system, sans-serif;
+  color: #1f2937;
+  background-color: #f9fafb;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+h1 {
+  font-size: 1.1rem;
+  margin: 0;
+}
+
+p {
+  font-size: 0.875rem;
+  margin: 0;
+  color: #4b5563;
+}
+

package/templates/features/sidepanel/ts/src/sidepanel/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Side Panel</title>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <h1>{{name}} Side Panel</h1>
+      <p id="info">Side panel content loaded.</p>
+    </div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>
+

package/templates/features/sidepanel/ts/src/sidepanel/main.ts

@@ -0,0 +1,7 @@
+import { api } from '../lib/browser';
+
+const info = document.getElementById('info');
+if (info) {
+  info.textContent = 'Side panel initialized.';
+}
+

package/templates/features/sidepanel/ts/src/sidepanel/style.css

@@ -0,0 +1,25 @@
+body {
+  margin: 0;
+  padding: 16px;
+  font-family: system-ui, -apple-system, sans-serif;
+  color: #1f2937;
+  background-color: #f9fafb;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+h1 {
+  font-size: 1.1rem;
+  margin: 0;
+}
+
+p {
+  font-size: 0.875rem;
+  margin: 0;
+  color: #4b5563;
+}
+

package/templates/js/src/lib/browser.js

@@ -0,0 +1,9 @@
+/**
+ * Cross-browser WebExtension API accessor.
+ * Supports standard browser.* and chrome.* namespaces.
+ */
+export const api =
+  typeof globalThis.browser !== 'undefined'
+    ? globalThis.browser
+    : globalThis.chrome;
+

package/templates/ts/src/lib/browser.ts

@@ -0,0 +1,9 @@
+/**
+ * Cross-browser WebExtension API accessor.
+ * Supports standard browser.* and chrome.* namespaces.
+ */
+export const api: typeof chrome =
+  typeof (globalThis as any).browser !== 'undefined'
+    ? (globalThis as any).browser
+    : (globalThis as any).chrome;
+