update version

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "Better Snapchat",
-  "version": "1.0.0",
+  "name": "better_snapchat",
+  "version": "1.1.0",
   "description": "This browser extension enhances your web.snapchat.com experience by adding several essential privacy features.",
   "main": "esbuild.config.js",
   "scripts": {
@@ -24,7 +24,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@nextui-org/react": "^2.1.13",
+    "@nextui-org/react": "^1.0.0-beta.12",
     "cookies-js": "^1.2.3",
     "eventemitter3": "^5.0.1",
     "react": "^18.2.0",
@@ -35,7 +35,6 @@
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.6",
     "@typescript-eslint/eslint-plugin": "^6.7.3",
-    "@typescript-eslint/parser": "^5.59.1",
     "esbuild": "^0.18.8",
     "esbuild-css-modules-plugin": "^2.7.1",
     "esbuild-plugin-import-glob": "^0.1.1",

src/common/constants.ts

@@ -7,13 +7,15 @@ export enum DynamicRuleIds {
 export enum SettingIds {
   ALLOW_SCREENSHOT = 'ALLOW_SCREENSHOT',
   PREVENT_TYPING_NOTIFICATION = 'PREVENT_TYPING_NOTIFICATION',
-  SAVE_IMAGE_BUTTON = 'SAVE_IMAGE_BUTTON',
+  SAVE_IMAGE = 'SAVE_IMAGE_BUTTON',
+  ALWAYS_PRESENT = 'ALWAYS_PRESENT',
 }
 
 export const DefaultSettingValues = {
   [SettingIds.ALLOW_SCREENSHOT]: true,
   [SettingIds.PREVENT_TYPING_NOTIFICATION]: false,
-  [SettingIds.SAVE_IMAGE_BUTTON]: true,
+  [SettingIds.SAVE_IMAGE]: true,
+  [SettingIds.ALWAYS_PRESENT]: false,
 };
 
 export const EventTypes = {

src/content/modules/allow-screenshot/index.ts

@@ -8,12 +8,9 @@ function preventPropogation(event: KeyboardEvent) {
   if (!Keys.has(event.keyCode) && event.key !== 'PrintScreen') {
     return;
   }
-
   event.stopImmediatePropagation();
 }
 
-let listener: any = null;
-
 class AllowScreenshot {
   constructor() {
     this.load();
@@ -22,14 +19,10 @@ class AllowScreenshot {
 
   load() {
     const enabled = settings.getSetting(SettingIds.ALLOW_SCREENSHOT);
-
-    if (enabled && listener == null) {
+    if (enabled) {
       window.addEventListener('keydown', preventPropogation, true);
-    }
-
-    if (!enabled && listener != null) {
+    } else {
       window.removeEventListener('keydown', preventPropogation, true);
-      listener = null;
     }
   }
 }

src/content/modules/always-present/index.ts

@@ -0,0 +1,63 @@
+import { EventTypes, SettingIds } from '../../../common/constants';
+import dom from '../../../content/observers/dom';
+import settings from '../../lib/settings';
+import styles from './styles.module.css';
+
+const CHAT_ROOM = 'ul'; // TODO: find better selector
+
+let mutationObserver: MutationObserver | null = null;
+
+class AlwaysPresent {
+  constructor() {
+    settings.on(`${SettingIds.ALWAYS_PRESENT}.${EventTypes.SETTING_UPDATE}`, () => {
+      const nodes = document.querySelectorAll(CHAT_ROOM);
+      for (const node of nodes) {
+        const id = node.getAttribute('id');
+        if (!id?.startsWith('cv-')) {
+          continue;
+        }
+        this.attachObserver(node);
+      }
+    });
+    dom.on(CHAT_ROOM, (node: HTMLElement) => {
+      const id = node.getAttribute('id');
+      if (!id?.startsWith('cv-')) {
+        return;
+      }
+      this.attachObserver(node);
+    });
+  }
+
+  attachObserver(node: HTMLElement) {
+    const enabled = settings.getSetting(SettingIds.ALWAYS_PRESENT);
+    node.classList.toggle(styles.alwaysVisible, true);
+
+    if (mutationObserver != null) {
+      mutationObserver.disconnect();
+      mutationObserver = null;
+    }
+
+    if (!enabled) {
+      return;
+    }
+
+    mutationObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.attributeName !== 'aria-hidden') {
+          continue;
+        }
+        const target = mutation.target as HTMLElement;
+        const previousSibling = target.previousElementSibling as HTMLElement;
+        if (previousSibling == null) {
+          continue;
+        }
+        const shouldHide = target.getAttribute('aria-hidden') === 'true';
+        previousSibling.classList.toggle(styles.hideOverlay, shouldHide);
+      }
+    });
+
+    mutationObserver.observe(node, { attributeFilter: ['aria-hidden'], attributes: true });
+  }
+}
+
+export default new AlwaysPresent();

src/content/modules/always-present/styles.module.css

@@ -0,0 +1,6 @@
+.alwaysVisible {
+  visibility: unset !important;
+}
+.hideOverlay {
+  display: none !important;
+}

src/content/modules/save-image/index.ts

@@ -1 +1,47 @@
-import './SaveButton';
+import { EventTypes, SettingIds } from '../../../common/constants';
+import settings from '../../lib/settings';
+import dom from '../../../content/observers/dom';
+import styles from './styles.module.css';
+
+const MEDIA_CONTENT_SELECTOR = 'div[aria-label="media content"]';
+
+function preventContextMenu(event: MouseEvent) {
+  event.stopImmediatePropagation();
+}
+
+class SaveImage {
+  constructor() {
+    this.load();
+    settings.on(`${SettingIds.SAVE_IMAGE}.${EventTypes.SETTING_UPDATE}`, this.load);
+    dom.on(MEDIA_CONTENT_SELECTOR, (node: HTMLElement) => {
+      this.patchMediaContent(node);
+    });
+  }
+
+  load() {
+    const enabled = settings.getSetting(SettingIds.SAVE_IMAGE);
+
+    if (enabled) {
+      window.addEventListener('contextmenu', preventContextMenu, true);
+      const mediaContent = document.querySelectorAll(MEDIA_CONTENT_SELECTOR);
+      for (const node of mediaContent) {
+        this.patchMediaContent(node as HTMLElement);
+      }
+    }
+
+    if (!enabled) {
+      window.removeEventListener('contextmenu', preventContextMenu, true);
+      const mediaContent = document.querySelectorAll(MEDIA_CONTENT_SELECTOR);
+      for (const node of mediaContent) {
+        this.patchMediaContent(node as HTMLElement);
+      }
+    }
+  }
+
+  patchMediaContent(node: HTMLElement) {
+    const enabled = settings.getSetting(SettingIds.SAVE_IMAGE);
+    node.classList.toggle(styles.patchedMediaContent, enabled);
+  }
+}
+
+export default new SaveImage();

src/content/modules/save-image/styles.module.css

@@ -0,0 +1,4 @@
+.patchedMediaContent {
+  pointer-events: unset !important;
+  filter: unset !important;
+}

src/content/modules/settings-menu/components/AlwaysPresent.tsx

@@ -0,0 +1,22 @@
+import { Checkbox, Text } from '@nextui-org/react';
+import React from 'react';
+import { SettingIds } from '../../../../common/constants';
+import useSettingState from '../../../common/hooks/useSettingState';
+import styles from './Checkbox.module.css';
+
+export default function AlwaysPresent() {
+  const [value, setValue] = useSettingState(SettingIds.ALWAYS_PRESENT);
+
+  return (
+    <Checkbox isSelected={value} onChange={(boolean) => setValue(boolean)}>
+      <div className={styles.checkboxLabel}>
+        <Text size={14} css={{ margin: 0 }}>
+          Always Present
+        </Text>
+        <Text size={14} color="#999" css={{ margin: 0 }}>
+          Prevent the chat from being hidden when you click away.
+        </Text>
+      </div>
+    </Checkbox>
+  );
+}

src/content/modules/settings-menu/components/Modal.tsx

@@ -4,6 +4,7 @@ import AllowScreenshot from './AllowScreenshot';
 import PreventTypingNotification from './PreventTyping';
 import SaveImage from './SaveImage';
 import styles from './Modal.module.css';
+import AlwaysPresent from './AlwaysPresent';
 
 export default function App({ visible, closeHandler }: { visible: boolean; closeHandler: () => void }) {
   return (
@@ -18,6 +19,7 @@ export default function App({ visible, closeHandler }: { visible: boolean; close
           <AllowScreenshot />
           <PreventTypingNotification />
           <SaveImage />
+          <AlwaysPresent />
         </div>
       </Modal.Body>
       <Modal.Footer>

src/content/modules/settings-menu/components/PreventTyping.tsx

@@ -14,7 +14,7 @@ export default function PreventTypingNotification() {
           Prevent Typing Notification
         </Text>
         <Text size={14} color="#999" css={{ margin: 0 }}>
-          Don&apos;t notify recipient when you begin typing.
+          Prevent a push notification from being sent when you type a message.
         </Text>
       </div>
     </Checkbox>

src/content/modules/settings-menu/components/SaveImage.tsx

@@ -5,16 +5,16 @@ import useSettingState from '../../../common/hooks/useSettingState';
 import styles from './Checkbox.module.css';
 
 export default function SaveImage() {
-  const [value, setValue] = useSettingState(SettingIds.SAVE_IMAGE_BUTTON);
+  const [value, setValue] = useSettingState(SettingIds.SAVE_IMAGE);
 
   return (
     <Checkbox isSelected={value} onChange={(boolean) => setValue(boolean)}>
       <div className={styles.checkboxLabel}>
         <Text size={14} css={{ margin: 0 }}>
-          Save Image Button
+          Allow Save Image
         </Text>
         <Text size={14} color="#999" css={{ margin: 0 }}>
-          Add button to silently save images to desktop.
+          Prevent media blurring and allow right-click save on image and videos.
         </Text>
       </div>
     </Checkbox>

src/content/observers/dom.ts

@@ -37,14 +37,11 @@ class NodeObserver extends EventEmitter {
   }
 
   // @ts-ignore
-  on(selector: string, callback: () => any) {
+  on(selector: string, callback: (node: HTMLElement) => any) {
     this.selectors.push(selector);
-
     super.on(selector, callback);
-
     return () => {
       super.off(selector, callback);
-
       this.selectors = this.selectors.filter((_selector) => _selector !== selector);
     };
   }