feat: add form_saver

2024-10-04 13:12:03 +09:00
parent 1a7e70272c
commit e7b316be7a
10 changed files with 1044 additions and 5 deletions
--- a/popup/index.html
+++ b/popup/index.html
@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/popup/main.css">
+    <title>Koishi Form Saver</title>
+  </head>
+  <body>
+
+    <h2>Form Saver</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>url</th>
+          <th>content</th>
+          <th>action</th>
+        </tr>
+      </thead>
+      <tbody id="render_point">
+
+      </tbody>
+    </table>
+
+    <button id="save">Save!!</button>
+    <script src="/popup/main.js"></script>
+  </body>
+</html>
--- a/popup/main.css
+++ b/popup/main.css
@ -0,0 +1,34 @@
+:root {
+  background-color: #212121;
+  color: #fafafa;
+
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+body {
+  padding: 10px;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  font-size: 14px;
+}
+
+table {
+  user-select: none;
+}
+
+button {
+  background-color: #626262;
+  padding: 2px 5px;
+  color: #fafafa;
+  border: none;
+  outline: 1px solid #af7d85;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+button:hover {  
+  background-color: #838383;
+}
--- a/popup/main.ts
+++ b/popup/main.ts
@ -0,0 +1,83 @@
+import { CommunicateMessage, FormSavedData } from '../types'
+
+void (async () => {
+  const api = browser ?? chrome
+
+  const [tab] = await api.tabs.query({
+    active: true,
+    currentWindow: true
+  })
+
+  if (tab.url === undefined) {
+    document.body.innerText = 'Extension disabled on this page'
+    return
+  }
+
+  if (localStorage.getItem('form_saved') === null) { localStorage.setItem('form_saved', '[]') }
+
+  document.getElementById('save')?.addEventListener('click', () => {
+    void (async () => {
+      const formSaved: CommunicateMessage = await api.tabs.sendMessage(tab.id ?? 0, {
+        type: 'SAVE_FORM'
+      })
+
+      if (formSaved.type !== 'FORM_SAVED') { return }
+
+      const prevSaved = JSON.parse(localStorage.getItem('form_saved') ?? '') as Array<FormSavedData & { id: string }>
+      const newSaved = JSON.stringify([
+        {
+          id: crypto.randomUUID(),
+          ...formSaved.data
+        },
+        ...prevSaved.slice(0, 10)
+      ])
+
+      localStorage.setItem('form_saved', newSaved)
+
+      renderTable()
+    })()
+  })
+
+  renderTable()
+  function renderTable (): void {
+    const formSaved = JSON.parse(localStorage.getItem('form_saved') ?? '') as Array<FormSavedData & { id: string }>
+    const renderPoint = document.getElementById('render_point')
+
+    if (renderPoint === null) {
+      return
+    }
+
+    renderPoint.innerHTML = ''
+
+    for (const form of formSaved) {
+      renderPoint.innerHTML += `
+        <tr>
+          <td>${form.id.substring(0, 8)}</td>
+          <td>${new URL(form.url).pathname}${new URL(form.url).hash}</td>
+          <td>${form.contents.filter((v) => v.type === 'TEXT').length} Texts</td>
+          <td>
+            <button id="load-${form.id}">Load</button>
+            <button id="delete-${form.id}">x</button>
+          </td>
+        </tr>
+      `
+    }
+
+    for (const form of formSaved) {
+      document.getElementById(`load-${form.id}`)?.addEventListener('click', () => {
+        void api.tabs.sendMessage<CommunicateMessage>(tab.id ?? 0, {
+          type: 'LOAD_FORM',
+          data: form
+        })
+      })
+
+      document.getElementById(`delete-${form.id}`)?.addEventListener('click', () => {
+        const prevSaved = JSON.parse(localStorage.getItem('form_saved') ?? '') as Array<FormSavedData & { id: string }>
+        const newSaved = JSON.stringify(prevSaved.filter((v) => v.id !== form.id))
+
+        localStorage.setItem('form_saved', newSaved)
+        renderTable()
+      })
+    }
+  }
+})()