Squashed commit of the following:

commit b9ac70d5f2d6aed711fa9a16a5ae413fef2ef72e
Author: gantrol <[email protected]>
Date:   Tue Feb 21 20:52:58 2023 +0800

    doc: add doc

commit dca2e4030bb9420632ef092d04f6134fc709e90e
Author: gantrol <[email protected]>
Date:   Tue Feb 21 20:52:23 2023 +0800

    feat: welcome export as see

commit 4a416d820fcc07806d1b600efe9be7ead08b0ca2
Author: gantrol <[email protected]>
Date:   Tue Feb 21 20:12:09 2023 +0800

    refactor: remove useless files

commit 3e83e99eefc4a1db98a1803c78561f2d44fd291a
Author: gantrol <[email protected]>
Date:   Tue Feb 21 20:10:16 2023 +0800

    fix: export JSON & MD, Question text trim \n and blank

commit d53c69ce75da47e3beb38d92a0db8fa9fc16c0cf
Author: gantrol <[email protected]>
Date:   Tue Feb 21 19:48:00 2023 +0800

    build: remove no use permission

commit cad0608144e940c8029a9383f347f379370e9986
Author: gantrol <[email protected]>
Date:   Tue Feb 21 19:42:50 2023 +0800

    modified: remove all console.log

commit 350d3b429480fbb74fda8f7fc6ab31eae0b9c5fd
Author: gantrol <[email protected]>
Date:   Tue Feb 21 19:30:18 2023 +0800

    fix: default lang warning

commit 7cf186b17b3e5eec1c26c417638963dacb154f64
Author: gantrol <[email protected]>
Date:   Tue Feb 21 19:17:36 2023 +0800

    chore: update modern-screenshot to 4.4.0

commit 1c13e73c254b45ea278c56fea2c6a047ea2887e3
Author: gantrol <[email protected]>
Date:   Tue Feb 21 19:16:18 2023 +0800

    feat: export 图片的时候过滤welcome

commit 317d6b08597371b46fc75d8ed562a107320424db
Author: gantrol <[email protected]>
Date:   Tue Feb 21 18:17:33 2023 +0800

    refract: add simple config to export, and change four button to two

commit 082be5c84b2c8f443205a856bb750203c3678bd2
Author: gantrol <[email protected]>
Date:   Tue Feb 21 16:22:32 2023 +0800

    modified: hide the input of width of export temporary

commit 4783e3fbaa673cb6429d32c2a43cc65bdb7ecdcf
Author: gantrol <[email protected]>
Date:   Tue Feb 21 16:10:57 2023 +0800

    feat: hidden options for welcome bar and feedback button

commit 2bda58c3338167344a6db8901362496d32a18aae
Author: gantrol <[email protected]>
Date:   Tue Feb 21 14:55:36 2023 +0800

    refract: chromeSyncGet & Set

commit fcebd3b6dc18ef66d4497d6c2a48029776226c46
Author: gantrol <[email protected]>
Date:   Tue Feb 21 12:12:42 2023 +0800

    feat: setting page store & base UI

commit dafd2f39aa8f396305639a0899d43dac00a0a39d
Author: gantrol <[email protected]>
Date:   Tue Feb 21 11:53:54 2023 +0800

    doc: add todo

commit 8c5527082b487e3a51c6f41249e5be8d6f45cb20
Author: gantrol <[email protected]>
Date:   Tue Feb 21 11:53:43 2023 +0800

    refract: remove useless files

commit 46e2472b2fc20f889e97ab4354b3cbf647d08d65
Author: gantrol <[email protected]>
Date:   Tue Feb 21 11:52:33 2023 +0800

    feat: popup page with export settings

commit 30af79dd121a3786a2c07363d81444ebbe1421b7
Author: gantrol <[email protected]>
Date:   Mon Feb 20 10:05:42 2023 +0800

    doc: 修改部分todo

commit 38bb99237b62fb8db80ae419b4ae9854f65b69e9
Author: gantrol <[email protected]>
Date:   Sun Feb 19 09:46:20 2023 +0800

    暂存

commit 62b2acc0612d0d9aef3bb163afbefb706bface36
Author: gantrol <[email protected]>
Date:   Sun Feb 19 09:45:44 2023 +0800

    暂存

content.ts

@@ -1,55 +1,48 @@
-import { Page } from "~uitls/bingPage";
-import { DownloadVisitor } from "~uitls/visitor";
+import { Page } from "~utils/bingPage";
+import { DownloadVisitor } from "~utils/visitor";
 
 import type { PlasmoCSConfig } from "plasmo"
+import { exportActions, Settings } from "~utils/constants";
+import { handleElementVisibility } from "~utils/viewmodel";
 
 export const config: PlasmoCSConfig = {
   matches: ["https://www.bing.com/search*"],
   all_frames: true
 }
 
-
-const PNG = "PNG";
-const JPG = "JPG";
-const MD = "Markdown";
-const JSON = "JSON";
-
-
 const init = async () => {
   await Page.waitForElm("#b_sydConvCont > cib-serp");
-  // remove welcome bar
-  Page.getWelcome().remove();
-  const feedbackGroup = Page.getFeedbackBar();
+  await handleElementVisibility(<HTMLElement>Page.getWelcome(), Settings.WELCOME)
+  const feedbackGroup =Page.getFeedbackBar();
   const feedbackButton = feedbackGroup.querySelector("#fbpgbt");
+
   addButtonGroups(feedbackGroup, feedbackButton);
+
+  await handleElementVisibility(<HTMLElement>feedbackButton, Settings.FEEDBACK, 'block');
 };
 
 
 const addButtonGroups = (actionsArea, WaitingButton) => {
-  // TODO: 加折叠，或者
-  addButton(actionsArea, WaitingButton, PNG);
-  addButton(actionsArea, WaitingButton, JPG);
-  addButton(actionsArea, WaitingButton, JSON);
-  addButton(actionsArea, WaitingButton, MD);
+  // TODO: i18n
+  addButton(actionsArea, WaitingButton, exportActions.ALL);
+  addButton(actionsArea, WaitingButton, exportActions.PREVIEW);
 };
 
-const addButton = (actionsArea, WaitingButton, type) => {
+const addButton = (actionsArea, WaitingButton, action) => {
   const downloadButton = WaitingButton.cloneNode(true);
-  downloadButton.id = `${type}-download-button`;
-  downloadButton.innerText = type;
-
-  const getOnClickByType = (type) => {
-    if (type === PNG) {
-      return DownloadVisitor.forPNG;
-    } else if (type === JPG) {
-      return DownloadVisitor.forJPG;
-    } else if (type === MD) {
-      return DownloadVisitor.forMD;
-    } else if (type === JSON) {
-      return DownloadVisitor.forJSON;
+  downloadButton.id = `${action}-download-button`;
+  downloadButton.innerText = action;
+
+  const getOnClickByAction = (action) => {
+    if (action === exportActions.ALL) {
+      return DownloadVisitor.forAll;
+    } else if (action === exportActions.PREVIEW) {
+      return DownloadVisitor.forPreview;
+    } else {
+      throw new Error(`There is not action type of ${action}`);
     }
   };
-  downloadButton.onclick = getOnClickByType(type);
+  downloadButton.onclick = getOnClickByAction(action);
   actionsArea.appendChild(downloadButton);
 };
 

package.json

@@ -1,18 +1,17 @@
 {
   "name": "bing-chat-saver",
   "displayName": "Bing Chat saver",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Saving Bing Chat for you, for sharing",
   "author": "gantrol",
   "scripts": {
     "dev": "plasmo dev",
     "test": "jest",
     "build": "plasmo build",
-
     "package": "plasmo package"
   },
   "dependencies": {
-    "modern-screenshot": "^4.3.4",
+    "modern-screenshot": "^4.4.0",
     "plasmo": "0.65.0",
     "svelte": "3.55.1",
     "svelte-preprocess": "5.0.1",
@@ -32,6 +31,10 @@
     "typescript": "4.9.4"
   },
   "manifest": {
-    "name": "__MSG_extensionName__"
+    "name": "__MSG_extensionName__",
+    "permissions": [
+      "storage"
+    ],
+    "default_locale": "en"
   }
 }

popup.svelte

@@ -0,0 +1,64 @@
+<script>
+  import { exportTypes } from "~utils/constants";
+  import { exportSettings, feedbackHiddenSetting, welcomeHiddenSetting } from "~utils/store/stores";
+
+  let promises = [
+    exportSettings.init(),
+    welcomeHiddenSetting.init(),
+    feedbackHiddenSetting.init(),
+  ];
+</script>
+
+<div>
+  {#await Promise.all(promises)}
+    <p>Waiting...</p>
+  {:then _}
+    <h3>ExportSettings</h3>
+    <form id="exportSettings">
+<!--      TODO: a table? Or copy figma?-->
+      {#each $exportSettings as message, i}
+        <div>
+          <input type="checkbox" bind:checked={message.on}>
+<!--          <input type="number" min="200" max="3000" bind:value={message.size}>-->
+          <select
+            bind:value="{message.type}">
+            {#each Object.keys(exportTypes) as key}
+              <option value={exportTypes[key]}>
+                {exportTypes[key]}
+              </option>
+            {/each}
+          </select>
+        </div>
+      {/each}
+    </form>
+    <h3>UI Settings</h3>
+    <form id="welcome-hidden-setting">
+      <div>
+        <input type="checkbox" bind:checked={$welcomeHiddenSetting}>
+        Hide welcome bar
+      </div>
+    </form>
+    <form id="feedback-hidden-setting">
+      <div>
+        <input type="checkbox" bind:checked={$feedbackHiddenSetting}>
+        Hide feedback button
+      </div>
+    </form>
+    {:catch err}
+    <p>{err}</p>
+  {/await}
+</div>
+
+<style>
+    div {
+        min-width: 300px;
+        font-size: 15px;
+    }
+
+    input {
+        margin: 5px;
+        outline: none;
+    }
+</style>
+
+

test/parser.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "@jest/globals";
-import { QasJSON2MarkdownParser } from "~uitls/md/parser";
+import { QasJSON2MarkdownParser } from "~utils/md/parser";
 
 
 // TODO: read a file instead

todo.md

@@ -4,25 +4,35 @@
 
 ## main
 
-- [ ] reload chat with JSON 
+- [ ] reload chat with JSON
 - [ ] extension main page for HTML
 - [ ] JSON Viewer (render to HTML)
 
 ## design & modified
 
-- [ ] ButtonGroups，改为Export一个按钮，提供下载选项(popup或类似feedback的小窗口)
-- [ ] 图片默认下载，并且在右下方生成小窗口
-- [ ] ignore element (`.cib-welcome-container`) instead of remove it. May add a option to remove it 
-- [ ] icon 改为箭头
+- [ ] Preview改为在右下方生成小窗口
+- [ ] icon 改为箭头？
 
 ## others
 
 - [ ] CI / CD
 - [ ] test
 - [ ] how to add unittest for shadow-roots?
 - [ ] 改英文文档
+- [ ] markdown add "meta" searching info
 
 ## current
 
-- [ ] 将所有的链接的a的 font-weight: 400
-- [ ] WARN   | default_locale not set, fallback to en
+### main
+
+- [ ] extension main page for HTML -> Plasmo doc for extension's tab
+
+### modified
+
+- [ ] 尝试往导出加一个微软图标
+- [ ] add to zip when download multiply
+- [ ] JS doc
+
+## 废案
+
+- [x] ~~实验录屏 (成果上传不了哔哩哔哩，鸡肋；还不如Windows + Alt + R)~~

uitls/bingPage.ts → utils/bingPage.ts

@@ -51,7 +51,6 @@ export class Page {
     const groups_roots = Page.getQAsElement();
     for (const groups_root of groups_roots) {
       for (let group of groups_root.shadowRoot.querySelectorAll("cib-message-group")) {
-        console.log(`setFontWeightForAllRefs: ${group}`);
         // check user or bot
         if (group.getAttribute("source") === "bot") {
           // Answer
@@ -90,6 +89,7 @@ export class Page {
     });
   };
 
+
   static getQAsJSON = () => {
     const qas = new QAList(Page.getQAsElement());
     return qas.qaList;
@@ -158,7 +158,7 @@ export class QAList {
         // Question, source is user
         const html = group.shadowRoot.querySelector("cib-message")
           .shadowRoot.querySelector("div.content");
-        QA.questions.push({ text: html.textContent });
+        QA.questions.push({ text: html.textContent?.trim() });
       }
     }
     return QA;

utils/constants.ts

@@ -0,0 +1,23 @@
+export const PNG = "PNG导出";
+export const JPG = "JPG";
+export const MD = "Markdown";
+export const JSON_STR = "JSON";
+
+export const exportTypes = {
+  PNG,
+  JPG,
+  MD,
+  JSON: JSON_STR,
+}
+
+export const exportActions = {
+  ALL: 'Export All',
+  PREVIEW: 'Preview',
+}
+
+
+export const Settings = {
+  WELCOME: "welcome-settings",
+  FEEDBACK: "feedback-settings",
+  EXPORT: "export-settings",
+}

uitls/md/parser.ts → utils/md/parser.ts

@@ -1,4 +1,4 @@
-import { getNowWithFormat } from "~uitls/time";
+import { getNowWithFormat } from "~utils/time";
 
 export {};
 

utils/store/chrome.ts

@@ -0,0 +1,34 @@
+import { writable } from "svelte/store";
+
+
+export const chromeSyncStorage = <T>(key: string, initial: T) => {
+  const { subscribe, set, update } = writable<T>(initial);
+
+  return {
+    subscribe,
+    set: (value: T) => {
+      chromeSyncSet(key, value)
+      return set(value);
+    },
+    update,
+    init: async () => {
+      const result = await chromeSyncGet(key);
+      if (result === null || result === undefined) {
+        await chromeSyncSet(key, initial);
+      }
+      const saved = await chromeSyncGet(key);
+      set(saved);
+    }
+  };
+};
+
+export const chromeSyncGet = async (key: string) => {
+  const obj = await chrome.storage.sync.get([key]);
+  return obj[key];
+};
+
+export const chromeSyncSet = async <T>(key: string, value: T) => {
+  const setObj = {};
+  setObj[key] = value;
+  await chrome.storage.sync.set(setObj);
+};

utils/store/localStore.ts

@@ -0,0 +1,25 @@
+import { writable } from 'svelte/store'
+import type { JsonValue } from '~utils/types/json.type'
+
+// from: https://svelte.dev/repl/d78d7327830442ab87cc47bcee1033f9?version=3.43.1
+export const localStore = <T extends JsonValue>(key: string, initial: T) => {          // receives the key of the local storage and an initial value
+  const toString = (value: T) => JSON.stringify(value, null, 2)           // helper function
+  const toObj = JSON.parse                                                // helper function
+
+  if (localStorage.getItem(key) === null) {                               // item not present in local storage
+    localStorage.setItem(key, toString(initial))                          // initialize local storage with initial value
+  }
+
+  const saved = toObj(localStorage.getItem(key))                          // convert to object
+
+  const { subscribe, set, update } = writable<T>(saved)                   // create the underlying writable store
+
+  return {
+    subscribe,
+    set: (value: T) => {
+      localStorage.setItem(key, toString(value))                          // save also to local storage as a string
+      return set(value)
+    },
+    update
+  }
+}

utils/store/stores.ts

@@ -0,0 +1,20 @@
+import { exportTypes, Settings } from "~utils/constants";
+// import { localStore } from "~utils/store/localStore";
+import { chromeSyncStorage } from "~utils/store/chrome";
+
+const defaultSize = 300;
+
+const defaultNewExportSetting = { on: true, size: defaultSize, type: exportTypes.PNG };
+const defaultExportSettings = [
+  { id: 1, ...defaultNewExportSetting},
+  { id: 2, on: false, size: defaultSize, type: exportTypes.JPG },
+  { id: 3, on: false, size: defaultSize, type: exportTypes.MD },
+  { id: 4, on: false, size: defaultSize, type: exportTypes.JSON }
+];
+
+
+// export const exportSettings = localStore("export-settings", defaultExportSettings);
+export const exportSettings = chromeSyncStorage(Settings.EXPORT, defaultExportSettings);
+
+export const welcomeHiddenSetting =  chromeSyncStorage(Settings.WELCOME, true);
+export const feedbackHiddenSetting =  chromeSyncStorage(Settings.FEEDBACK, false);

utils/types/json.type.ts

@@ -0,0 +1 @@
+export type JsonValue = string | number | boolean | null | JsonValue[] | { [key: string]: JsonValue }