chore: adapt project to Chrome Web Store requirements

.vscode/settings.json

@@ -16,7 +16,7 @@
     ".dccache": true,
     "**/*.d.ts": true,
     "README.md": true,
-    "design.png": true,
+    "background.png": true,
     "CONTRIBUTING.md": true,
     "LICENSE": true,
   }

README.md

@@ -1,26 +1,31 @@
-<img src="icon.png" alt="CTS" width="124" />
+<img src="./icon.png" alt="Icon" width="90" />
 
 # Chrome Tabs Saver
 
 ## About
 
-A Chrome extension that saves open tabs so you don't lose them or have to dig through your history if you fail to restore them using the native feature.
+An extension for Chrome designed to save the currently open tabs in your window, preventing potential loss or the necessity to dig through your browsing history. It allows you to reopen the active window as it is in its current state and at any time.
 
-## Design
+## UI
 
-<img src="design.png" alt="Design" width="450" />
+![UI](./background.png)
 
 [View on Figma](https://www.figma.com/file/CDFdmXkZOThdpadICe1sOU/Chrome-Tabs-Saver?node-id=0%3A1&t=dKX5HDv1oqKUfk7Z-1)
 
 ## Installation
 
-1. Download `tabs-saver-ce.zip` from [the latest release](https://github.com/THammami01/tabs-saver-ce/releases/)
-2. Unzip it
-3. Go to the extensions tab in Chrome at `chrome://extensions/`
-4. Click on `Load unpacked` and select the unzipped folder
+### Chrome Web Store
 
-## Demo
+[View on Chrome Web Store](https://chromewebstore.google.com/detail/imcblbcheefgipfifboinjofemckfdmk)
 
-https://user-images.githubusercontent.com/50141415/212996321-ad97f85e-40c5-4cb4-8305-20af1bab1ed2.mp4
+### Manual
 
-[View on YouTube](https://youtu.be/yC0htL_Agm0)
+1. Download `tabs-saver-ce.zip` from [the latest release](https://github.com/THammami01/tabs-saver-ce/releases/).
+2. Unzip it.
+3. Go to the extensions tab in Chrome at `chrome://extensions/`.
+4. Click on `Load unpacked` and select the unzipped folder.
+
+## Permissions
+
+- `storage` permission is used to save/get the names and URLs of a window's tabs in/from the local storage.
+- `tabs` permission is used to retrieve the active window's tabs data, specifically the name and URL of each tab.

manifest.json

@@ -10,11 +10,10 @@
     "64": "icon.png",
     "128": "icon.png"
   },
-  "host_permissions": ["<all_urls>"],
   "action": {
     "default_title": "Chrome Tabs Saver",
     "default_icon": "icon.png",
     "default_popup": "index.html"
   },
-  "permissions": ["activeTab", "scripting", "storage", "tabs"]
+  "permissions": ["storage", "tabs"]
 }

src/App.tsx

@@ -1,15 +1,15 @@
 import { useEffect, useState } from 'react';
 
 import { Footer, Header, Main } from './components';
-import { IWindow } from './utils/extension-fns';
+import { IWindow } from './utils/helpers';
 
 const App = () => {
   const [savedWindows, setSavedWindows] = useState<IWindow[]>([]);
 
   useEffect(() => {
-    chrome.storage.local.get(['savedWindows'], ({ savedWindows }) => {
-      setSavedWindows(JSON.parse(savedWindows));
-    });
+    chrome.storage.local.get(['savedWindows'], ({ savedWindows }) =>
+      setSavedWindows(JSON.parse(savedWindows))
+    );
   });
 
   return (

src/components/Footer.tsx

@@ -9,7 +9,7 @@ import {
   getCurrWin,
   getCurrWinTabs,
   saveWindowsInLocalStorage,
-} from '@/utils/extension-fns';
+} from '@/utils/helpers';
 
 import styles from './components.module.scss';
 

src/components/Item.tsx

@@ -6,7 +6,7 @@ import {
   IWindow,
   createNewWin,
   saveWindowsInLocalStorage,
-} from '@/utils/extension-fns';
+} from '@/utils/helpers';
 
 import styles from './components.module.scss';
 
@@ -37,17 +37,16 @@ const Item: FC<ItemProps> = ({ currWin, savedWindows, setSavedWindows }) => {
       if (!winName) {
         (inputRef.current as any).focus();
         return;
-      } else {
-        // TODO: Update window name in savedWindows
-        (inputRef.current as any).blur();
+      }
 
-        const updatedSavedWindows = savedWindows.map((win) =>
-          win.id === currWin.id ? { ...win, name: winName } : win
-        );
+      (inputRef.current as any).blur();
 
-        setSavedWindows(updatedSavedWindows);
-        saveWindowsInLocalStorage(updatedSavedWindows);
-      }
+      const updatedSavedWindows = savedWindows.map((win) =>
+        win.id === currWin.id ? { ...win, name: winName } : win
+      );
+
+      setSavedWindows(updatedSavedWindows);
+      saveWindowsInLocalStorage(updatedSavedWindows);
     } else (inputRef.current as any).focus();
 
     setIsEditing(!isEditing);
@@ -89,6 +88,7 @@ const Item: FC<ItemProps> = ({ currWin, savedWindows, setSavedWindows }) => {
           readOnly={!isEditing}
           ref={inputRef}
           onClick={handleInputClick}
+          onKeyDown={(e) => e.key === 'Enter' && handleRenameWindow(e)}
         />
 
         <div>
@@ -112,7 +112,7 @@ const Item: FC<ItemProps> = ({ currWin, savedWindows, setSavedWindows }) => {
         <>
           <hr />
 
-          <div className={styles.links}>
+          <div className={styles.tabs}>
             {currWin.tabs.map((tab: ITab, idx) => (
               <p key={idx} title={`${tab.title} (${tab.url})`}>
                 {getRenderedHighlightText(tab.title)}

src/components/Main.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 
-import { IWindow } from '@/utils/extension-fns';
+import { IWindow } from '@/utils/helpers';
 
 import Item from './Item';
 import styles from './components.module.scss';

src/components/components.module.scss

@@ -32,6 +32,7 @@
     font-weight: 500;
     font-size: 8px;
     margin-bottom: 10px;
+    font-size: 12px;
   }
 
   .items {
@@ -71,6 +72,7 @@
           color: #d0d0d0;
           border: none;
           outline: none;
+          font-size: 12px;
 
           span {
             color: #808080 !important;
@@ -122,16 +124,16 @@
         margin: 5px -5px;
       }
 
-      .links {
+      .tabs {
         display: flex;
         flex-direction: column;
         gap: 4px;
+        font-size: 12px;
 
         padding: 5px 10px;
         font-family: 'Inconsolata';
         font-style: normal;
         font-weight: 500;
-        font-size: 10px;
         color: #d0d0d0;
       }
     }