Make a version for Firefox

README.md

@@ -106,3 +106,10 @@ Load `dist` directory.
 ## Test
 
 Run `npx jest` or `npm run test`.
+
+## Firefox version
+
+- [Listing](https://addons.mozilla.org/en-US/developers/addon/r3bl-shortlink/)
+- [PR with changes made for this version](https://github.com/r3bl-org/shortlink/pull/40)
+- [Info on porting from chrome to firefox extension](https://decembergarnetsmith.com/2024/05/10/how-to-port-an-mv3-chrome-extension-to-firefox/)
+- [Differences between chrome and firefox extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/background#browser_support)

public/manifest.json

@@ -1,8 +1,13 @@
 {
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "{6cb822ee-13fa-4b44-babf-be5e2c5a27f1}"
+    }
+  },
   "manifest_version": 3,
   "name": "R3BL Shortlink",
   "description": "Make go links",
-  "version": "4.12",
+  "version": "4.13",
   "icons": {
     "16": "icon16.png",
     "32": "icon32.png",
@@ -23,7 +28,10 @@
     "keyword": "go"
   },
   "background": {
-    "service_worker": "js/background.js"
+    "service_worker": "js/background.js",
+    "scripts": [
+      "js/background.js"
+    ]
   },
   "commands": {
     "_execute_action": {

src/app/App.tsx

@@ -42,6 +42,7 @@ import {
 
 export function App() {
   const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const inputReference = useRef<HTMLInputElement>(null);
   const [allShortlinks, setAllShortlinks] = useState<types.Shortlink[]>([])
   const [userInputText, setUserInputText] = useState<string>("")
   const [searchText, setSearchText] = useState<string>("")
@@ -78,6 +79,11 @@ export function App() {
     storage_provider.getBrowserHostProvider().setBadgeText(allShortlinks.length.toString())
   }, [allShortlinks])
 
+  // Focus input on load.
+  useEffect(() => {
+    inputReference?.current?.focus();
+  }, [])
+
   const filteredShortlinks = searchText
     ? allShortlinks.filter((shortlink) => shortlink.name.match(new RegExp(searchText, "i")))
     : allShortlinks
@@ -90,6 +96,7 @@ export function App() {
     return (
       <div id="app">
         <input
+          ref={inputReference}
           autoFocus={true}
           id="shortlink-input"
           placeholder='Type a name for your tab(s) or "copy/c, go/g, delete/d <name>" => Enter'

src/style.css

@@ -30,14 +30,17 @@
   --default-padding: 8px;
   --default-border-radius: 6px;
   --default-border-style: 2px solid rgb(119, 129, 147);
-  --max-height-of-popup: 300px;
-  width: 750px;
   --default-animation-duration: 0.5s;
+  --popup-min-height: 600px;
+  --popup-min-width: 800px;
+}
+
+html {
+  min-height: var(--popup-min-height);
+  min-width: var(--popup-min-width);
 }
 
 body {
-  width: 100%;
-  height: 100%;
   margin: var(--default-margin);
   padding: var(--default-padding);
   background: #5f6176;
@@ -48,7 +51,6 @@ body {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  max-height: var(--max-height-of-popup);
   overflow-y: auto;
 }