feat: enable and disable elements on a page, internal enhancements

CHANGELOG.md

@@ -2,7 +2,12 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
-## [1.3.7](https://github.com/ansh/jiffyreader.com/compare/v1.3.5...v1.3.7) (2024-12-29)
+## [1.4.0](https://github.com/ansh/jiffyreader.com/compare/v1.3.5...v1.4.0) (2024-12-30)
+
+
+### Features
+
+* ability to enable and disable elements on a page like buttons, links, ... etc ([3109944](https://github.com/ansh/jiffyreader.com/commit/3109944be37698757427972017a155e56b78ddf7))
 
 ## [1.3.5](https://github.com/ansh/jiffyreader.com/compare/v1.3.4...v1.3.5) (2024-12-29)
 

index.d.ts

@@ -28,13 +28,13 @@ interface AppConfigPref {
 
 declare namespace NodeJS {
 	interface ProcessEnv {
-		DEBUG: string;
-		TARGET: string;
-		SHORTCUT: string;
-		VERSION: string;
-		NAME: string;
-		HOME_URL: string;
-		ENABLE_TRACKING: string
+		PLASMO_PUBLIC_DEBUG: string;
+		PLASMO_PUBLIC_TARGET: string;
+		PLASMO_PUBLIC_SHORTCUT: string;
+		PLASMO_PUBLIC_VERSION: string;
+		PLASMO_PUBLIC_NAME: string;
+		PLASMO_PUBLIC_HOME_URL: string;
+		PLASMO_PUBLIC_ENABLE_TRACKING: string
 	}
 }
 

package.json

@@ -1,32 +1,32 @@
 {
 	"name": "jiffy-reader",
 	"displayName": "Jiffy reader",
-	"version": "1.3.7",
+	"version": "1.4.0",
 	"description": "jiffy reader",
 	"packageManager": "[email protected]",
 	"scripts": {
-		"dev": "PLASMO_VERSION=\"$(npm pkg get version | tr -d '\"')\" PLASMO_TARGET=${PLASMO_TARGET:-chrome} PLASMO_NAME=${PLASMO_NAME:-\"jiffy-reader-chrome\"} PLASMO_TAG=${PLASMO_TAG:-dev}  PLASMO_VERSION_NAME=$PLASMO_VERSION-$PLASMO_TARGET-$PLASMO_TAG PLASMO_DEBUG=${PLASMO_DEBUG:-TRUE}  PLASMO_SHORTCUT=${PLASMO_SHORTCUT:-\"Alt+B\"} plasmo dev --target=${PLASMO_MANIFEST_VERSION:-chrome-mv3}",
-		"buildx": "PLASMO_VERSION=\"$(npm pkg get version | tr -d '\"')\" PLASMO_TARGET=${PLASMO_TARGET:-chrome} PLASMO_NAME=${PLASMO_NAME:-\"Jiffy Reader\"} PLASMO_TAG=${PLASMO_TAG:-prod} PLASMO_VERSION_NAME=$PLASMO_VERSION-$PLASMO_TARGET-$PLASMO_TAG PLASMO_DEBUG=${PLASMO_DEBUG:-FALSE} PLASMO_SHORTCUT=${PLASMO_SHORTCUT:-\"Alt+B\"} plasmo build --target=${PLASMO_MANIFEST_VERSION:-chrome-mv3}",
+		"dev": "PLASMO_PUBLIC_VERSION=\"$(npm pkg get version | tr -d '\"')\" PLASMO_PUBLIC_TARGET=${PLASMO_PUBLIC_TARGET:-chrome} PLASMO_PUBLIC_NAME=${PLASMO_PUBLIC_NAME:-\"jiffy-reader-chrome\"} PLASMO_PUBLIC_TAG=${PLASMO_PUBLIC_TAG:-dev} PLASMO_TAG=$PLASMO_PUBLIC_TAG  PLASMO_PUBLIC_VERSION_NAME=$PLASMO_PUBLIC_VERSION-$PLASMO_PUBLIC_TARGET-$PLASMO_PUBLIC_TAG PLASMO_PUBLIC_DEBUG=${PLASMO_PUBLIC_DEBUG:-TRUE}  PLASMO_PUBLIC_SHORTCUT=${PLASMO_PUBLIC_SHORTCUT:-\"Alt+B\"} plasmo dev --target=${PLASMO_PUBLIC_MANIFEST_VERSION:-chrome-mv3}",
+		"buildx": "PLASMO_PUBLIC_VERSION=\"$(npm pkg get version | tr -d '\"')\" PLASMO_PUBLIC_TARGET=${PLASMO_PUBLIC_TARGET:-chrome} PLASMO_PUBLIC_NAME=${PLASMO_PUBLIC_NAME:-\"Jiffy Reader\"} PLASMO_PUBLIC_TAG=${PLASMO_PUBLIC_TAG:-prod} PLASMO_TAG=$PLASMO_PUBLIC_TAG PLASMO_PUBLIC_VERSION_NAME=$PLASMO_PUBLIC_VERSION-$PLASMO_PUBLIC_TARGET-$PLASMO_PUBLIC_TAG PLASMO_PUBLIC_DEBUG=${PLASMO_PUBLIC_DEBUG:-FALSE} PLASMO_PUBLIC_SHORTCUT=${PLASMO_PUBLIC_SHORTCUT:-\"Alt+B\"} plasmo build --target=${PLASMO_PUBLIC_MANIFEST_VERSION:-chrome-mv3}",
 		"build": "npm run build:opera && npm run build:chrome & npm run build:firefox & npm run build:safari",
 		"dev:chrome": "npm run dev",
-		"dev:firefox": "PLASMO_NAME=jiffy-reader-firefox PLASMO_TARGET=firefox PLASMO_SHORTCUT=\"Alt+W\" PLASMO_MANIFEST_VERSION=firefox-mv2 npm run dev",
-		"dev:safari": "PLASMO_NAME=jiffy-reader-safari PLASMO_TARGET=safari PLASMO_SHORTCUT=\"Alt+W\" PLASMO_MANIFEST_VERSION=safari-mv2 npm run dev",
+		"dev:firefox": "PLASMO_PUBLIC_NAME=jiffy-reader-firefox PLASMO_PUBLIC_TARGET=firefox PLASMO_PUBLIC_SHORTCUT=\"Alt+W\" PLASMO_PUBLIC_MANIFEST_VERSION=firefox-mv2 npm run dev",
+		"dev:safari": "PLASMO_PUBLIC_NAME=jiffy-reader-safari PLASMO_PUBLIC_TARGET=safari PLASMO_PUBLIC_SHORTCUT=\"Alt+W\" PLASMO_PUBLIC_MANIFEST_VERSION=safari-mv2 npm run dev",
 		"build:chrome": "npm run buildx && npm run bundle:chrome",
-		"build:opera": "PLASMO_TARGET=opera PLASMO_MANIFEST_VERSION=opera-mv3 npm run build:chrome && npm run bundle:opera",
-		"build:firefox": "PLASMO_NAME=jiffy-reader-firefox PLASMO_TARGET=firefox PLASMO_SHORTCUT=\"Alt+W\" PLASMO_MANIFEST_VERSION=firefox-mv2 npm run buildx && npm run bundle:firefox",
-		"build:safari": "PLASMO_NAME=jiffy-reader-safari PLASMO_TARGET=safari PLASMO_SHORTCUT=\"Alt+W\" PLASMO_MANIFEST_VERSION=safari-mv2 npm run buildx && npm run bundle:safari",
-		"gh:build:chrome": "PLASMO_TARGET=chrome PLASMO_SHORTCUT=\"Alt+B\" npm run buildx && npm run bundle:chrome",
-		"gh:build:opera": "PLASMO_TARGET=opera PLASMO_SHORTCUT=\"Alt+B\" PLASMO_MANIFEST_VERSION=opera-mv3 npm run buildx && npm run bundle:opera",
-		"gh:build:firefox": "PLASMO_TARGET=firefox PLASMO_SHORTCUT=\"Alt+W\" PLASMO_MANIFEST_VERSION=firefox-mv2 npm run buildx && npm run bundle:firefox",
-		"gh:build:safari": "PLASMO_TARGET=safari PLASMO_SHORTCUT=\"Alt+W\" PLASMO_MANIFEST_VERSION=safari-mv2 npm run buildx && npm run bundle:safari",
-		"gh:build": "echo 'PLASMO_TAG=prod NODE_ENV=production npm run gh:build:' | xargs -I{} bash -c '{}opera && {}chrome & {}firefox & {}safari & wait'",
-		"gh:build:development": "echo 'PLASMO_TAG=dev NODE_ENV=development  PLASMO_NAME=Jiffy-Reader-Dev npm run gh:build:' | xargs -I{} bash -c '{}opera && {}chrome & {}firefox & {}safari & wait'",
-		"gh:build:bookmarklet": "PLASMO_VERSION=\"$(npm pkg get version | tr -d '\"')\" node src/Bookmarklet/esbuild.mjs",
+		"build:opera": "PLASMO_PUBLIC_TARGET=opera PLASMO_PUBLIC_MANIFEST_VERSION=opera-mv3 npm run build:chrome && npm run bundle:opera",
+		"build:firefox": "PLASMO_PUBLIC_NAME=jiffy-reader-firefox PLASMO_PUBLIC_TARGET=firefox PLASMO_PUBLIC_SHORTCUT=\"Alt+W\" PLASMO_PUBLIC_MANIFEST_VERSION=firefox-mv2 npm run buildx && npm run bundle:firefox",
+		"build:safari": "PLASMO_PUBLIC_NAME=jiffy-reader-safari PLASMO_PUBLIC_TARGET=safari PLASMO_PUBLIC_SHORTCUT=\"Alt+W\" PLASMO_PUBLIC_MANIFEST_VERSION=safari-mv2 npm run buildx && npm run bundle:safari",
+		"gh:build:chrome": "PLASMO_PUBLIC_TARGET=chrome PLASMO_PUBLIC_SHORTCUT=\"Alt+B\" npm run buildx && npm run bundle:chrome",
+		"gh:build:opera": "PLASMO_PUBLIC_TARGET=opera PLASMO_PUBLIC_SHORTCUT=\"Alt+B\" PLASMO_PUBLIC_MANIFEST_VERSION=opera-mv3 npm run buildx && npm run bundle:opera",
+		"gh:build:firefox": "PLASMO_PUBLIC_TARGET=firefox PLASMO_PUBLIC_SHORTCUT=\"Alt+W\" PLASMO_PUBLIC_MANIFEST_VERSION=firefox-mv2 npm run buildx && npm run bundle:firefox",
+		"gh:build:safari": "PLASMO_PUBLIC_TARGET=safari PLASMO_PUBLIC_SHORTCUT=\"Alt+W\" PLASMO_PUBLIC_MANIFEST_VERSION=safari-mv2 npm run buildx && npm run bundle:safari",
+		"gh:build": "echo 'PLASMO_PUBLIC_TAG=prod NODE_ENV=production npm run gh:build:' | xargs -I{} bash -c '{}opera && {}chrome & {}firefox & {}safari && wait'",
+		"gh:build:development": "echo 'PLASMO_PUBLIC_TAG=dev NODE_ENV=development  PLASMO_PUBLIC_NAME=Jiffy-Reader-Dev npm run gh:build:' | xargs -I{} bash -c '{}opera && {}chrome & {}firefox & {}safari && wait'",
+		"gh:build:bookmarklet": "PLASMO_PUBLIC_VERSION=\"$(npm pkg get version | tr -d '\"')\" node src/Bookmarklet/esbuild.mjs",
 		"bundle": "npm run bundle:chrome & npm run bundle:firefix & npm run bundle:safari",
-		"bundle:firefox": "cd build/firefox-mv2-$PLASMO_TAG/ && zip -r ../jiffyReader-firefox-$PLASMO_TAG.xpi ./*",
-		"bundle:safari": "cd build/safari-mv2-$PLASMO_TAG/ && zip -r ../jiffyReader-safari-$PLASMO_TAG.xpi ./*",
-		"bundle:chrome": "cd build/chrome-mv3-$PLASMO_TAG &&  zip -r ../jiffyReader-chrome-$PLASMO_TAG.zip ./*",
-		"bundle:opera": "cd build/opera-mv3-$PLASMO_TAG && zip -r ../jiffyReader-opera-$PLASMO_TAG.crx ./*",
+		"bundle:firefox": "cd build/firefox-mv2-$PLASMO_PUBLIC_TAG/ && zip -r ../jiffyReader-firefox-$PLASMO_PUBLIC_TAG.xpi ./*",
+		"bundle:safari": "cd build/safari-mv2-$PLASMO_PUBLIC_TAG/ && zip -r ../jiffyReader-safari-$PLASMO_PUBLIC_TAG.xpi ./*",
+		"bundle:chrome": "cd build/chrome-mv3-$PLASMO_PUBLIC_TAG &&  zip -r ../jiffyReader-chrome-$PLASMO_PUBLIC_TAG.zip ./*",
+		"bundle:opera": "cd build/opera-mv3-$PLASMO_PUBLIC_TAG && zip -r ../jiffyReader-opera-$PLASMO_PUBLIC_TAG.crx ./*",
 		"build:ios": "xcrun safari-web-extension-converter --rebuild-project \"Jiffy reader/Jiffy reader.xcodeproj\"",
 		"build:xcode": "pnpm build:safari && xcrun safari-web-extension-converter --swift --no-open --force --bundle-identifier com.jiffyreader build/safari-mv2-prod",
 		"build:xcode:all": "pnpm build:xcode && pnpm build:ios",
@@ -74,11 +74,11 @@
 		"typescript": "4.7.4"
 	},
 	"manifest": {
-		"name": "$PLASMO_NAME",
-		"target": "$PLASMO_TARGET",
-		"version": "$PLASMO_VERSION",
-		"tag": "$PLASMO_TAG",
-		"version_name": "$PLASMO_VERSION_NAME",
+		"name": "$PLASMO_PUBLIC_NAME",
+		"target": "$PLASMO_PUBLIC_TARGET",
+		"version": "$PLASMO_PUBLIC_VERSION",
+		"tag": "$PLASMO_PUBLIC_TAG",
+		"version_name": "$PLASMO_PUBLIC_VERSION_NAME",
 		"environment": "$NODE_ENV",
 		"description": "A Browser Extension for Faster Reading on ANY website!",
 		"default_locale": "en",
@@ -93,7 +93,7 @@
 		"commands": {
 			"toggle-bionic": {
 				"suggested_key": {
-					"default": "$PLASMO_SHORTCUT"
+					"default": "$PLASMO_PUBLIC_SHORTCUT"
 				},
 				"description": "Toggle bionic reading mode"
 			}

src/Bookmarklet/esbuild.mjs

@@ -7,7 +7,7 @@ const /** @type {import('esbuild').BuildOptions} */ defaultConfigs = {
 		minify: true,
 		write: false,
 		plugins: [sassPlugin({ type: 'css-text' })],
-		define: { 'envService.DEBUG': '"false"' },
+		define: { 'process.env.PLASMO_PUBLIC_DEBUG': '"false"' },
 		tsconfig: './tsconfig.json',
 	};
 
@@ -32,7 +32,7 @@ build({
 				['FixationEdgeOpacity Toggle', 'firefixationEdgeOpacityTransition'],
 			].map(([textContent, eventKey]) => makeLinkBtn(textContent, outputScript.replace('ACTION_TO_FIRE', eventKey))),
 
-			'<p>Drag any of the links above onto your bookmark bar to save it as a bookmarklet which works on any site just like the full extension</p>',
+			`<p>Drag any of the links above onto your bookmark bar to save it as a bookmarklet which works on any site just like the full extension <br/>Version: ${process.env.PLASMO_PUBLIC_VERSION}</p>`,
 		].join(' ');
 
 		fs.writeFileSync(outputFile, output);

src/Bookmarklet/index.ts

@@ -69,51 +69,59 @@ const stateTransitions = {
 		['80%', '25%'],
 		['100%', '25%'],
 	],
-};
+} as const;
 
 /**
  * @param {string} stateTransitionKey
  * @param {string|null} currentActiveState
  * @returns {[targetState,nextState]}
  */
-function getStateTransitionEntry(stateTransitionKey, currentActiveState, stateEntries = stateTransitions) {
-	return stateEntries[stateTransitionKey].find(([state]) => `${state}` === `${currentActiveState}`);
+function getStateTransitionEntry<TKey extends keyof typeof stateTransitions>(
+	stateTransitionKey: TKey,
+	currentActiveState: (typeof stateTransitions)[TKey][number][number],
+	stateEntries = stateTransitions,
+) {
+	return stateEntries[stateTransitionKey].find(([state]) => `${state}` === `${currentActiveState}`) as (typeof stateTransitions)[TKey][number];
 }
 
-function toggleStateEngine(
-	stateTransitionKey,
-	/** @type {(property, value)} */ callbackSetter = setAttribute,
-	/** @type {(identified) => string}  */ callbackGetter = getAttribute,
+function toggleStateEngine<
+	T extends keyof typeof stateTransitions,
+	G extends (input: T) => (typeof stateTransitions)[T][number][number],
+	S extends (input: T, value: (typeof stateTransitions)[T][number][number]) => void,
+>(
+	stateTransitionKey: T,
+	setter: S = (stateTransitionKey === '--fixation-edge-opacity' ? setProperty : setAttribute) as any,
+	getter: G = (stateTransitionKey === '--fixation-edge-opacity' ? getProperty : getAttribute) as any,
 ) {
-	const currentActiveState = callbackGetter(stateTransitionKey);
+	const currentActiveState = getter(stateTransitionKey);
 
 	const [, nextState] = getStateTransitionEntry(stateTransitionKey, currentActiveState);
 
 	Logger.logInfo('stateTransitionKey', stateTransitionKey, 'currentActiveState', currentActiveState, 'nextState', nextState, stateTransitions[stateTransitionKey]);
-	callbackSetter(stateTransitionKey, nextState);
+	setter(stateTransitionKey, nextState);
 
 	if (document.body.getAttribute('br-mode') !== 'on') {
 		toggleReadingMode();
 	}
 }
 
-const setProperty = (property, value) => {
+const setProperty = (property: string, value: string | null) => {
 	Logger.logInfo({ setProperty, property, value });
 	document.body.style.setProperty(property, value);
 };
-const setAttribute = (attribute, value) => document.body.setAttribute(attribute, value);
-const getProperty = (property) => document.body.style.getPropertyValue(property);
-const getAttribute = (attribute) => document.body.getAttribute(attribute);
+const setAttribute = (attribute: string, value: any) => document.body.setAttribute(attribute, value);
+const getProperty = (property: string) => document.body.style.getPropertyValue(property);
+const getAttribute = (attribute: string) => document.body.getAttribute(attribute);
 
 const callableActions = {
 	fireReadingToggle: toggleReadingMode,
 	fireFixationStrengthTransition: () => toggleStateEngine('fixation-strength'),
 	fireSaccadesIntervalTransition: () => toggleStateEngine('saccades-interval'),
 	fireSaccadesColorTransition: () => toggleStateEngine('saccades-color'),
-	firefixationEdgeOpacityTransition: () => toggleStateEngine('--fixation-edge-opacity', setProperty, getProperty),
+	firefixationEdgeOpacityTransition: () => toggleStateEngine('--fixation-edge-opacity'),
 };
 
-const actionToFire = 'ACTION_TO_FIRE';
+const actionToFire = 'ACTION_TO_FIRE' as keyof typeof callableActions;
 
 Logger.logInfo('actionToFire', actionToFire, callableActions);
 

src/background/index.ts

@@ -34,14 +34,14 @@ const setBadgeText = (badgeTextDetails: chrome.action.BadgeTextDetails, runner =
 	return chrome?.action?.setBadgeText(badgeTextDetails) || browser.browserAction.setBadgeText(badgeTextDetails);
 };
 
-const openInstallationWelcomePage = async (eventReason: chrome.runtime.OnInstalledReason, browserTargetName: string = envService.PLASMO_TARGET) => {
+const openInstallationWelcomePage = async (eventReason: chrome.runtime.OnInstalledReason, browserTargetName: string = envService.PLASMO_PUBLIC_TARGET) => {
 	// if (await storage.get(USER_PREF_STORE_KEY)) {
 	// 	return;
 	// }
 
 	chrome.tabs.create({
 		active: true,
-		url: `https://jiffyreader.com/welcome?browser=${browserTargetName}&event=${eventReason}&version=${envService.VERSION}`,
+		url: `https://jiffyreader.com/welcome?browser=${browserTargetName}&event=${eventReason}&version=${envService.PLASMO_PUBLIC_VERSION}`,
 	});
 };
 
@@ -149,7 +149,7 @@ async function onInstallHandler(event: chrome.runtime.InstalledDetails) {
 
 	const eventReason = event.reason;
 
-	const newVersion = envService.VERSION;
+	const newVersion = envService.PLASMO_PUBLIC_VERSION;
 	const { previousVersion } = event;
 	const isNewVersion = previousVersion !== newVersion;
 	Logger.logInfo({ newVersion, previousVersion, isNewVersion });

src/contents/content.tsx

@@ -27,7 +27,7 @@ export const createShadowRoot = (shadowHost) => {
 	return shadowHost.attachShadow({ mode: 'open' });
 };
 
-const { setAttribute, setProperty, setSaccadesStyle, getAttribute } = documentParser.makeHandlers(document);
+const { setAttribute, setProperty, setSaccadesStyle, getAttribute, amendClasses } = documentParser.makeHandlers(document);
 
 const contentLogStyle = 'background-color: pink';
 
@@ -38,9 +38,10 @@ const OVERLAY_STYLE = {
 	bottom: '40px',
 	left: '40px',
 	display: 'flex',
-	background: 'white',
+	background: '#3c2020',
 	padding: '15px',
 	flexDirection: 'column' as 'row',
+	text: 'light',
 };
 
 const injectPassiveStyleOverides = (document: Document) => {
@@ -150,6 +151,14 @@ const IndexContent = () => {
 		setAttribute('saccades-color', prefs.saccadesColor);
 		setAttribute('fixation-strength', prefs.fixationStrength);
 		setAttribute('saccades-interval', prefs.saccadesInterval);
+
+		const getPrefsClasses = (addedOrRemoved: boolean) =>
+			Object.entries(prefs.symanticTags)
+				.filter(([, value]) => value === addedOrRemoved)
+				.map(([element]) => `br-exclusions-${element}`);
+
+		amendClasses('add', getPrefsClasses(false));
+		amendClasses('remove', getPrefsClasses(true));
 	}, [prefs, tabSession]);
 
 	useEffect(() => {
@@ -167,7 +176,7 @@ const IndexContent = () => {
 		return (
 			<div className="[ br-overlay ]" style={OVERLAY_STYLE}>
 				<span>
-					<strong style={{ paddingRight: '15px' }}>Target {envService.PLASMO_TARGET}</strong>
+					<strong style={{ paddingRight: '15px' }}>Target {envService.PLASMO_PUBLIC_TARGET}</strong>
 					{getCollapseExpandBtn()}
 				</span>
 				<div className="flex flex-column">
@@ -179,7 +188,7 @@ const IndexContent = () => {
 		);
 	};
 
-	return showDebugOverLay();
+	return !!prefs?.showContentDebugOverlay && showDebugOverLay();
 };
 
 export default IndexContent;

src/popup/HtmlNodeToggles.tsx

@@ -0,0 +1,32 @@
+import defaultPrefs from '~services/preferences';
+import usePrefs from '~services/usePrefs';
+import { useGetTabOriginCb } from './useGetTabOriginCb';
+
+export function HtmlNodeToggles() {
+	const [prefs, , updateConfig] = usePrefs(useGetTabOriginCb(), false);
+	const _label = chrome.i18n.getMessage('symanticElementsLabel');
+
+	if (!prefs) return <></>;
+
+	return (
+		<div className=" flex flex-column || gap-2  || w-100 p-2">
+			<label className="block text-capitalize mb-sm" id="symanticElementsLabel">
+				{_label?.length ? _label : 'Enabled Items'}
+			</label>
+
+			<div className="|| || w-100 gap-1" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)' }}>
+				{Object.entries({ ...defaultPrefs.symanticTags, ...prefs.symanticTags }).map(([key, value]) => (
+					<div key={key} className="input-container flex">
+						<input
+							type="checkbox"
+							id={`symanticTags-${key}`}
+							checked={value}
+							onChange={(event) => updateConfig(`symanticTags`, { ...prefs.symanticTags, [key]: event.target.checked })}
+						/>
+						<label htmlFor={`symanticTags-${key}`}>{key ?? chrome.i18n.getMessage(`symanticTags_${key}`)}</label>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}