2 files changed, 55 insertions, 0 deletions
diff --git a/src/popup/popup.html b/src/popup/popup.html
new file mode 100644
index 0000000..808bc9e
--- /dev/null
+++ b/src/popup/popup.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>AI Prompt</title>
+    <style>
+      body {
+        font-family: sans-serif;
+        padding: 10px;
+      }
+      textarea {
+        width: 100%;
+        height: 120px;
+      }
+      button {
+        margin-top: 8px;
+        padding: 6px 12px;
+      }
+      pre {
+        background: #f5f5f5;
+        padding: 6px;
+        max-height: 200px;
+        overflow: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <h3>Enter Prompt</h3>
+    <textarea id="prompt"></textarea>
+    <br />
+    <button id="send">Show Compose Context</button>
+    <pre id="output">No data yet</pre>
+
+    <script src="../browser-polyfill.js"></script>
+    <script src="popup.js"></script>
+  </body>
+</html>
diff --git a/src/popup/popup.ts b/src/popup/popup.ts
new file mode 100644
index 0000000..78866e9
--- /dev/null
+++ b/src/popup/popup.ts
@@ -0,0 +1,18 @@
+type Payload = {
+  prompt: string;
+  context: any;
+};
+
+const promptEl: HTMLTextAreaElement = document.getElementById("prompt") as HTMLTextAreaElement;
+const sendBtn: HTMLButtonElement = document.getElementById("send") as HTMLButtonElement;
+const outputEl: HTMLElement = document.getElementById("output") as HTMLElement;
+
+sendBtn.addEventListener("click", async (): Promise<void> => {
+  const ctx: any = await browser.runtime.sendMessage({ type: "getComposeContext" });
+  const payload: Payload = {
+    prompt: promptEl.value,
+    context: ctx,
+  };
+  outputEl.textContent = JSON.stringify(payload, null, 2);
+  alert(JSON.stringify(payload, null, 2));
+});