Merge pull request #8 from lirena00/v1.1.0

updated to v1.1.0

Author: lirena00

README.md

@@ -2,8 +2,17 @@
 
 A sleek browser extension that turns your web browsing experience into grayscale, helping reduce digital distractions and avoid doomscrolling.
 
-![Version](https://img.shields.io/badge/version-1.0.0-black)
-![License](https://img.shields.io/badge/license-MIT-gray)
+![Version](https://img.shields.io/badge/version-1.1.0-black)
+![License](https://img.shields.io/badge/license-MIT-black)
+
+<p align="center">
+  <a href="https://chromewebstore.google.com/detail/monochromate/hafcajcllbjnoolpfngclfmmgpikdhlm">
+    <img src="./src/public/chrome_badge.svg" alt="Chrome" />
+  </a>
+  <a href="https://addons.mozilla.org/en-US/firefox/addon/monochromate/">
+    <img src="./src/public/firefox_badge.svg" alt="Firefox" />
+  </a>
+</p>
 
 ## ✨ Features
 
@@ -38,7 +47,8 @@ This will build the extension in **watch mode**, so changes automatically reflec
 To generate an optimized build:
 
 ```bash
-npm build
+npm zip
+npm zip:firefox
 ```
 
 This creates a final version inside the `dist/` folder, ready for submission to the Chrome Web Store and Mozilla Add-ons.

package.json

@@ -2,7 +2,7 @@
   "name": "monochromate",
   "description": "An extension that greyscales the webpage to reduce doomscrolling",
   "private": true,
-  "version": "1.0.2",
+  "version": "1.1.0",
   "type": "module",
   "scripts": {
     "dev": "wxt",

src/entrypoints/background.ts

@@ -101,12 +101,12 @@ export default defineBackground(() => {
                       width: 100vw;
                       height: 100vh;
                       pointer-events: none;
-                      z-index: 100;
-                      backdrop-filter: grayscale(${intensity}%) !important;
+                       z-index: 2147483647;
+                      backdrop-filter: grayscale(${intensity}%) ;
                     `;
                     document.documentElement.appendChild(overlay);
                   } else {
-                    overlay.style.backdropFilter = `grayscale(${intensity}%) !important`;
+                    overlay.style.backdropFilter = `grayscale(${intensity}%)`;
                   }
                 },
                 args: [intensity],

src/entrypoints/content.ts

@@ -17,11 +17,11 @@ const createOrUpdateOverlay = (intensity: number) => {
       height: 100vh;
       pointer-events: none;
       z-index: 2147483647;
-      backdrop-filter: grayscale(${intensity}%) !important;
+      backdrop-filter: grayscale(${intensity}%) ;
     `;
     document.documentElement.appendChild(overlay);
   } else {
-    overlay.style.backdropFilter = `grayscale(${intensity}%) !important`;
+    overlay.style.backdropFilter = `grayscale(${intensity}%) `;
   }
 };
 

src/entrypoints/popup/App.css

@@ -0,0 +1,33 @@
+/* Global scrollbar styles */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #d1d1d1;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a1a1a1;
+}
+
+/* Target specific scrollable areas */
+.overflow-y-auto::-webkit-scrollbar {
+  width: 4px;
+}
+
+.overflow-y-auto::-webkit-scrollbar-thumb {
+  background: #d1d1d1;
+}
+
+/* For Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #d1d1d1 transparent;
+}