feat: Shortcut popup

README.md

@@ -73,31 +73,3 @@ Run `pnpm dev` (it's run parallel with pnpm dev-server automatically)
 - When you run with Windows, you should run as administrator. (Issue#456)
 
 Then follow the above install instructions
-
-## Angular Commit Message Conventions
-
-This project uses Angular Commit Message Conventions for commit messages. This is to ensure that the commit messages are easy to read and follow a consistent format, and allow automatic versioning. The commit message should be structured as follows:
-
-**Type**: This describes the kind of change that the commit makes. Common types include:
-* feat: A new feature for the user, not a new feature for a build script.
-* fix: A bug fix for the user, which can be a correction in the source code or associated documentation.
-* docs: Documentation only changes.
-* style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc).
-* refactor: A code change that neither fixes a bug nor adds a feature.
-* perf: A code change that improves performance.
-* test: Adding missing tests or correcting existing tests.
-* chore: Changes to the build process or auxiliary tools and libraries such as documentation generation.
-
-**Scope** (optional): A scope provides additional contextual information. It could be anything specifying the location of the commit change (e.g., login, core, user-dashboard, etc.).
-
-**Subject**: The subject contains a succinct description of the change:
-    Use the imperative, present tense: "change", not "changed" nor "changes".
-    Don't capitalize the first letter.
-    No dot (.) at the end.
-
-**Body** (optional): The body should include a detailed description of the change:
-    Use the imperative, present tense: "fix", not "fixed" nor "fixes".
-    Should include motivation for the change and contrast this with previous behavior.
-
-**Footer** (optional): The footer is used to reference issue tracker IDs, link pull requests, or provide notes that do not fit in the body:
-    BREAKING CHANGE: A footer that starts with BREAKING CHANGE: followed by a description indicates a breaking change that suggests a major version bump if this is part of an automated versioning scheme.

chrome-extension/lib/background/index.ts

@@ -13,8 +13,6 @@ import {
 import codeMirrorHook from './codeMirrorHook';
 import handleShortcuts from './shortcuts';
 
-
-
 function websiteCssCheck(activeTab: chrome.tabs.Tab): boolean {
   if (!activeTab?.url
     || activeTab.url.startsWith('chrome')
@@ -127,6 +125,6 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
   if (changeInfo.status === 'complete') {
     insertUserModCss();
     injectCodeMirrorHook();
-    handleShortcuts();
   }
 });
+

chrome-extension/lib/background/shortcuts.ts

@@ -1,21 +1,24 @@
 const handleShortcuts = () => {
-  // console.info('Handling shortcuts');
+  console.info('Handling shortcuts');
   chrome.commands.onCommand.addListener(async command => {
     console.log(`Command: ${command}`);
     switch (command) {
       case 'Open Shortcuts': {
         console.log('Opening shortcuts');
-        // await chrome.action.openPop up();
-        // await chrome.sidePanel.setOptions({ path: 'sidepanel/index.html', enabled: true });
-        // await chrome.sidePanel.open({ windowId: tab.windowId });
-        // await chrome.action.openPopup()
-        // Assuming you have a popup.html file in the root of your extension
-        // const url = chrome.runtime.getURL('popup.html');
-        // await chrome.windows.create({ url, type: 'popup', width: 400, height: 600 });
+        chrome.windows.create({
+          url: chrome.runtime.getURL('popup/index.html#/shortcuts?popup=true'),
+          type: 'popup',
+          width: 800,
+          height: 600,
+        }, (window) => {
+          if (window) {
+            chrome.storage.local.set({ popupWindowId: window.id });
+          }
+        });
       }
     }
   });
-  // console.log('Shortcuts handled');
+  console.log('Shortcuts handled');
 };
 
 export default handleShortcuts;

chrome-extension/manifest.js

@@ -68,6 +68,13 @@ const manifest = {
   //   // sandbox: "sandbox allow-scripts allow-forms allow-popups allow-m odals; script-src 'self' 'unsafe-inline' 'unsafe-eval'; child-src 'self';"
   // },
   commands: {
+    "_execute_action": {
+      suggested_key: {
+        default: 'Ctrl+Tab',
+        mac: 'Command+Tab',
+      },
+      description: "Open the extension"
+    },
     'Open Shortcuts': {
       suggested_key: {
         default: 'Ctrl+Space',

pages/popup/src/Popup.tsx

@@ -1,6 +1,6 @@
 import '@src/Popup.css';
 import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import EnhancedToolbar from './components/Toolbar';
 import { Routing } from './routes';
@@ -15,14 +15,15 @@ const Popup = () => {
   const { currentPage } = useAppContext();
 
   const navigate = useNavigate();
-
+  const location = useLocation();
   console.debug('popup page loaded');
 
   useEffect(() => {
-    if (currentPage) {
+    const params = new URLSearchParams(location.search);
+    if (currentPage && params.get('popup') !== 'true') {
       navigate(currentPage);
     }
-  }, [currentPage, navigate]);
+  }, [currentPage, location.search, navigate]);
 
   return (
     <ThemeProvider theme={theme}>

pages/popup/src/components/ShortcutListener.tsx

@@ -26,6 +26,7 @@ const ShortcutListener = () => {
       // Find a shortcut that matches the pressed key
       const shortcut = shortcuts.find((s: Shortcut) => s.key === event.key.toUpperCase());
       if (shortcut) {
+
         // Go through siteMap.json and find the URL associated with the shortcut
         // The shortcut.destination is the key-path in siteMap.json
         // For example, if shortcut.destination is "Google > Search", the URL is siteMap.Google.Search
@@ -47,7 +48,8 @@ const ShortcutListener = () => {
         }
 
         // Get the active tab and its url
-        chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
+        chrome.tabs.query({ active: true, currentWindow: false }, tabs => {
+          console.log('tabs', tabs)
           const activeTab = tabs[0];
           if (!activeTab.id) {
             return;
@@ -57,18 +59,28 @@ const ShortcutListener = () => {
             return;
           }
 
-          const baseUrl = activeTab.url.split('/')[2];
-          console.log('baseUrl', baseUrl);
-
           // Replace <baseUrl> in the URL with the actual base URL of the current window
+          const baseUrl = activeTab.url.split('/')[2];
           const finalUrl = `https://${urlProperty?.replace('<baseUrl>', baseUrl)}`;
-          // console.log("finalUrl", finalUrl);
-          // chrome.tabs.update(activeTab.id, { url: finalUrl })
 
           // alert(`Navigating to: ${finalUrl}`); // Display a message for testing
           // window.location.href = finalUrl; // Navigate to the URL associated with the shortcut
-          window.open(finalUrl, '_blank');
+          // Close the popup window if it exists
+          chrome.storage.local.get('popupWindowId', (result) => {
+            if (result.popupWindowId) {
+              chrome.windows.remove(result.popupWindowId, () => {
+                chrome.tabs.create({ url: finalUrl });
+                // Optionally, clear the stored popup window ID
+                chrome.storage.local.remove('popupWindowId');
+              });
+            } else {
+              chrome.tabs.create({ url: finalUrl });
+            }
+          });
+
         });
+      } else {
+        console.log('No shortcut found for key:', event.key);
       }
     };
 

pages/popup/src/views/ShortcutsPage.tsx

@@ -16,6 +16,8 @@ const ShortcutsPage: React.FC = () => {
 
   const { shortcuts, setShortcuts } = useAppContext();
 
+  document.title = 'Shortcuts';
+
   // When the user leaves the input field, save the shortcuts to the local storage
   const handleBlur = () => {
     // console.log("Saving shortcuts to storage:", shortcuts);