Skip to content

Latest commit

 

History

History
61 lines (42 loc) · 1.88 KB

Survey.md

File metadata and controls

61 lines (42 loc) · 1.88 KB

Chrome extension research 紀錄

因為自己使用的 第三方套件 出現 bug ,源自於套件所抓取的 html element name 變更了,同時我並不需要原作者提供的的大部分功能加上使用量比較大,所以決定自己寫一版陽春點的自用,至少修 bug 不用等

Question

  • 解決 manifest.json entry point 問題,如何將 React 渲染的東西植入
  • 解決渲染頁面導入問題,可能會有 z-index 狀況需要處理,必須先確認作法
  • 解決網域啟用問題 (ChatGPT only)

需要內容拆解:

Sidebar

  • 負責顯示定義好的 prompt template:
    1. 需要確定怎麼跟 ChatGPT 頁面的 Message box 嫁接,例如串接上下文,將內容一併傳送到 GPT message box
    • 呼叫時展開一個 Modal 輸入框,並在點擊送出後抓取 ChatGPT message box 並將內容植入
    1. Split feature type (需要決定 sidebar 到底要放幾種類型的按鈕)
      1. Prompt
      2. Quick response
      3. Setting

Template Prompt setting (Modal)

  • Prompt question:
    1. 處理 Template 儲存問題,參照套件存放於 local storage,需要評估一下是否會有潛在問題
    • 得知 Chrome 有提供屬於瀏覽器版本的 chrome.storage, chrome.localStorage,同時具備將資料綁定在 Google account 上的好處、儲存量也比 localStorage 大
    1. Template Editor 資料流梳理 (CRUD)
    • 透過 useContext, useReducer 處理整體 CRUD 的問題
  • Quick response: (Ex: continue)
    • 預先設定的定式回覆

可以延伸的

  1. Shortcuts and display
  2. Page download
  3. Wrapper size

UI:

已確定:

  1. Popover
  2. Drawer
  3. Button

Tech stack:

  1. Chakra-UI
  • Popover
  • Drawer
  • Button
  • Modal
  • Form Control

Wire frame

Link