improve

.github/workflows/build.yml

@@ -0,0 +1,36 @@
+name: "Build extension"
+
+on:
+  push:
+    branches: [ main ]
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Cache pnpm modules
+        uses: actions/cache@v3
+        with:
+          path: node_modules/
+          key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-
+      
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v3.4.1
+        with:
+          node-version: 16.x
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build the extension
+        run: npm run build -- --zip
+
+      - uses: actions/upload-artifact@v3
+        with:
+          name: Extension
+          path: build/chrome-mv3-prod.zip

background.ts

@@ -1,20 +1,35 @@
-import { Storage } from "@plasmohq/storage"
-import { Assistent } from "openapi/assistent";
+import { Storage } from "@plasmohq/storage";
+import { OpenAI } from "provides/openai";
+import { Telegram } from "provides/telegram";
 
 
 const main = async () => {
     const storage = new Storage();
+
     const openaiKey = await storage.get("openaiKey");
     const openaiModel = await storage.get("openaiModel");
-    const ai = new Assistent(openaiKey, openaiModel);
+    const ai = new OpenAI(openaiKey, openaiModel);
+
+    const tgBotToken = await storage.get("tgBotToken");
+    const tgChatId = await storage.get("tgChatId");
+    const tg = new Telegram(tgBotToken, tgChatId)
 
     storage.watch({
         "openaiKey": (c) => ai.setApiKey(c.newValue),
         "openaiModel": (c) => ai.setModel(c.newValue),
+        "tgBotToken": (c) => tg.setBotToken(c.newValue),
+        "tgChatId": (c) => tg.setChatId(c.newValue),
     })
 
-    chrome.runtime.onMessage.addListener(async (message, _, sendResponse) => 
-        await ai.getAnswer(message, sendResponse));
+    chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
+        tg.setTabId(sender.tab.id);
+
+        const answer = await ai.getAnswer(message, sendResponse);
+        await tg.sendQuestion(message, answer);
+    });
+
+    // long polling updates
+    await tg.pollUpdates();
 };
 
 main();

content.ts

@@ -1,5 +1,5 @@
-import type { PlasmoCSConfig } from "plasmo"
-import $ from "jquery"
+import type { PlasmoCSConfig } from "plasmo";
+import $ from "jquery";
 import { GFOption } from "domain/option";
 import { GFQuestion } from "domain/question";
 
@@ -9,8 +9,19 @@ export const config: PlasmoCSConfig = {
   all_frames: true
 }
 
+$('head').append('<style>.fsdfsdfsfd:hover {opacity: 0.8;}</style>')
+
 const questions: Array<GFQuestion> = [];
 $("div[role='list']").first().children("div[role='listitem']").each((_, el) => {
-    const options: Array<GFOption> = $(el).find("label").toArray().map((e) => new GFOption(e));
-    questions.push(new GFQuestion(el, options))
+  const options: Array<GFOption> = $(el).find("label").toArray().map((e) => new GFOption(e));
+  questions.push(new GFQuestion(el, options))
 });
+
+chrome.runtime.onMessage.addListener(async (message, _, sendResponse) => {
+  const question = questions.find(q => q.id === message?.qId);
+  if (question) {
+    question.checkOption({ 'id': message?.qId,'option': { 'id':  message?.oId} })
+  }
+
+  return true
+});

domain/option.ts

@@ -1,11 +1,11 @@
-import { v4 as uuidv4 } from 'uuid';
+import { nanoid } from 'domain/uuid';
 
 export class GFOption {
     id: string;
     el: HTMLElement;
 
     constructor(el: HTMLElement) {
-        this.id = uuidv4();
+        this.id = nanoid();
         this.el = el;
     }
 }

domain/question.ts

@@ -1,18 +1,33 @@
-import { GFOption } from "~domain/option";
-import $ from "jquery"
-import { v4 as uuidv4 } from 'uuid';
+import { GFOption } from "domain/option";
+import $ from "jquery";
+import { Storage } from "@plasmohq/storage";
+import { nanoid } from 'domain/uuid';
+import { CHOOSE_EVENT, OPACITY_EVENT, RED_BACKGROUND_EVENT } from 'options';
+
+
+const storage = new Storage();
+
 
 export class GFQuestion {
     id: string;
     el: HTMLElement;
     options: Array<GFOption>;
+    event: string;
 
     constructor(el: HTMLElement, options: Array<GFOption>) {
-        this.id = uuidv4();
+        this.id = nanoid();
         this.el = el;
         this.options = options;
 
-        $("div[role='heading']", this.el).on("click", this.onClickToQuestion.bind(this));
+        // setup event on answer
+        storage.get("event").then(event => {
+            this.event = event ? event : CHOOSE_EVENT
+        });
+        storage.watch({
+            "event": (c) => this.event = c.newValue,
+        })
+
+        $("div[role='heading'], img", this.el).on("click", this.onClickToQuestion.bind(this));
     };
 
     onClickToQuestion (): void {
@@ -23,16 +38,36 @@ export class GFQuestion {
         const correctOption = this.options.find(o => o.id === res['option']?.['id']);
         if (correctOption) {
             const el = $(correctOption.el);
-            // TODO: debug
-            // el.css('background-color', 'red');
-            el.trigger("click");
+
+            switch (this.event) {
+                case CHOOSE_EVENT:
+                    el.trigger("click");
+
+                    break;
+                case OPACITY_EVENT:
+                    el.addClass('fsdfsdfsfd');
+
+                    break;
+                case RED_BACKGROUND_EVENT:
+                    el.css('background-color', 'red');
+
+                    break;
+                default:
+                    break;
+            }
         }
     };
 
     toJson(): string {
+        const img = this.getImage();
         return JSON.stringify({
             'id': this.id,
             'text': $("div[role='heading']", this.el).text(),
+            'img': img ? {
+                'alt': img.attr('alt'),
+                'title': img.attr('title'),
+                'src': img.attr('src'),
+            } : null,
             'items': this.options.map((o) => {
                 return {
                     'id': o.id,
@@ -41,4 +76,9 @@ export class GFQuestion {
             })
         });
     };
+
+    getImage(): JQuery<HTMLElement>|null {
+        const img: JQuery<HTMLElement> = $("img", this.el)
+        return img.length > 0 ? img : null;
+    };
 }

domain/uuid.ts

@@ -0,0 +1,3 @@
+import { customAlphabet } from 'nanoid'
+
+export const nanoid = customAlphabet('1234567890abcdef', 10)

options.tsx

@@ -1,31 +1,92 @@
-import { useState, useEffect } from "react"
 import { useStorage } from "@plasmohq/storage/hook"
 
+
+export const models = ["gpt-3.5-turbo-0613", "gpt-4-0613"]
+
+export const NONE_EVENT = "none";
+export const CHOOSE_EVENT = "choose";
+export const OPACITY_EVENT = "opacity";
+export const RED_BACKGROUND_EVENT = "red-background";
+
+export const events = [CHOOSE_EVENT, OPACITY_EVENT, RED_BACKGROUND_EVENT, NONE_EVENT]
+
 function OptionsIndex() {
+  const [event, setEvent] = useStorage<string>("event", events[0])
   const [openaiKey, setOpenaiKey] = useStorage<string>("openaiKey", "")
-  const [openaiModel, setOpenaiModel] = useStorage<string>("openaiModel", "gpt-3.5-turbo-0613")
-  const models = ["gpt-3.5-turbo-0613", "gpt-4-0613"]
+  const [openaiModel, setOpenaiModel] = useStorage<string>("openaiModel", models[0])
+  const [tgBotToken, setTgBotToken] = useStorage<string>("tgBotToken", "")
+  const [tgChatId, setTgChatId] = useStorage<string>("tgChatId", "")
+
+  const autoSetTgChatId = () => {
+      fetch(`https://api.telegram.org/bot${tgBotToken}/getUpdates?allowed_updates=["message"]&timeout=60`)
+      .then((response) => response.json())
+      .then((data) => {
+        const updates = data.result;
+        if (updates.length > 0 && updates[0]?.message?.chat?.id) {
+          setTgChatId(updates[0]?.message?.chat?.id);
+        }
+      })
+  };
 
+
   return (
     <div>
       <h1>
         Welcome to Google Form GPT Assistent!
       </h1>
 
-      <br/>
+      <h2>Settings:</h2>
 
-      <h2>OpenAI API key</h2>
+      <h3>Event on answer</h3>
+      <select value={event} onChange={e => setEvent(e.target.value)}>
+        {events.map(m => <option key={m} value={m}>{m}</option>)}
+      </select>
+
+      <br/>
+      <br/>
+
+      <h2>OpenAI settings:</h2>
+
+      <h3>API key</h3>
       <input
         style={{ width: "400px" }}
         onChange={(e) => setOpenaiKey(e.target.value)}
         value={openaiKey}
       />
+
       <br/>
 
-      <h2>Model</h2>
+      <h3>Model</h3>
       <select value={openaiModel} onChange={e => setOpenaiModel(e.target.value)}>
-        {models.map(m => <option value={m}>{m}</option>)}
+        {models.map(m => <option key={m} value={m}>{m}</option>)}
       </select>
+
+      <br/>
+      <br/>
+
+      <h2>Telegram settings:</h2>
+
+      <h3>Token</h3>
+      <input
+        style={{ width: "400px" }}
+        onChange={(e) => setTgBotToken(e.target.value)}
+        value={tgBotToken}
+      />
+
+      <br/>
+
+      <h3>Chat ID</h3>
+      <input
+        style={{ width: "100px" }}
+        onChange={(e) => setTgChatId(e.target.value)}
+        value={tgChatId}
+      />
+
+      {!tgChatId && (
+        <span onClick={autoSetTgChatId}>
+          To automatically set up the Chat ID, please click here. In case you are using a group chat, mention the bot. If you are using a private chat, just send any text message.
+        </span>
+      )}
     </div>
   )
 }