add menu context in right-click menu, when clicked nav. to words page

dgutyanghs · Sep 23, 2024 · d933cde · d933cde
1 parent 5392359
commit d933cde
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 22 deletions.
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -55,7 +55,7 @@ function App() {
             </Box>
             <Box sx={{ mt: 12, mb: 2, mx: 'auto', textAlign: 'center' }}>
                 <Button onClick={gotoOptions} size="small" variant="contained" endIcon={<SendIcon />}>
-                    Words
+                    Show Words
                 </Button>
             </Box>
         </Box>

diff --git a/src/components/Dialog.jsx b/src/components/Dialog.jsx
@@ -6,7 +6,7 @@ import { nanoid } from 'nanoid';
 import TTSpeech from '../tts.js';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
-import { IconButton, Stack } from '@mui/material';
+import { Divider, IconButton, Stack } from '@mui/material';
 import Tooltip from '@mui/material/Tooltip';
 import AddIcon from '@mui/icons-material/Add';
 import VolumeUpIcon from '@mui/icons-material/VolumeUp';
@@ -66,13 +66,13 @@ function Dialog() {
     };
 
     function addData(text_key, data) {
-        chrome.runtime.sendMessage({action: "add", text_key: text_key, data: data}, (response) => {
-          if (response.success) {
-            console.log("Data added successfully");
-          }
+        chrome.runtime.sendMessage({ action: "add", text_key: text_key, data: data }, (response) => {
+            if (response.success) {
+                console.log("Data added successfully");
+            }
         });
-      }
-      
+    }
+
 
     React.useEffect(() => {
         /**
@@ -166,7 +166,7 @@ function Dialog() {
         const textArray = result.keys;
         const jyutArray = result.values;
         const text_key = textArray.join('');
-        const data = [textArray.join(''), jyutArray.join(' '), {"meaning": bingTranslateText}];
+        const data = [textArray.join(''), jyutArray.join(' '), { "meaning": bingTranslateText }];
         // console.log("data", data);
 
         addData(text_key, data);
@@ -200,7 +200,10 @@ function Dialog() {
                         </IconButton>
                     </Tooltip>
                 </Stack>
-                <hr />
+                <Typography sx={{ fontSize: '0.7rem', color: 'lightgray' }}>
+                    {"press '+' to add to words page."}
+                </Typography>
+                <Divider />
                 <Typography sx={{ fontSize: '0.7rem' }}>
                     <TranslateLink soundText={soundText} />
                 </Typography>

diff --git a/src/contentScript.js b/src/contentScript.js
@@ -84,14 +84,16 @@ chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
     }
 });
 
+
+
 const init = async () => {
     //check ON or OFF switch in popup.html .
     const isON = await getSwitchState(SWITCH_POPUP);
     if (!isON) {
         console.log('contentscript, switch_popup isON =', isON);
         return;
-    }else {
-        console.log('contentscript, isOn=',isON)
+    } else {
+        console.log('contentscript, isOn=', isON)
     }
 
     keyForMouseSelected = await getKeyForMouseSelected(MOUSE_AND_KEY);

diff --git a/src/serviceWorker.js b/src/serviceWorker.js
@@ -117,6 +117,24 @@ async function fetchTranslation(text) {
     return html;
 }
 
+// for menu context
+chrome.runtime.onInstalled.addListener(function () {
+    chrome.contextMenus.create({
+        "id": "cantonese-menu-item",
+        "title": "Go to Words Page",
+        "contexts": ["all"]
+    });
+});
+
+
+chrome.contextMenus.onClicked.addListener((info, tab) => {
+  if (info.menuItemId === "cantonese-menu-item") {
+    console.log("Context menu item clicked!");
+    // Add your functionality here
+    chrome.tabs.create({ url: chrome.runtime.getURL('options.html') });
+  }
+});
+
 /**
  * initial database
  */

diff --git a/static/manifest.json b/static/manifest.json
@@ -1,7 +1,7 @@
 {
     "name": "__MSG_extensionName__",
     "manifest_version": 3,
-    "version": "2.1.5",
+    "version": "2.1.6",
     "default_locale": "en",
     "description": "__MSG_extensionDescription__",
     "icons": {
@@ -11,37 +11,60 @@
     },
     "content_scripts": [
         {
-            "matches": ["<all_urls>"],
-            "js": ["contentScript.js"],
-            "css": ["./css/contentScript.css"],
+            "matches": [
+                "<all_urls>"
+            ],
+            "js": [
+                "contentScript.js"
+            ],
+            "css": [
+                "./css/contentScript.css"
+            ],
             "all_frames": false,
             "run_at": "document_end"
         }
     ],
     "background": {
         "service_worker": "serviceWorker.js"
     },
-    "permissions": ["storage", "tts"],
+    "permissions": [
+        "storage",
+        "tts",
+        "contextMenus"
+    ],
     "action": {
         "default_icon": "icons/96.png",
         "default_title": "__MSG_extensionName__",
         "default_popup": "popup.html"
     },
     "web_accessible_resources": [
         {
-            "resources": ["dictionary.json.txt", "web_accessible_resources.js", "contentScript.css"],
-            "matches": ["https://*/*", "http://*/*"]
+            "resources": [
+                "dictionary.json.txt",
+                "web_accessible_resources.js",
+                "contentScript.css"
+            ],
+            "matches": [
+                "https://*/*",
+                "http://*/*"
+            ]
         }
     ],
     "tts_engine": {
         "voices": [
             {
                 "voice_name": "Cantonese Voice",
                 "lang": "yue-Hant-HK",
-                "event_types": ["start", "marker", "end"]
+                "event_types": [
+                    "start",
+                    "marker",
+                    "end"
+                ]
             }
         ]
     },
     "options_page": "options.html",
-    "host_permissions": ["https://cn.bing.com/dict/"]
-}
+    "host_permissions": [
+        "https://cn.bing.com/dict/"
+    ]
+}