Merge pull request #22 from koloml/feature/firefox-support

Tested for Firefox, preparing for release to Firefox addon store

README.md

@@ -1,4 +1,26 @@
 # Furbooru Tagging Assistant
 
 This is a browser extension written for the [Furbooru](https://furbooru.org) image-board. It gives you the ability to
-tag the images more easily and quickly.
+tag the images more easily and quickly.
+
+## Building
+
+Recommendations on environment:
+
+- Recommended version of Node.js: LTS (20)
+
+First you need to clone the repository and install all packages:
+
+```shell
+npm install --save-dev
+```
+
+Second, you need to run the `build` command. It will first build the popup using SvelteKit and then build all the 
+content scripts/stylesheets and copy the manifest afterward. Simply run:
+
+```shell
+npm run build
+```
+
+When building is complete, resulting files can be found in the `/build` directory. These files can be either used 
+directly in Chrome (via loading the extension as unpacked extension) or manually compressed into `*.zip` file.  

src/lib/extension/ConfigurationController.js

@@ -1,4 +1,4 @@
-import StorageHelper from "$lib/chrome/StorageHelper.js";
+import StorageHelper from "$lib/browser/StorageHelper.js";
 
 export default class ConfigurationController {
   /** @type {string} */
@@ -79,4 +79,4 @@ export default class ConfigurationController {
   }
 
   static #storageHelper = new StorageHelper(chrome.storage.local);
-}
+}

src/lib/extension/EntitiesController.js

@@ -1,4 +1,4 @@
-import StorageHelper from "$lib/chrome/StorageHelper.js";
+import StorageHelper from "$lib/browser/StorageHelper.js";
 
 export default class EntitiesController {
   static #storageHelper = new StorageHelper(chrome.storage.local);
@@ -90,4 +90,4 @@ export default class EntitiesController {
 
     return () => this.#storageHelper.unsubscribe(storageChangesSubscriber);
   }
-}
+}

src/routes/+layout.svelte

@@ -2,6 +2,10 @@
     import "../styles/popup.scss";
     import Header from "$components/layout/Header.svelte";
     import Footer from "$components/layout/Footer.svelte";
+
+    // Sort of a hack, detect if we rendered in the browser tab or in the popup.
+    // Popup will always should have fixed 320px size, otherwise we consider it opened in the tab.
+    document.body.classList.toggle('is-in-tab', window.innerWidth > 320);
 </script>
 
 <Header/>

src/styles/popup.scss

@@ -10,12 +10,21 @@
   font-size: inherit;
 }
 
+body {
+  width: 320px;
+
+  // Hacky class which is added by the JavaScript indicating that page was (probably) opened in the tab
+  &.is-in-tab {
+    width: 100%;
+    max-width: 640px;
+    margin: 0 auto;
+  }
+}
+
 html, body {
   background-color: colors.$background;
   color: colors.$text;
   font-size: 16px;
-  min-width: 320px;
-  max-height: min(100vh, 320px);
   font-family: verdana, arial, helvetica, sans-serif;
   margin: 0;
   padding: 0;