EOL update: Updated relevant changes from Browser extension version 1.03

Author: webdevsk

README.md

@@ -5,11 +5,16 @@
         <img width="100" height="100" src="./src/logo.png" alt="sweeper logo"/>
     </a>
 
-<h2 align="center">FB Mobile - Clean my feeds (UserScript)</h2>
+<h2 align="center">FB Mobile - Clean my feeds (UserScript)(EOL)</h2>
 
 | [![GreasyFork][GreasyForkShield]](https://greasyfork.org/en/scripts/479868-fb-mobile-clean-my-feeds) | [![GitHub][GitHubShield]](https://github.com/webdevsk/FB-Mobile-Clean-my-feeds) |
 |----------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------|
 
+**⚠️ End of Life for the UserScript**
+#### Due to the bloat, compatibility issues with Userscript managers and their instability on Mobile browsers, I've ported this userscript to a standalone Browser Extension ensuring stability, easy installation and additional PWA capabilities. So while this userscript works, I will not be maintaining it anymore. 
+
+#### Please refer to the Browser extension repo to install it from your preferred Extension Store (Available in both Chrome Web Store and Mozilla Addon Store for Firefox): [FB Mobile - Clean my feeds (Browser Extension)](https://github.com/webdevsk/fb-mobile-clean-my-feeds-ext/)
+
 </div>
 
 <br />
@@ -88,6 +93,12 @@ Please refer to this link to find other alternatives if my suggested combination
 
 
 ### Changelog
+- **v1.03**-EOL
+  - Updated relevant changes from Browser extension version 1.03 
+- **v1.02**
+  - Improved compatibility with other userscript managers that don't support GM_addValueChangeListener api
+- **v1.01**
+  - Improved navigation detection
 - **v1.00**
   - Source code converted to TypeScript and split into multiple files as it was getting harder to maintain in a single file. Please refer to [Contribution][Contribution] page for more information including the build process.
   - Full code overhaul. Made to be more maintainable and easier to understand. As well as easily extendable and efficient on browser performance.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fb-mobile-clean-my-feeds",
-  "version": "1.02",
+  "version": "1.03",
   "author": "https://github.com/webdevsk",
   "repository": {
     "type": "git",

src/config.ts

@@ -49,7 +49,7 @@ export type MainPagesBasedOnNavBarButtons =
 /**
  * pages to run the script on
  */
-export const runScriptOn: MainPagesBasedOnNavBarButtons[] = ["feed", "videos"]
+export const runScriptOn: MainPagesBasedOnNavBarButtons[] = ["feed"]
 /**
  * showPlaceholder is whether to show placeholder or not
  */

src/index.ts

@@ -8,17 +8,23 @@ import { registerAutoReloadAfterIdle } from "@/lib/register-auto-reload-after-id
 import { runFeedsCleaner } from "@/lib/run-feeds-cleaner"
 import { SettingsMenuInjector } from "@/lib/settings-menu-injector"
 import { updateThemeConfigWhenPossible } from "@/lib/updateThemeConfigWhenPossible"
-import STYLES from "@/styles/style.css"
+import STYLES from "@/style.css"
+import { injectConsole } from "@/utils/inject-console"
+import { removeAppInstallPrompt } from "@/lib/remove-app-install-prompt"
 ;(() => {
 	// Make sure this is the React-Mobile version of facebook
 	if (document.body.id !== bodyId) {
 		console.error("ID 'app-body' not found.")
 		return
 	}
 
+	injectConsole("FB Mobile - Clean my feeds (UserScript)")
+	GM_addStyle(STYLES)
+
 	onReadyForScripting(() => {
 		console.log("Ready for scripting")
-		const styleNode = GM_addStyle(STYLES)
+
+		removeAppInstallPrompt()
 		// Store all abort functions
 		const aborts: Array<() => void> = [
 			updateThemeConfigWhenPossible(),
@@ -45,7 +51,6 @@ import STYLES from "@/styles/style.css"
 
 		return () => {
 			console.log("Not Ready for scripting")
-			styleNode.remove()
 			// Cleanup code like removing dom nodes and destroying event listeners
 			aborts.forEach(abort => abort?.())
 			aborts.length = 0

src/lib/remove-app-install-prompt.ts

@@ -0,0 +1,13 @@
+import { devMode } from "@/config"
+
+export const removeAppInstallPrompt = () => {
+	const node = document.querySelector<HTMLDivElement>(
+		'[data-screen-id]:first-child [data-comp-id~="22222"]'
+	)
+	if (!node) {
+		if (devMode) console.log("App install prompt node status: ", node)
+		return
+	}
+	if (devMode) console.log("Setting styles for App install prompt")
+	node.style.display = "none"
+}

src/lib/settings-menu-injector.ts

@@ -83,7 +83,8 @@ export class SettingsMenuInjector {
 	}
 
 	private handleDocumentClick = (event: MouseEvent) => {
-		const target = event.target as HTMLElement
+		const { target, x, y } = event
+		if (!(target instanceof HTMLElement)) return
 
 		if (target.matches("#settingsBtn")) {
 			this.show()
@@ -105,6 +106,14 @@ export class SettingsMenuInjector {
 					target: document.querySelector(screenRootSelector)!,
 				}
 			)
+		} else if (target.matches(`#${this.overlayId}`)) {
+			const { left, right, top, bottom } = target
+				.querySelector(".settings-container")!
+				.getBoundingClientRect()
+			// When clicked on the empty space
+			if (!(x >= left && x <= right && y >= top && y <= bottom)) {
+				this.hide()
+			}
 		}
 	}
 

src/styles/style.css src/style.csssrc/styles/style.css renamed to src/style.css

@@ -1,3 +1,11 @@
+/* DOM fixes */
+
+/* fix comment box height */
+textarea[style*="height"] {
+    height: 100% !important;
+}
+
+/* Script styles */
 .dialog-screen {
 	position: fixed;
 	inset: 0;
@@ -190,10 +198,6 @@ div[data-purged="true"] {
 	}
 }
 
-/* Removes app install prompt */
-[data-screen-id]:first-child [data-comp-id~="22222"] {
-	display: none !important;
-}
 
 #block-counter {
 	position: fixed;

src/utils/inject-console.ts

@@ -0,0 +1,14 @@
+const consoleMethodsThatDontBreakWhenArgumentIsString = ["log", "error", "warn", "info", "debug", "trace"]
+
+/** Styles console.log and console.error prefixing the extension name */
+export function injectConsole(prefix: string) {
+  const originalConsole = globalThis.console
+  globalThis.console = new Proxy(originalConsole, {
+    get(target, prop, receiver) {
+      const method = Reflect.get(target, prop, receiver)
+      return consoleMethodsThatDontBreakWhenArgumentIsString.some((propName) => propName === prop)
+        ? method.bind(target, `[${prefix}]\n`)
+        : method
+    },
+  })
+}