Merge pull request #5 from xxxasdfghjk:feature/add-option

✨ add popup options
xxxasdfghjk · Aug 18, 2023 · befa36b · befa36b
2 parents 10ef2d0 + bf3c645
commit befa36b
Show file tree

Hide file tree

Showing 9 changed files with 183 additions and 124 deletions.
diff --git a/package.json b/package.json
@@ -1,52 +1,53 @@
 {
-  "name": "chrome-extension-typescript-starter",
-  "version": "1.0.0",
-  "description": "chrome-extension-typescript-starter",
-  "main": "index.js",
-  "scripts": {
-    "watch": "webpack --config webpack/webpack.dev.js --watch",
-    "build": "webpack --config webpack/webpack.prod.js",
-    "clean": "rimraf dist",
-    "test": "npx jest",
-    "style": "prettier --write \"src/**/*.{ts,tsx}\""
-  },
-  "author": "",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/chibat/chrome-extension-typescript-starter.git"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/system": "^4.12.2",
-    "@mui/icons-material": "^5.14.3",
-    "@mui/material": "^5.14.5",
-    "@mui/styled-engine": "^5.13.2",
-    "@mui/system": "^5.14.5",
-    "exifreader": "^4.13.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "styled-components": "^6.0.7",
-    "webextension-polyfill": "^0.10.0"
-  },
-  "devDependencies": {
-    "@types/chrome": "^0.0.243",
-    "@types/jest": "^29.5.0",
-    "@types/react": "^18.0.29",
-    "@types/react-dom": "^18.0.11",
-    "@types/webextension-polyfill": "^0.10.1",
-    "copy-webpack-plugin": "^9.0.1",
-    "glob": "^7.1.6",
-    "jest": "^29.5.0",
-    "prettier": "^2.2.1",
-    "rimraf": "^3.0.2 ",
-    "ts-jest": "^29.1.0",
-    "ts-loader": "^8.0.0",
-    "typescript": "^5.0.4",
-    "webpack": "^5.76.0",
-    "webpack-cli": "^4.0.0",
-    "webpack-merge": "^5.0.0"
-  }
+    "name": "chrome-extension-typescript-starter",
+    "version": "1.0.0",
+    "description": "chrome-extension-typescript-starter",
+    "main": "index.js",
+    "scripts": {
+        "watch": "webpack --config webpack/webpack.dev.js --watch",
+        "build": "webpack --config webpack/webpack.prod.js",
+        "clean": "rimraf dist",
+        "test": "npx jest",
+        "style": "prettier --write \"src/**/*.{ts,tsx}\""
+    },
+    "author": "",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/chibat/chrome-extension-typescript-starter.git"
+    },
+    "dependencies": {
+        "@emotion/react": "11.11.0",
+        "@emotion/styled": "11.11.0",
+        "@extend-chrome/storage": "^1.5.0",
+        "@material-ui/core": "^4.12.4",
+        "@material-ui/system": "^4.12.2",
+        "@mui/icons-material": "^5.14.3",
+        "@mui/material": "^5.14.5",
+        "@mui/styled-engine": "^5.13.2",
+        "@mui/system": "^5.14.5",
+        "exifreader": "^4.13.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "styled-components": "^6.0.7",
+        "webextension-polyfill": "^0.10.0"
+    },
+    "devDependencies": {
+        "@types/chrome": "^0.0.243",
+        "@types/jest": "^29.5.0",
+        "@types/react": "^18.0.29",
+        "@types/react-dom": "^18.0.11",
+        "@types/webextension-polyfill": "^0.10.1",
+        "copy-webpack-plugin": "^9.0.1",
+        "glob": "^7.1.6",
+        "jest": "^29.5.0",
+        "prettier": "^2.2.1",
+        "rimraf": "^3.0.2 ",
+        "ts-jest": "^29.1.0",
+        "ts-loader": "^8.0.0",
+        "typescript": "^5.0.4",
+        "webpack": "^5.76.0",
+        "webpack-cli": "^4.0.0",
+        "webpack-merge": "^5.0.0"
+    }
 }
diff --git a/public/popup.html b/public/popup.html
@@ -1,13 +1,12 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="UTF-8">
-    <title>Getting Started Extension's Popup</title>
-    <script src="js/vendor.js"></script>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script src="js/popup.js"></script>
-  </body>
+    <head>
+        <meta charset="UTF-8" />
+        <title>Getting Started Extension's Popup</title>
+        <script src="js/vendor.js"></script>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script src="js/popup.js"></script>
+    </body>
 </html>
-
diff --git a/src/background.ts b/src/background.ts
@@ -1,5 +1,7 @@
 import browser from "webextension-polyfill";
 import ExifReader from "exifreader";
+import { getBucket } from "@extend-chrome/storage";
+import { defaultOption, type Option } from "./storagedOptions";
 
 // show welcome page on new install
 browser.runtime.onInstalled.addListener(async (details) => {
@@ -9,6 +11,8 @@ browser.runtime.onInstalled.addListener(async (details) => {
         await browser.tabs.create({ url });
     }
 
+    getBucket<Option>("options").set(defaultOption);
+
     const rules = [
         {
             id: 1,

diff --git a/src/components/PromtInfoComponent.tsx b/src/components/PromtInfoComponent.tsx
@@ -8,6 +8,8 @@ import { styled as muiStyled } from "@material-ui/core/styles";
 import ContentPasteIcon from "@mui/icons-material/ContentPaste";
 import { styled } from "styled-components";
 import CheckIcon from "@mui/icons-material/Check";
+import type { Option } from "./../storagedOptions";
+import { getBucket } from "@extend-chrome/storage";
 
 type PromptInfo = {
     prompt: string;
@@ -111,6 +113,7 @@ const PromptContainer = (props: PromptContainerProps) => {
     const [state, setState] = useState<"poji" | "nega" | "set" | "noinfo">(
         props.promptInfo === undefined ? "noinfo" : "set"
     );
+    const [hideNoInfo, setHideNoInfo] = useState<boolean>(false);
     const [isCopied, setIsCopied] = useState<boolean>(false);
     const currentText =
         props.promptInfo !== undefined
@@ -120,10 +123,26 @@ const PromptContainer = (props: PromptContainerProps) => {
                 ? props.promptInfo.negativePrompt
                 : props.promptInfo.generateSetting
             : "NO INFO";
+    const hideThisElement = hideNoInfo && state === "noinfo";
+    useEffect(() => {
+        const listener = () => {
+            getBucket<Option>("options")
+                .get()
+                .then((options) => {
+                    setHideNoInfo(!options.displayNoInfoImage || !options.enableThisExtension);
+                });
+        };
+        chrome.storage.onChanged.addListener(listener);
+        listener();
+        return () => {
+            chrome.storage.onChanged.removeListener(listener);
+        };
+    }, []);
+
     useEffect(() => {
         setIsCopied(false);
     }, [state]);
-    return (
+    return !hideThisElement ? (
         <StyledEngineProvider injectFirst>
             <SWrapper>
                 <ChangeButtons
@@ -148,6 +167,8 @@ const PromptContainer = (props: PromptContainerProps) => {
                 )}
             </SWrapper>
         </StyledEngineProvider>
+    ) : (
+        <div></div>
     );
 };
 
@@ -169,6 +190,7 @@ const SWrapper = styled.div`
     z-index: 100;
     background: black;
     padding: 20px;
+    border-radius: 20px;
 `;
 const SColumn = styled.div`
     height: 100%;

diff --git a/src/handleOnLoad.tsx b/src/handleOnLoad.tsx
@@ -1,14 +1,12 @@
+import { getBucket } from "@extend-chrome/storage";
 import { addImagePromptInfo, addImagePromptInfoFirstImage, artWorkAnkerSelector } from "./addPromptInfo";
-(() => {
+import type { Option } from "./storagedOptions";
+(async () => {
+    if ((await getBucket<Option>("options").get()).enableThisExtension === false) {
+        return;
+    }
     const callback: MutationCallback = (mutationsList, observer) => {
         for (const { addedNodes, removedNodes } of mutationsList) {
-            if (removedNodes.length > 0) {
-                for (const removedNode of removedNodes) {
-                    const node = (removedNode as HTMLElement).querySelector(".prompt_info");
-                    if (node) {
-                    }
-                }
-            }
             if (addedNodes.length == 0) continue;
             for (const node of addedNodes) {
                 if (
@@ -51,5 +49,5 @@ import { addImagePromptInfo, addImagePromptInfoFirstImage, artWorkAnkerSelector
             }, 200);
         });
         setTimeout(addImagePromptInfoFirstImage, 0);
-    }, 200);
+    }, 300);
 })();
diff --git a/src/handleOnUpdate.ts b/src/handleOnUpdate.ts
@@ -1,5 +1,10 @@
+import { getBucket } from "@extend-chrome/storage";
 import { addImagePromptInfoFirstImage } from "./addPromptInfo";
+import type { Option } from "./storagedOptions";
+(async () => {
+    if ((await getBucket<Option>("options").get()).enableThisExtension === false) {
+        return;
+    }
 
-(() => {
     setTimeout(addImagePromptInfoFirstImage, 300);
 })();
diff --git a/src/popup.tsx b/src/popup.tsx
@@ -1,58 +1,59 @@
 import React, { useEffect, useState } from "react";
 import { createRoot } from "react-dom/client";
+import { getBucket } from "@extend-chrome/storage";
+import styled from "styled-components";
+import { FormControlLabel, Switch } from "@mui/material";
+import { defaultOption } from "./storagedOptions";
+import type { Option } from "./storagedOptions";
 
-const Popup = () => {
-  const [count, setCount] = useState(0);
-  const [currentURL, setCurrentURL] = useState<string>();
-
-  useEffect(() => {
-    chrome.action.setBadgeText({ text: count.toString() });
-  }, [count]);
+export const bucket = getBucket<Option>("options");
 
-  useEffect(() => {
-    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      setCurrentURL(tabs[0].url);
-    });
-  }, []);
+const Popup = () => {
+    const [option, setOption] = useState<Option>(defaultOption);
+    useEffect(() => {
+        bucket.get().then(console.log);
+        bucket.get().then(setOption);
+    }, []);
 
-  const changeBackground = () => {
-    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      const tab = tabs[0];
-      if (tab.id) {
-        chrome.tabs.sendMessage(
-          tab.id,
-          {
-            color: "#555555",
-          },
-          (msg) => {
-            console.log("result message:", msg);
-          }
-        );
-      }
-    });
-  };
+    const setOptionStorage = (a: Option) => {
+        bucket.set(a).then(() => setOption(a));
+    };
 
-  return (
-    <>
-      <ul style={{ minWidth: "700px" }}>
-        <li>Current URL: {currentURL}</li>
-        <li>Current Time: {new Date().toLocaleTimeString()}</li>
-      </ul>
-      <button
-        onClick={() => setCount(count + 1)}
-        style={{ marginRight: "5px" }}
-      >
-        count up
-      </button>
-      <button onClick={changeBackground}>change background</button>
-    </>
-  );
+    return (
+        <SSwitchWrapper>
+            <FormControlLabel
+                control={
+                    <Switch
+                        checked={option.enableThisExtension}
+                        onChange={({ target }) => setOptionStorage({ ...option, enableThisExtension: target.checked })}
+                    />
+                }
+                label="Enable This Extension"
+            />
+            <FormControlLabel
+                control={
+                    <Switch
+                        checked={option.displayNoInfoImage}
+                        onChange={({ target }) => setOptionStorage({ ...option, displayNoInfoImage: target.checked })}
+                        disabled={option.enableThisExtension === false}
+                    />
+                }
+                label="Display No Info Image"
+            />
+        </SSwitchWrapper>
+    );
 };
 
+export const SSwitchWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    width: 300px;
+`;
+
 const root = createRoot(document.getElementById("root")!);
 
 root.render(
-  <React.StrictMode>
-    <Popup />
-  </React.StrictMode>
+    <React.StrictMode>
+        <Popup />
+    </React.StrictMode>
 );
diff --git a/src/storagedOptions.ts b/src/storagedOptions.ts
@@ -0,0 +1,9 @@
+export type Option = {
+    displayNoInfoImage: boolean;
+    enableThisExtension: boolean;
+};
+
+export const defaultOption: Option = {
+    enableThisExtension: true,
+    displayNoInfoImage: true,
+};