Merge pull request #16 from webdevsk/dev - Now works in "Watch" page as well. Fixed missing comment box. Improved location detection

Now works in "Watch" page as well. Fixed missing comment box. Improved location detection

Author: webdevsk

CONTRIBUTION.md

@@ -41,7 +41,7 @@ bun run build:greasyfork
 
 * [dist](dist) - Built files (Output)
 * [src](src) - Source files
-	+ [config.ts](src/config.ts) - Global config like devMode, pathnameMatches, node selectors, theme configuration, etc
+	+ [config.ts](src/config.ts) - Global config like devMode, runScriptOn, node selectors, theme configuration, etc
 	+ [index.ts](src/index.ts) - Entry point. Code starts here
 	+ [data](src/data) - Data files
 		- [filters-database.ts](src/data/filters-database.ts) - Filter database. This is where you can add new categories, as well as the entries for settings menu

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fb-mobile-clean-my-feeds",
-  "version": "1.00",
+  "version": "1.01",
   "author": "https://github.com/webdevsk",
   "repository": {
     "type": "git",
@@ -44,6 +44,7 @@
     "@icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAbwAAAG8B8aLcQwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAHZSURBVDiNnZFLSFRxFMa/c1/jjIzYpGEjxFQUCC5a9BKJIAtRzEXEFaJFZXRrIQMtk3a1lWo3iwqkTS0kZyGCA4VNFNEmWwU9MIoiscZp7jzuvf9zWogXogS9Z3fO4fv4feeQiCBKjY8M9Nca3lUtkhqAUnwNoPcUheC63b+z5qm3nmelIxGwkMMir+/MzJSNzYodZ7/ZolKXADoDAJsmSJXahpXiXxPThdlIBlCSFUh+rd1wBNvuttLu1sOGae7zYjy4Nt8QgXpoXbzf9/HVYNfi3O+KK5XP5V3rEti2rde3pHvyuVtFAMB8/JjWJLlEU0M7nlnE0e1fjGVqPgVg4b8E0rHnHoSeDY1mx/CCUiIyiVZdQ8YE7bVgdpCWCqrj6xIQ0Rtm/qlB3okXywHoDJcxAnWa0OPtpb8M8nPP06V6tVD3/Mqj2zcOApjA0/g5AU6HYl7llcAANP4WHnH6SfEQ65hPJuJdvh8cuDs165y8nO1bqiZb4KoyVhhYVoDLqxEDAwT+EBqwwAGwm4jQmmyGF/g3Y3pi+MLU2U9UCjKUwCga/BUmAT8CiDIAnRfCyI8LxSNCeABgh1uro+zWlq7YQ9v++WXe7GWDziu/bcS0+AQGvr8EgD/aK7uaswjePgAAAABJRU5ErkJggg==",
     "@require": [],
     "@grant": [
+      "unsafeWindow",
       "GM_getValue",
       "GM_setValue",
       "GM_addStyle",

src/config.ts

@@ -2,10 +2,6 @@
  * Enables verbose console logging and counter
  */
 export const devMode = false
-/**
- * pathnameMatches is the list of paths to match. If any of them matches, the script will run
- */
-export const pathnameMatches = ["/"]
 /**
  * bodyId is the id of the body element. Comes with HTML. It will surely be there
  */
@@ -26,13 +22,34 @@ export const postContainerSelector = "[data-pull-to-refresh-action-id]"
 /**
  * possibleTargetsInPost are the elements which may contain our target keywords
  */
+
 export const possibleTargetsSelectorInPost =
 	"span.f2:not(.a), span.f5, [style^='margin-top:9px; height:21px'] > .native-text"
 
 /**
  * navBarSelector is the element which contains the navigation bar
  */
 export const navBarSelector = "[role='tablist']"
+/**
+ * aria-label of the main navigation bar buttons. The active one should have the attribute aria-selected="true"
+ */
+export const ariaLabelOfNavBarButtons = {
+	feed: "feed",
+	friends: "friends",
+	messages: "messages",
+	videos: "videos",
+	notifications: "notifications",
+	marketplace: "marketplace",
+} as const
+/**
+ * Main pages based on navigation bar buttons
+ */
+export type MainPagesBasedOnNavBarButtons =
+	(typeof ariaLabelOfNavBarButtons)[keyof typeof ariaLabelOfNavBarButtons]
+/**
+ * pages to run the script on
+ */
+export const runScriptOn: MainPagesBasedOnNavBarButtons[] = ["feed", "videos"]
 /**
  * showPlaceholder is whether to show placeholder or not
  */

src/index.ts

@@ -1,5 +1,6 @@
 import { bodyId, devMode } from "@/config"
 import { BlockCounter } from "@/lib/block-counter"
+import { getCurrentPage } from "@/lib/get-current-page"
 import { makeNavbarSticky } from "@/lib/make-navbar-sticky"
 import { MenuButtonsInjector } from "@/lib/menu-buttons-injector"
 import { onReadyForScripting } from "@/lib/on-ready-for-scripting"
@@ -9,28 +10,33 @@ import { SettingsMenuInjector } from "@/lib/settings-menu-injector"
 import { updateThemeConfigWhenPossible } from "@/lib/updateThemeConfigWhenPossible"
 import { WhitelistedFiltersStorage } from "@/lib/whitelisted-filters-storage"
 import STYLES from "@/styles/style.css"
-
 ;(() => {
 	// Make sure this is the React-Mobile version of facebook
 	if (document.body.id !== bodyId) {
 		console.error("ID 'app-body' not found.")
 		return
 	}
-	if (!document.head.contains(GM_addStyle(STYLES)))
-		console.error("Failed to add style node")
 
 	onReadyForScripting(() => {
 		console.log("Ready for scripting")
+		const styleNode = GM_addStyle(STYLES)
 		// Store all abort functions
 		const aborts: Array<() => void> = [
 			updateThemeConfigWhenPossible(),
 			// Show counter on top
 			...(devMode ? [BlockCounter.getInstance().register()] : []),
 			WhitelistedFiltersStorage.getInstance().register(),
-			// Inject menu buttons [settings, feed]
-			MenuButtonsInjector.getInstance().inject(),
-			// Setup settingsMenu listeners and return cleanup function
-			SettingsMenuInjector.getInstance().inject(),
+
+			// Inject menu buttons and settingsMenu only if we are on the feed page
+			...(getCurrentPage() === "feed"
+				? [
+						// Inject menu buttons [settings, feed]
+						MenuButtonsInjector.getInstance().inject(),
+						// Setup settingsMenu listeners and return cleanup function
+						SettingsMenuInjector.getInstance().inject(),
+					]
+				: []),
+
 			// Main cleaner
 			runFeedsCleaner(),
 			// Auto reload after idle
@@ -41,6 +47,7 @@ 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/get-current-page.ts

@@ -0,0 +1,14 @@
+import { type MainPagesBasedOnNavBarButtons, navBarSelector } from "@/config"
+
+/**
+ * Returns the current page based on navigation bar buttons. Must be called after ensuring routeNode is present.
+ * @returns The current page based on navigation bar buttons
+ */
+export const getCurrentPage = (): MainPagesBasedOnNavBarButtons | "unknown" => {
+	return (
+		(document
+			.querySelector(`${navBarSelector} > [aria-selected="true"]`)
+			?.getAttribute("aria-label")
+			?.split(",")[0] as MainPagesBasedOnNavBarButtons) ?? "unknown"
+	)
+}

src/lib/on-ready-for-scripting.ts

@@ -1,10 +1,11 @@
 import {
 	devMode,
-	pathnameMatches,
 	postContainerSelector,
 	routeNodeSelector,
+	runScriptOn,
 	screenRootSelector,
 } from "@/config"
+import { getCurrentPage } from "@/lib/get-current-page"
 import { watchForSelectorsPromise } from "@/utils/watch-for-selectors"
 
 type CleanupFn = () => void | PromiseLike<void>
@@ -31,10 +32,13 @@ export const onReadyForScripting = async (
 	// Wait for screen root to be present
 	await watchForSelectorsPromise([screenRootSelector])
 	onNavigation((routeNode: HTMLElement) => {
-		if (devMode) console.log("onNavigation callback called")
-		// Terminate if we are not on the main page
-		if (!pathnameMatches.some(pathname => pathname === location.pathname)) {
-			if (devMode) console.log("Not on main page. Terminating...")
+		if (devMode) {
+			console.log("onNavigation callback called")
+			console.log("Current page: ", getCurrentPage())
+		}
+		// Terminate if we are not on the target pages
+		if (!runScriptOn.some(page => getCurrentPage() === page)) {
+			if (devMode) console.log("Not on target pages. Terminating...")
 			return () => null
 		}
 		// Run main function if the target node is present

src/utils/location-change.event.ts

@@ -5,6 +5,16 @@ export interface LocationChangeDetail {
 	oldUrl: URL
 }
 
+/** Refers to the root window object. unsafeWindow in userscripts and window in other contexts */
+const _window = unsafeWindow || window
+const WATCHER_KEY = "__spa_locationchange_watcher__"
+
+declare global {
+	interface Window {
+		[WATCHER_KEY]: boolean
+	}
+}
+
 /**
  * Fires "spa:locationchange" event when url changes
  * @returns {Object} An object with a `run` method to start the location watcher.
@@ -22,21 +32,23 @@ export interface LocationChangeDetail {
 export function createLocationWatcher() {
 	let interval: number | null = null
 	let oldUrl: URL | null = null
+	console.log("watcher", _window[WATCHER_KEY])
 	return {
 		/**
 		 * Ensure the location watcher is actively looking for URL changes. If it's already watching,
 		 * this is a noop.
 		 */
 		run() {
-			if (interval != null) return
+			if (interval != null || _window[WATCHER_KEY] === true) return
+			_window[WATCHER_KEY] = true
 			oldUrl = new URL(location.href)
-			interval = window.setInterval(() => {
+			interval = _window.setInterval(() => {
 				const newUrl = new URL(location.href)
 				if (oldUrl && newUrl.href !== oldUrl.href) {
-					window.dispatchEvent(
+					_window.dispatchEvent(
 						new CustomEvent("spa:locationchange", {
 							detail: { newUrl, oldUrl },
-						}),
+						})
 					)
 					oldUrl = newUrl
 				}