Fixes/enhancements

.github/workflows/publish-release.yml

@@ -92,19 +92,19 @@ jobs:
           fi
 
 
-      - name: chrome ext publish
-        run: |
-          if [ -z "${{ secrets.CLIENT_ID }}" ] || [ -z "${{ secrets.CLIENT_SECRET }}" ] || [ -z "${{ secrets.REFRESH_TOKEN }}" ] || [ -z "${{ secrets.EXTENSION_ID }}" ]; then
-            echo "Required secrets are not provided. Exiting."
-            exit 0
-          fi
+      # - name: chrome ext publish
+      #   run: |
+      #     if [ -z "${{ secrets.CLIENT_ID }}" ] || [ -z "${{ secrets.CLIENT_SECRET }}" ] || [ -z "${{ secrets.REFRESH_TOKEN }}" ] || [ -z "${{ secrets.EXTENSION_ID }}" ]; then
+      #       echo "Required secrets are not provided. Exiting."
+      #       exit 0
+      #     fi
 
-          npx cws-publish ${{ secrets.CLIENT_ID }} ${{ secrets.CLIENT_SECRET }} ${{ secrets.REFRESH_TOKEN }} ./build/jiffyReader-chrome-prod.zip ${{ secrets.EXTENSION_ID }}
+      #     npx cws-publish ${{ secrets.CLIENT_ID }} ${{ secrets.CLIENT_SECRET }} ${{ secrets.REFRESH_TOKEN }} ./build/jiffyReader-chrome-prod.zip ${{ secrets.EXTENSION_ID }}
 
-          # if secrete.DEV_EXTENSION_ID is not empty then publish
-          if [ -n "${{ secrets.EXTENSION_DEV_ID }}" ]; then
-          npx cws-publish ${{ secrets.CLIENT_ID }} ${{ secrets.CLIENT_SECRET }} ${{ secrets.REFRESH_TOKEN }} ./build/jiffyReader-chrome-dev.zip ${{ secrets.EXTENSION_DEV_ID }}
-          fi
+      #     # if secrete.DEV_EXTENSION_ID is not empty then publish
+      #     if [ -n "${{ secrets.EXTENSION_DEV_ID }}" ]; then
+      #     npx cws-publish ${{ secrets.CLIENT_ID }} ${{ secrets.CLIENT_SECRET }} ${{ secrets.REFRESH_TOKEN }} ./build/jiffyReader-chrome-dev.zip ${{ secrets.EXTENSION_DEV_ID }}
+      #     fi
 
 
 

Makefile

@@ -1,6 +1,6 @@
 SHELL := /bin/bash
 .SILENT:
-.PHONY: build
+.PHONY: print-manifests  build
 
 
 help:
@@ -9,7 +9,7 @@ help:
 	| sed -e 's/\[32m #-- /[33m/'
 
 print-manifests: ## print out build target manifests
-	@ls ./build/jiffyReader-* -t |grep -E '.(xpi|zip|crx)' | xargs -I {} sh -c 'unzip -p "{}" manifest.json | jq -r ". | \"Version: \(.version), Name: \(.name), Version Name: \(.version_name), Target: \(.target), Scope: \(.scope)  {}\""'
+	@ls ./build/jiffyReader-* -t |grep -E '.(xpi|zip|crx)' | xargs -I {} sh -c 'unzip -p "{}" manifest.json | jq -r ". | \"Version: \(.version), Name: \(.name), Version Name: \(.version_name), Target: \(.target), Tag: \(.tag)  {}\""'
 
 test-build-manifests: ## test build manifests
 	@if make -s print-manifests | grep -E '(\W-\W|null)'; then exit 1; fi

package.json

@@ -5,35 +5,36 @@
 	"description": "jiffy reader",
 	"packageManager": "yarn@1.22.19",
 	"scripts": {
-		"dev": "VERSION=\"$(npm pkg get version | tr -d '\"')\" TARGET=${TARGET:-chrome} NAME=${NAME:-\"jiffy-reader-chrome\"} TAG=${TAG:=local}  VERSION_NAME=$VERSION-$TARGET-$TAG DEBUG=${DEBUG:-TRUE}  SHORTCUT=${SHORTCUT:-\"Alt+B\"} plasmo dev --target=${MANIFEST_VERSION:-chrome-mv3}",
-		"buildx": "VERSION=\"$(npm pkg get version | tr -d '\"')\" TARGET=${TARGET:-chrome} NAME=${NAME:-\"Jiffy Reader\"} TAG=${TAG:=prod} VERSION_NAME=$VERSION-$TARGET-$TAG DEBUG=${DEBUG:-FALSE} SHORTCUT=${SHORTCUT:-\"Alt+B\"} plasmo build --target=${MANIFEST_VERSION:-chrome-mv3}",
+		"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}",
 		"build": "npm run build:opera && npm run build:chrome & npm run build:firefox & npm run build:safari",
 		"dev:chrome": "npm run dev",
-		"dev:firefox": "NAME=jiffy-reader-firefox TARGET=firefox SHORTCUT=\"Alt+W\" MANIFEST_VERSION=firefox-mv2 npm run dev",
-		"dev:safari": "NAME=jiffy-reader-safari TARGET=safari SHORTCUT=\"Alt+W\" MANIFEST_VERSION=safari-mv2 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",
 		"build:chrome": "npm run buildx && npm run bundle:chrome",
-		"build:opera": "TARGET=opera npm run build:chrome && npm run bundle:opera",
-		"build:firefox": "NAME=jiffy-reader-firefox TARGET=firefox SHORTCUT=\"Alt+W\" MANIFEST_VERSION=firefox-mv2 npm run buildx && npm run bundle:firefox",
-		"build:safari": "NAME=jiffy-reader-safari TARGET=safari SHORTCUT=\"Alt+W\" MANIFEST_VERSION=safari-mv2 npm run buildx && npm run bundle:safari",
-		"gh:build:chrome": "TARGET=chrome SHORTCUT=\"Alt+B\" MANIFEST_VERSION=chrome-mv3 npm run buildx && npm run bundle:chrome",
-		"gh:build:opera": "TARGET=opera SHORTCUT=\"Alt+B\" MANIFEST_VERSION=chrome-mv3 npm run buildx && npm run bundle:opera",
-		"gh:build:firefox": "TARGET=firefox SHORTCUT=\"Alt+W\" MANIFEST_VERSION=firefox-mv2 npm run buildx && npm run bundle:firefox",
-		"gh:build:safari": "TARGET=safari SHORTCUT=\"Alt+W\" MANIFEST_VERSION=safari-mv2 npm run buildx && npm run bundle:safari",
-		"gh:build": "echo 'TAG=prod NODE_ENV=production npm run gh:build:' | xargs -I{} bash -c '{}opera && {}chrome & {}firefox & {}safari & wait'",
-		"gh:build:development": "echo 'TAG=dev NODE_ENV=development  NAME=Jiffy-Reader-Dev npm run gh:build:' | xargs -I{} bash -c '{}opera && {}chrome & {}firefox & {}safari & wait'",
-		"gh:build:bookmarklet": "VERSION=\"$(npm pkg get version | tr -d '\"')\" node src/Bookmarklet/esbuild.mjs",
+		"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",
 		"bundle": "npm run bundle:chrome & npm run bundle:firefix & npm run bundle:safari",
-		"bundle:firefox": "cd build/firefox-mv2-prod/ && zip -r ../jiffyReader-firefox-$TAG.xpi ./*",
-		"bundle:safari": "cd build/safari-mv2-prod/ && zip -r ../jiffyReader-safari-$TAG.xpi ./*",
-		"bundle:chrome": "cd build/chrome-mv3-prod &&  zip -r ../jiffyReader-chrome-$TAG.zip ./*",
-		"bundle:opera": "rm -rf build/opera-mv3-prod; cp -r build/chrome-mv3-prod build/opera-mv3-prod && cd build/opera-mv3-prod && zip -r ../jiffyReader-opera-$TAG.crx ./*",
+		"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 ./*",
 		"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",
 		"dev:xcode": "xcrun safari-web-extension-converter --swift --no-open --force  --bundle-identifier com.jiffyreader build/safari-mv2-dev",
 		"release": "if [ 0 -eq $(git log --oneline | head -n1 | grep 'chore(release)' | wc -l) ]; then commit-and-tag-version; fi",
-		"lint": "prettier -w src/ ; eslint --fix src/",
-		"test": "make -s build;# test is unstable';"
+		"lint": "eslint src/",
+		"lint:fix": "eslint --fix src/",
+		"test": "make -s build print-manifests; # test is unstable';"
 	},
 	"dependencies": {
 		"@plasmohq/prettier-plugin-sort-imports": "^1.1.1",
@@ -48,7 +49,8 @@
 		"postcss": "^8.4.49",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
-		"webpack": "^4.47.0"
+		"webpack": "^4.47.0",
+		"zod": "^3.24.1"
 	},
 	"devDependencies": {
 		"@parcel/transformer-sass": "2.6.2",
@@ -72,13 +74,12 @@
 		"typescript": "4.7.4"
 	},
 	"manifest": {
-		"name": "$NAME",
-		"target": "$TARGET",
-		"version": "$VERSION",
-		"tag": "$TAG",
-		"version_name": "$VERSION_NAME",
+		"name": "$PLASMO_NAME",
+		"target": "$PLASMO_TARGET",
+		"version": "$PLASMO_VERSION",
+		"tag": "$PLASMO_TAG",
+		"version_name": "$PLASMO_VERSION_NAME",
 		"environment": "$NODE_ENV",
-		"scope": "$TAG",
 		"description": "A Browser Extension for Faster Reading on ANY website!",
 		"default_locale": "en",
 		"permissions": [
@@ -92,7 +93,7 @@
 		"commands": {
 			"toggle-bionic": {
 				"suggested_key": {
-					"default": "$SHORTCUT"
+					"default": "$PLASMO_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: { 'process.env.DEBUG': '"false"' },
+		define: { 'envService.DEBUG': '"false"' },
 		tsconfig: './tsconfig.json',
 	};
 

src/background/index.ts

@@ -4,6 +4,7 @@ import M from 'mellowtel';
 
 import { CONFIG_KEY, DISABLE_LOGS } from '~constants';
 import { APP_PREFS_STORE_KEY, DisplayColorMode, STORAGE_AREA, USER_PREF_STORE_KEY } from '~services/config';
+import { envService } from '~services/envService';
 import Logger from '~services/Logger';
 import defaultPrefs from '~services/preferences';
 import runTimeHandler from '~services/runTimeHandler';
@@ -33,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 = process.env.PLASMO_TARGET) => {
+const openInstallationWelcomePage = async (eventReason: chrome.runtime.OnInstalledReason, browserTargetName: string = envService.PLASMO_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=${process.env.VERSION}`,
+		url: `https://jiffyreader.com/welcome?browser=${browserTargetName}&event=${eventReason}&version=${envService.VERSION}`,
 	});
 };
 
@@ -148,7 +149,7 @@ async function onInstallHandler(event: chrome.runtime.InstalledDetails) {
 
 	const eventReason = event.reason;
 
-	const newVersion = process.env.VERSION;
+	const newVersion = envService.VERSION;
 	const { previousVersion } = event;
 	const isNewVersion = previousVersion !== newVersion;
 	Logger.logInfo({ newVersion, previousVersion, isNewVersion });
@@ -161,7 +162,7 @@ async function onInstallHandler(event: chrome.runtime.InstalledDetails) {
 		previousVersion,
 	});
 
-	if (isNewVersion && /install/i.test(eventReason) && process.env.NODE_ENV === 'production') {
+	if (isNewVersion && /install/i.test(eventReason) && envService.NODE_ENV === 'production') {
 		openInstallationWelcomePage(eventReason);
 	}
 

src/contents/content.tsx

@@ -5,6 +5,7 @@ import type { PlasmoContentScript } from 'plasmo';
 import { useEffect, useState } from 'react';
 
 import documentParser from '~services/documentParser';
+import { envService } from '~services/envService';
 import Logger from '~services/Logger';
 import overrides from '~services/siteOverrides';
 import usePrefs from '~services/usePrefs';
@@ -160,35 +161,25 @@ const IndexContent = () => {
 
 	const getCollapseExpandBtn = () => <button onClick={toggleExpandeHandler}> {isExpanded ? 'Collapse' : 'Expand'}</button>;
 
-	const showDebugOverLay = (show) => {
-		if (!show) return;
+	const showDebugOverLay = (show = !envService.isProduction) => {
+		if (show) return;
 
 		return (
 			<div className="[ br-overlay ]" style={OVERLAY_STYLE}>
 				<span>
-					<strong style={{ paddingRight: '15px' }}>Target {process.env.PLASMO_TARGET}</strong>
+					<strong style={{ paddingRight: '15px' }}>Target {envService.PLASMO_TARGET}</strong>
 					{getCollapseExpandBtn()}
 				</span>
 				<div className="flex flex-column">
 					<span>{!prefs || !tabSession ? 'Loading... or broken but probably loading' : 'JiffyReady to the moon'}</span>
 				</div>
-				<span>{JSON.stringify(tabSession)}</span>
-				<span>
-					{isExpanded &&
-						prefs &&
-						Object.entries(prefs).map(([key, val], index) => (
-							<p className="prefsEntry" key={'prefs_item' + index}>
-								<span className="prefsKey">{key}:: </span>
-								<span className="prefsValue">{typeof val === 'boolean' ? (val === true ? 'true' : 'false') : val}</span>
-							</p>
-						))}
-				</span>
+				<span>{isExpanded && <pre>{JSON.stringify({ tabSession, prefs }, null, 2)}</pre>}</span>
 				{getCollapseExpandBtn()}
 			</div>
 		);
 	};
 
-	return showDebugOverLay(process.env.NODE_ENV !== 'production');
+	return showDebugOverLay();
 };
 
 export default IndexContent;

src/popup/ShowInlineDebug.tsx

@@ -0,0 +1,39 @@
+import type { TabSession } from 'index';
+import { envService } from '~services/envService';
+import TabHelper from '~services/TabHelper';
+import usePrefs, { usePrefStorage } from '~services/usePrefs';
+import { useShowDebugSwitch } from './shorcut';
+
+export function ShowDebugInline({ tabSession }: { tabSession: TabSession }) {
+	const [isDebugDataVisible, setIsDebugDataVisible] = useShowDebugSwitch();
+
+	const [prefs] = usePrefs(async () => await TabHelper.getTabOrigin(await TabHelper.getActiveTab(true)), true, envService.PLASMO_TARGET);
+
+	const [appConfigPrefs] = usePrefStorage();
+
+	if (envService.isProduction) return <></>;
+
+	const debugData = (
+		<>
+			<pre className="w-full" style={{ fontSize: '12px', overflow: 'auto' }}>
+				tabSession {JSON.stringify({ tabSession, prefs, appConfigPrefs, envService }, null, 2)}
+			</pre>
+		</>
+	);
+
+	return (
+		<div className=" || flex flex-column || w-full text-wrap p-1">
+			<label htmlFor="isDebugDataVisibleInput">
+				show
+				<input
+					type="checkbox"
+					name="isDebugDataVisibleInput"
+					id="isDebugDataVisibleInput"
+					onChange={(event) => setIsDebugDataVisible(event.currentTarget.checked)}
+					checked={isDebugDataVisible}
+				/>
+			</label>
+			{isDebugDataVisible && debugData}
+		</div>
+	);
+}

src/popup/context.tsx

@@ -1,5 +1,6 @@
 import { Storage } from '@plasmohq/storage';
 import { createContext, useContext, useEffect, useReducer } from 'react';
+import { envService } from '~services/envService';
 
 let storage = {
 	key: 'context.store',
@@ -13,7 +14,7 @@ let storage = {
 };
 
 const rawValues = {
-	isDebugDataVisible: !/production/i.test(process.env.NODE_ENV),
+	isDebugDataVisible: envService.showDebugInfo,
 };
 
 const initialPopupContextValue = {