fix: add firefox compatibility

build.sh

@@ -9,9 +9,11 @@ npm run build
 # Check if --firefox argument was passed
 if [ "$1" = "--firefox" ]; then
    # Copy to firefox/manifest.json
-   cp src/manifest.json firefox/manifest.json
+   echo "Built for Firefox..."
+   cp firefox/manifest.json dist/manifest.json
 else
    # Copy to dist/manifest.json
+   echo "Built for Chrom(ium)e..."
    cp src/manifest.json dist/manifest.json
 fi
 

firefox/manifest.json

@@ -24,15 +24,23 @@
     "48": "./48.png",
     "128": "./128.png"
   },
-  "permissions": ["tabs", "http://*/*", "https://*/*"],
+  "permissions": ["storage", "activeTab", "tabs", "bookmarks", "contextMenus", "http://*/*", "https://*/*"],
   "commands": {
     "_execute_action": {
       "suggested_key": {
-        "default": "Alt+Shift+K",
-        "mac": "MacCtrl+Shift+K"
+        "default": "Ctrl+Shift+V",
+        "mac": "Command+Shift+K"
       }
     }
   },
+  "omnibox": {
+    "keyword": "lk"
+  },
+  "background": {
+    "scripts": ["background.js"],
+    "persistent": false,
+    "type": "module"
+  },
   "browser_specific_settings": {
     "gecko": {
       "id": "[email protected]",

package.json

@@ -40,6 +40,7 @@
     "zod": "^3.21.4"
   },
   "devDependencies": {
+    "@types/firefox-webext-browser": "^120.0.0",
     "@types/node": "^20.4.8",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",

src/@/components/BookmarkForm.tsx

@@ -144,10 +144,10 @@ const BookmarkForm = () => {
 
   useEffect(() => {
     getCurrentTabInfo().then(({ url, title }) => {
-      form.setValue('url', url);
-      form.setValue('description', title);
+      form.setValue('url', url ? url : '');
+      form.setValue('description', title ? title : '');
       // Had to be done since, name isn't required but when syncing it is. If not it looks bad!.
-      form.setValue('name', title);
+      form.setValue('name', title ? title : '');
     });
     const getConfig = async () => {
       configured = await isConfigured();

src/@/components/Modal.tsx

@@ -12,7 +12,7 @@ const Modal: FC<ModalProps> = ({ open }) => {
   return (
     <div className="fixed top-0 bottom-0 left-0 right-0 inset-0 bg-white z-10">
       <div className="container flex flex-col gap-3 justify-center items-center h-full max-w-lg mx-auto">
-        <h2 className="text-lg text-zinc-700">Initial Config</h2>
+        <h2 className="text-lg text-zinc-700 ">Initial Config</h2>
 
         <div className="flex justify-center items-center">
           <Button onClick={() => openOptions()} className="w-40">

src/@/lib/cache.ts

@@ -101,7 +101,9 @@ export async function saveLinksInCache(baseUrl: string) {
       if (indexToRemove !== -1) {
         bookmarksMetadata.splice(indexToRemove, 1);
         console.log(bookmarksToRemove)
-        browser.bookmarks.remove(bookmarkToRemove.bookmarkId);
+        if (bookmarkToRemove.bookmarkId != null) {
+          await browser.bookmarks.remove(bookmarkToRemove.bookmarkId);
+        }
       }
     }
 
@@ -128,6 +130,7 @@ export async function syncLocalBookmarks(baseUrl: string) {
     // Retrieve all local bookmarks
     const [root] = await getCurrentBookmarks();
     const localBookmarks: bookmarkMetadata[] = [];
+    if (!root.children) return;
     logBookmarks(root.children, localBookmarks);
 
     // Load cached bookmarks metadata

src/@/lib/config.ts

@@ -8,6 +8,7 @@ const DEFAULTS: optionsFormValues = {
   syncBookmarks: false,
   usingSSO: false,
 };
+
 const CONFIG_KEY = 'lw_config_key';
 
 export async function getConfig(): Promise<optionsFormValues> {
@@ -25,5 +26,5 @@ export async function isConfigured() {
 }
 
 export async function clearConfig() {
-  return await setStorageItem(CONFIG_KEY, JSON.stringify({ baseUrl: '', username: '', password: '', syncBookmarks: false }));
-}
+  return await setStorageItem(CONFIG_KEY, JSON.stringify({ baseUrl: '', username: '', password: '', syncBookmarks: false, usingSSO: false }));
+}

src/@/lib/utils.ts

@@ -10,7 +10,7 @@ export interface TabInfo {
   title: string;
 }
 
-export async function getCurrentTabInfo(): Promise<TabInfo> {
+export async function getCurrentTabInfo(): Promise<{ title: string | undefined; url: string | undefined }> {
   const tabs = await getBrowser().tabs.query({ active: true, currentWindow: true });
   const { url, title } = tabs[0];
   return { url, title };
@@ -29,13 +29,14 @@ export function getChromeStorage() {
 
 export async function getStorageItem(key: string) {
   if (getChromeStorage()) {
-    const result = await chrome.storage.local.get([key]);
+    const result = await getBrowser().storage.local.get([key]);
     return result[key];
   } else {
     return localStorage.getItem(key);
   }
 }
 
+
 export async function setStorageItem(key: string, value: string) {
   if (getChromeStorage()) {
     return await chrome.storage.local.set({ [key]: value });
@@ -47,4 +48,4 @@ export async function setStorageItem(key: string, value: string) {
 
 export function openOptions() {
   getBrowser().runtime.openOptionsPage();
-}
+}

src/pages/Background/index.ts

@@ -163,7 +163,9 @@ browser.bookmarks.onRemoved.addListener(async (id: string, removeInfo: chrome.bo
 // This is for the context menus!
 // Example taken from: https://github.com/GoogleChrome/chrome-extensions-samples/blob/main/api-samples/contextMenus/basic/sample.js
 
-browser.contextMenus.onClicked.addListener(async (info: OnClickData, tab: chrome.tabs.Tab | undefined) => {
+browser.contextMenus.onClicked.addListener(async (info, tab) => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
   await genericOnClick(info, tab);
 });
 
@@ -311,13 +313,15 @@ browser.omnibox.onInputEntered.addListener(async (content: string, disposition:
 
   switch (disposition) {
     case "currentTab":
-      browser.tabs.update({ url });
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      await browser.tabs.update({ url });
       break;
     case "newForegroundTab":
-      browser.tabs.create({ url });
+      await browser.tabs.create({ url });
       break;
     case "newBackgroundTab":
-      browser.tabs.create({ url, active: false });
+      await browser.tabs.create({ url, active: false });
       break;
   }
 });

src/pages/Options/App.tsx

@@ -5,7 +5,7 @@ import OptionsForm from '../../@/components/OptionsForm.tsx';
 
 const App = () => {
   return (
-    <WholeContainer className="max-h-[725px]">
+    <WholeContainer className="max-h-[750px]">
       <Container>
         <div className="justify-center items-center p-2 flex">
           <h1 className="text-lg">Options configuration</h1>