release: v0.0.2

- 修复引用分行的问题 - 重构项目 - 修改部分文档
gantrol · Feb 15, 2023 · 03dbd4a · 03dbd4a
1 parent f8a8c79
commit 03dbd4a
Show file tree

Hide file tree

Showing 7 changed files with 255 additions and 103 deletions.
diff --git a/content.ts b/content.ts
@@ -1,66 +1,26 @@
-import { domToJpeg, domToPng } from "modern-screenshot";
+import { Page } from "~uitls/bingPage";
+import { DownloadVisitor } from "~uitls/visitor";
+
+
 const PNG = "PNG";
-const JPG = "JPG"
+const JPG = "JPG";
 const MD = "Markdown";
 const JSON = "JSON";
 
-const init = async () => {
-  await waitForElm("#b_sydConvCont > cib-serp");
-  const whole = getWhole();
-  const main = getMain();
-  document.querySelector("#b_sydConvCont > cib-serp").shadowRoot.querySelector("#cib-conversation-main").shadowRoot.querySelector("#cib-chat-main > cib-welcome-container");
-  main
-    .querySelector("cib-welcome-container")
-    .remove();
 
-  const feedbackGroup = whole
-    .querySelector("cib-serp-feedback")
-    .shadowRoot
-    .querySelector("div.root");
+const init = async () => {
+  await Page.waitForElm("#b_sydConvCont > cib-serp");
+  // remove welcome bar
+  Page.getWelcome().remove();
+  const feedbackGroup = Page.getFeedbackBar();
   const feedbackButton = feedbackGroup.querySelector("#fbpgbt");
-  console.log(feedbackButton);
-
   addButtonGroups(feedbackGroup, feedbackButton);
 };
 
-const getWhole = () => {
-  return document
-    .querySelector("#b_sydConvCont > cib-serp")
-    .shadowRoot;
-};
-
-const getMain = () => {
-  return getWhole()
-    .querySelector("#cib-conversation-main")
-    .shadowRoot
-    .querySelector("#cib-chat-main");
-};
-
-const waitForElm = (selector) => {
-  return new Promise(resolve => {
-    if (document.querySelector(selector)) {
-      return resolve(document.querySelector(selector));
-    }
-
-    const observer = new MutationObserver(mutations => {
-      if (document.querySelector(selector)) {
-        resolve(document.querySelector(selector));
-        observer.disconnect();
-      }
-    });
-
-    observer.observe(document.body, {
-      childList: true,
-      subtree: true
-    });
-  });
-};
 
 const addButtonGroups = (actionsArea, WaitingButton) => {
-  // TODO: 5 change css, 并排
   addButton(actionsArea, WaitingButton, PNG);
   addButton(actionsArea, WaitingButton, JPG);
-  // TODO: add markdown
 };
 
 const addButton = (actionsArea, WaitingButton, type) => {
@@ -70,60 +30,17 @@ const addButton = (actionsArea, WaitingButton, type) => {
 
   const getOnClickByType = (type) => {
     if (type === PNG) {
-      return forPNG;
+      return DownloadVisitor.forPNG;
     } else if (type === JPG) {
-      return forJPG;
+      return DownloadVisitor.forJPG;
     } else if (type === MD) {
-      return forMD;
+      return DownloadVisitor.forMD;
     } else if (type === JSON) {
-      return forJSON;
+      return DownloadVisitor.forJSON;
     }
   };
   downloadButton.onclick = getOnClickByType(type);
   actionsArea.appendChild(downloadButton);
 };
 
-const forImage = async (func, type, way='newTab') => {
-  const main = <HTMLElement> getMain();
-  const dataURL = await func(main, {
-    backgroundColor: "rgb(217, 230, 249)"
-  });
-  if (way === 'newTab') {
-    requestAnimationFrame(() => {
-      const binaryData = atob(dataURL.split("base64,")[1]);
-      const data = [];
-      for (let i = 0; i < binaryData.length; i++) {
-        data.push(binaryData.charCodeAt(i));
-      }
-      const blob = new Blob(
-        [new Uint8Array(data)],
-        { type: `image/${type}`});
-      const url = URL.createObjectURL(blob);
-
-      window.open(url, "_blank");
-    });
-  } else {
-    const link = document.createElement('a');
-    link.download = `my-image-name.${type}`;
-    link.href = dataURL;
-    link.click();
-    link.remove();
-  }
-}
-const forPNG = async () => {
-  forImage(domToPng, "png" )
-};
-
-const forJPG = async () => {
-  forImage(domToJpeg, "jpeg" )
-}
-
-const forMD = () => {
-
-};
-
-const forJSON = () => {
-
-};
-
 init();
diff --git a/docs/manual.md b/docs/manual.md
@@ -2,9 +2,106 @@
 
 ## Bing Page Structure
 
+- search(dafault tab)
+- chat
+  - Welcome
+  - Q&A list
+    - A ?
+      - welcome tips
+    - Q & A
+      - Q
+      - A
+    - Q Q & A
+      - network problem
+        - handle with Q + Q & A
+    - Q & A A
+      - unknown problem
+      - 
+    - Q ?
+      - export at sending question
+  - feedback
 
+### A
 
+- meta-text
+- body
+- learn more
+- tips
 
+### JSON example
+
+#### plain text version
+
+```json
+{
+    "QAs":[
+        {
+            "A": [{"body": "Hello"}]
+        }, {
+            "Q": [{"body": "What date is it today?"}],
+            "A": [{"body": "Hello, this is Bing. Today is Wednesday, February 15, 2023."}]
+        }, {
+            "Q": [{"body": "What date is it today?"}],
+            "A": [{
+              "meta": [
+                "Searching for: weather",
+                "Searching for: user location",
+                "Generating answers for you…"
+              ],
+              "body": "I’m sorry, I don’t know your location 0. The weather depends on where you are. You can try searching for the weather in your city or country. 1",
+              "refs": [
+                {
+                  "index": 0,
+                  "link": "https://bing.com/search?q=weather"
+                }, {
+                  "index": 1,
+                  "link": "https://www.accuweather.com/en/de/nuremberg/90402/weather-forecast/167559"
+                }
+              ]
+            }]
+        }, {
+            "Q": [{"body": "Goodbye"}]
+        }
+    ]
+}
+```
+
+#### html version?
+
+for A, add a html field
+
+### feedback
+
+```html
+#fdbkDialogContainer {
+  display: block;
+  box-sizing: content-box;
+  position: fixed;
+  left: initial;
+  top: initial;
+  right: 0;
+  bottom: 0;
+  z-index: 1000002;
+  box-shadow: 0 4px 16px rgba(0,0,0,.2);
+  border-radius: 6px 6px 0 0;
+  background-color: #fff;
+}
+```
+
+```css
+#fbpgdg {
+    display: block;
+    box-sizing: content-box;
+    padding: 0 20px 0 20px;
+    width: 320px;
+    max-width: 100%;
+    max-height: 100%;
+    line-height: 20px;
+    font-size: 14px;
+    color: #444;
+    overflow: auto;
+}
+```
 
 ## Library
 
@@ -18,4 +115,4 @@
 
 [qq15725/modern-screenshot: 📸 Fast generates an image from a DOM node using HTML5 canvas and SVG. (github.com)](https://github.com/qq15725/modern-screenshot)
 
-[bubkoo/html-to-image: ✂️ Generates an image from a DOM node using HTML5 canvas and SVG. (github.com)](https://github.com/bubkoo/html-to-image)
+[bubkoo/html-to-image: ✂️ Generates an image from a DOM node using HTML5 canvas and SVG. (github.com)](https://github.com/bubkoo/html-to-image)
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "package": "plasmo package"
   },
   "dependencies": {
-    "modern-screenshot": "^4.3.3",
+    "modern-screenshot": "^4.3.4",
     "plasmo": "0.65.0",
     "svelte": "3.55.1",
     "svelte-preprocess": "5.0.1"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/todo.md b/todo.md
@@ -19,5 +19,11 @@
 
 ## others
 
+- [ ] how to add unittest for shadow-roots?
 - [ ] 通过重排元素来渲染图片？目前的脚注部分还有点好
 - [ ] 改英文文档
+
+## current
+
+- [ ] 将所有的链接的a的 font-weight: 400
+- [ ] WARN   | default_locale not set, fallback to en
diff --git a/uitls/bingPage.ts b/uitls/bingPage.ts
@@ -0,0 +1,78 @@
+export class Page {
+
+  static getWhole = () => {
+    return document
+      .querySelector("#b_sydConvCont > cib-serp")
+      .shadowRoot;
+  };
+
+  static getMain = () => {
+    return <HTMLElement>Page.getWhole()
+      .querySelector("#cib-conversation-main")
+      .shadowRoot
+      .querySelector("#cib-chat-main");
+  };
+
+  static getWelcome = () => {
+    return Page.getMain()
+      .querySelector("cib-welcome-container");
+  };
+
+  static getQAsElement = () => {
+    return Page.getMain()
+      .querySelectorAll("cib-chat-turn");
+  };
+
+  static setFontWeightForAllRefs = () => {
+    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
+          const messagesShadowRoot = group.shadowRoot;
+          const ansFrame = messagesShadowRoot.querySelector("cib-message[type=\"text\"]");
+          const refsBlock = ansFrame
+            .shadowRoot
+            .querySelector("cib-message-attributions");
+          if (refsBlock) {
+            const refsElement = refsBlock.shadowRoot.querySelector("div[role=\"list\"]");
+            const linkElementList = Array.from(refsElement.querySelectorAll("a"));
+            linkElementList.map(linkElm => {
+              linkElm.style.fontWeight = "400";
+            });
+          }
+        }
+      }
+    }
+  };
+
+  static getFeedbackBar = () => {
+    return Page.getWhole()
+      .querySelector("cib-serp-feedback")
+      .shadowRoot
+      .querySelector("div.root");
+  };
+
+  static waitForElm = (selector) => {
+    return new Promise(resolve => {
+      if (document.querySelector(selector)) {
+        return resolve(document.querySelector(selector));
+      }
+
+      const observer = new MutationObserver(mutations => {
+        if (document.querySelector(selector)) {
+          resolve(document.querySelector(selector));
+          observer.disconnect();
+        }
+      });
+
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true
+      });
+    });
+  };
+}
+