Toolbox

Author: shuzijun

README.md

@@ -7,7 +7,7 @@ The Chrmoe plug-in for [Leetcode Editor](https://github.com/shuzijun/leetcode-ed
 
 ## Installation
 
-1. Install from the Chrome Store
+1. Install from the Chrome Store [link](https://chrome.google.com/webstore/detail/leetcode-editor-extension/kikcppmgphhkffcdhldclbidggbieegc)  
 2. Download the file to install
 
 ## How to use

README_ZH.md

@@ -7,7 +7,7 @@
 
 ## 安装方式
 
-1. 从Chrome商店安装
+1. 从Chrome商店安装 [链接](https://chrome.google.com/webstore/detail/leetcode-editor-extension/kikcppmgphhkffcdhldclbidggbieegc)
 2. 下载文件进行安装
 
 ## 使用方式

assets/icon.png

@@ -6,5 +6,28 @@ declare namespace NodeJS {
 
 interface Window {
     dataLayer: Array
-gtag: (a: string, b: any, c?: any) => void
+    gtag: (a: string, b: any, c?: any) => void
+}
+
+interface Question {
+    title:string
+    slug:string
+}
+
+interface ReplayMessage {
+    type:string
+    url:string
+    body:string
+    requestId:string
+    tabId:number
+    retry?:number
+    matching?(details: chrome.webRequest.WebRequestBodyDetails,body:string): ReplayMessage
+    dispose?(callback: Function)
+}
+
+interface ReplayFetch{
+    type:string
+    method:string
+    headers:HeadersInit
+    dispose(callback: Function)
 }

assets/pluginIcon.svg

@@ -22,5 +22,9 @@
   "open_ide": {
     "message": "Open IDE",
     "description": "message."
+  },
+  "affix_toolbox": {
+    "message": "Toolbox",
+    "description": "message."
   }
 }

index.d.ts

@@ -22,5 +22,9 @@
   "open_ide": {
     "message": "打开IDE",
     "description": "message."
+  },
+  "affix_toolbox": {
+    "message": "工具箱",
+    "description": "message."
   }
 }

locales/en/messages.json

@@ -1,7 +1,7 @@
 {
   "name": "leetcode-editor-extension",
   "displayName": "Leetcode editor extension",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Quickly open problems in IntelliJ Platform IDEs.",
   "author": "shuzijun",
   "scripts": {
@@ -36,7 +36,8 @@
       "https://codetop.cc/*"
     ],
     "permissions": [
-      "cookies"
+      "cookies",
+      "webRequest"
     ]
   }
 }

locales/zh/messages.json

@@ -1,4 +1,6 @@
 import CryptoJS from 'crypto-js'
+import {matchingType} from "~network";
+
 console.log("HELLO WORLD")
 
 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
@@ -13,3 +15,31 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     }
     return true
 });
+
+
+let filter:chrome.webRequest.RequestFilter = { urls: ['https://leetcode.cn/*','https://leetcode.com/*'],types: ["xmlhttprequest"] }
+let extraInfoSpec = ['requestBody','extraHeaders']
+
+chrome.webRequest.onBeforeRequest.addListener(function(details){
+    let postedString = ""
+    if (details.method === "POST"){
+        postedString = decodeURIComponent(String.fromCharCode.apply(null, new Uint8Array(details.requestBody.raw[0].bytes)))
+    }
+    console.log(details)
+    let message = matchingType(details,postedString)
+    if (message){
+        sendTabMessage(message)
+    }
+}, filter, extraInfoSpec)
+
+function sendTabMessage(message) {
+    if (message.retry>6){
+        return
+    }
+    chrome.tabs.sendMessage(message.tabId,message,function(res) {
+        if(!(res && res.status)) {
+            message.retry = message.retry + 1
+            setTimeout(sendTabMessage, 3000,message);
+        }
+    })
+}

package.json

@@ -1,57 +1,45 @@
-import type {PlasmoContentScript} from "plasmo"
-import {useStorage} from "@plasmohq/storage/hook"
-import React from "react"
-import {createRoot} from "react-dom/client"
+import type { PlasmoContentScript } from "plasmo";
+import { useStorage } from "@plasmohq/storage/hook";
+import React from "react";
+import { createRoot } from "react-dom/client";
 
-import {Button} from 'antd';
-import {GetLogoSize} from "~logo"
+import { Button } from "antd";
+import { BaseUrl, Logo } from "~tools";
 
 export const config: PlasmoContentScript = {
-    matches: ["https://codetop.cc/home*"]
-}
+  matches: ["https://codetop.cc/home*"]
+};
 
 export const getRootContainer = () =>
-    new Promise((resolve) => {
-        const checkInterval = setInterval(() => {
-            const rootContainer = document.querySelector(".el-table__body-wrapper > .el-table__body > tbody")
-            if (rootContainer) {
-                clearInterval(checkInterval)
-                resolve(rootContainer)
-            }
-        }, 137)
-    })
-
-const CodeTopCCList = ({sulg}) => {
-
-    const [showIcon] = useStorage("ShowIcon", true)
-    const logo = GetLogoSize(14)
-    const url = GetUrl() + sulg
-
-    return (<Button hidden={!showIcon} type="text" href={url} icon={logo} target='_blank'/>)
-}
-
-export const render = async ({createRootContainer}) => {
-
-    const rootContainer = await createRootContainer()
-
-    const els = rootContainer.querySelectorAll("tr > td:nth-child(1) > div")
-    for (let i = 0; i < els.length; i++) {
-        const d = document.createElement("div")
-        d.style = "display: inline;padding-right:10px"
-        els[i].insertBefore(d, els[i].lastChild)
-        const root = createRoot(d)
-        let sulg = els[i].getElementsByTagName("a")[0].getAttribute("href").split('/')[4]
-        root.render(<CodeTopCCList sulg={sulg}/>);
-    }
-}
-
-
-const GetUrl = () => {
-    const [editor] = useStorage("Editor", "leetcode-editor-pro")
-    const [product] = useStorage("Product", "idea")
-    const [project] = useStorage("Project", "")
-
-    return "jetbrains://" + product + "/" + editor + "/open?project=" + project + "&slug="
-}
-
-export default CodeTopCCList
+  new Promise((resolve) => {
+    const checkInterval = setInterval(() => {
+      const rootContainer = document.querySelector(".el-table__body-wrapper > .el-table__body > tbody");
+      if (rootContainer) {
+        clearInterval(checkInterval);
+        resolve(rootContainer);
+      }
+    }, 137);
+  });
+
+const CodeTopCCList = ({ slug }) => {
+  const [showIcon] = useStorage("ShowIcon", true);
+  const logo = Logo(14);
+  const url = BaseUrl("slug") + slug;
+
+  return (<Button hidden={!showIcon} type="text" href={url} icon={logo} target="_blank" />);
+};
+
+export const render = async ({ createRootContainer }) => {
+  const rootContainer = await createRootContainer();
+  const els = rootContainer.querySelectorAll("tr > td:nth-child(1) > div");
+  for (let i = 0; i < els.length; i++) {
+    let d = document.createElement("div");
+    d.setAttribute("style", "display: inline;padding-right:10px");
+    els[i].insertBefore(d, els[i].lastChild);
+    const root = createRoot(d);
+    let slug = els[i].getElementsByTagName("a")[0].getAttribute("href").split("/")[4];
+    root.render(<CodeTopCCList slug={slug} />);
+  }
+};
+
+export default CodeTopCCList;

src/background.ts

@@ -0,0 +1,100 @@
+import type { PlasmoContentScript, PlasmoGetInlineAnchor } from "plasmo";
+import { Affix, Button, Drawer, List } from "antd";
+import { BaseUrl, Icon as logoIcon, Style } from "~tools";
+import Icon from "@ant-design/icons";
+import React, { useEffect, useState } from "react";
+import {matchingDispose} from "~network";
+
+export const config: PlasmoContentScript = {
+  matches: ["https://leetcode.cn/*", "https://leetcode.com/*"],
+  run_at: "document_end"
+};
+
+export const getStyle = () => {
+  const style = Style(true);
+  const myStyle = "#plasmo-shadow-container {position: absolute !important; top: 0px; right: 0px;}";
+  style.textContent = style.textContent + myStyle;
+  return style;
+};
+
+// Use this to optimize unmount lookups
+export const getShadowHostId = () => "leetcode-editor-affix-id";
+
+export const getInlineAnchor: PlasmoGetInlineAnchor = () =>
+  document.querySelector("body");
+
+
+const LeetcodeAffix = () => {
+  const [questions, setQuestions] = useState<Question[]>([]);
+
+  const addData = (item:Question[]) => {
+    setQuestions([...questions, ...item]);
+  };
+
+  useEffect(() => {
+    const cache = [];
+    chrome.runtime.onMessage.addListener((message:ReplayMessage, sender, sendResponse) => {
+      if (cache.some((value) => value === message.requestId)) {
+        sendResponse({ status: "ok" });
+        return true;
+      }
+      cache.push(message.requestId);
+      console.log(cache);
+      matchingDispose(message).dispose((questions:Question[]) => {addData(questions)});
+      sendResponse({ status: "ok" });
+      return true;
+    });
+  }, []);
+
+
+  const [open, setOpen] = useState(false);
+  const showDrawer = () => {
+    let container = getContainer();
+    container.style.height = "300px";
+    container.style.width = "150px";
+    setOpen(true);
+  };
+  const onClose = () => {
+    setOpen(false);
+    setTimeout(() => {
+      let container = getContainer();
+      container.style.height = "0px";
+      container.style.width = "0px";
+    }, 1000);
+
+  };
+  const getContainer = (): HTMLElement => {
+    return document.querySelector("#" + getShadowHostId()).shadowRoot.querySelector("#plasmo-shadow-container").querySelector("#containerAffix");
+  };
+
+  const url = BaseUrl("slug");
+
+  return (
+    <>
+      <Affix style={{ position: "absolute", top: 80, right: 0 }}>
+        <Button type="link" style={{ width: 40, height: 40 }} onClick={showDrawer} hidden={open}
+                icon={<Icon component={logoIcon} />} />
+
+      </Affix>
+      <Affix style={{ position: "absolute", top: 0, right: 0 }}>
+        <div id="containerAffix"></div>
+      </Affix>
+      <Drawer title={ chrome.i18n.getMessage("affix_toolbox") } placement="right" destroyOnClose={true} onClose={onClose} open={open} width={150} height={200}
+              getContainer={getContainer()}
+              style={{ position: "absolute" }}>
+        <List
+          header={<div>Problem Set</div>}
+          itemLayout="horizontal"
+          dataSource={questions}
+          renderItem={item => (
+            <List.Item>
+              <List.Item.Meta title={<a href={url + item.slug} target="_blank">{item.title}</a>} />
+            </List.Item>
+          )}
+        />
+      </Drawer>
+    </>
+  );
+};
+
+export default LeetcodeAffix;