diff --git a/CHANGELOG.md b/CHANGELOG.md index d6333bf..0558a04 100644 --- a/CHANGELOG.md +++ b/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 ([a97e0ea](https://github.com/ansh/jiffyreader.com/commit/a97e0eade9974c63bb67e079c8ae198f0f64d50d)) ## [1.3.5](https://github.com/ansh/jiffyreader.com/compare/v1.3.4...v1.3.5) (2024-12-29) diff --git a/index.d.ts b/index.d.ts index 8ff0db9..10e8663 100644 --- a/index.d.ts +++ b/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 } } diff --git a/package-lock.json b/package-lock.json index 2d98869..b4d5991 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "jiffy-reader", - "version": "1.3.7", + "version": "1.4.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "jiffy-reader", - "version": "1.3.7", + "version": "1.4.0", "license": "ISC", "dependencies": { "@plasmohq/prettier-plugin-sort-imports": "^1.1.1", diff --git a/package.json b/package.json index f2a0787..059514d 100644 --- a/package.json +++ b/package.json @@ -1,32 +1,32 @@ { "name": "jiffy-reader", "displayName": "Jiffy reader", - "version": "1.3.7", + "version": "1.4.0", "description": "jiffy reader", "packageManager": "yarn@1.22.19", "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" } diff --git a/src/Bookmarklet/esbuild.mjs b/src/Bookmarklet/esbuild.mjs index 84f8168..8662ea2 100644 --- a/src/Bookmarklet/esbuild.mjs +++ b/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))), - '

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

', + `

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
Version: ${process.env.PLASMO_PUBLIC_VERSION}

`, ].join(' '); fs.writeFileSync(outputFile, output); diff --git a/src/Bookmarklet/index.ts b/src/Bookmarklet/index.ts index 387d23f..86036f7 100644 --- a/src/Bookmarklet/index.ts +++ b/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( + 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); diff --git a/src/background/index.ts b/src/background/index.ts index b3d89d7..718604c 100644 --- a/src/background/index.ts +++ b/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 }); diff --git a/src/contents/content.tsx b/src/contents/content.tsx index c2db028..081ae59 100644 --- a/src/contents/content.tsx +++ b/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 (
- Target {envService.PLASMO_TARGET} + Target {envService.PLASMO_PUBLIC_TARGET} {getCollapseExpandBtn()}
@@ -179,7 +188,7 @@ const IndexContent = () => { ); }; - return showDebugOverLay(); + return !!prefs?.showContentDebugOverlay && showDebugOverLay(); }; export default IndexContent; diff --git a/src/popup/HtmlNodeToggles.tsx b/src/popup/HtmlNodeToggles.tsx new file mode 100644 index 0000000..62244d6 --- /dev/null +++ b/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 ( +
+ + +
+ {Object.entries({ ...defaultPrefs.symanticTags, ...prefs.symanticTags }).map(([key, value]) => ( +
+ updateConfig(`symanticTags`, { ...prefs.symanticTags, [key]: event.target.checked })} + /> + +
+ ))} +
+
+ ); +} diff --git a/src/popup/ShowInlineDebug.tsx b/src/popup/ShowInlineDebug.tsx index d2facea..61035b3 100644 --- a/src/popup/ShowInlineDebug.tsx +++ b/src/popup/ShowInlineDebug.tsx @@ -1,13 +1,14 @@ 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'; +import { useGetTabOriginCb } from './useGetTabOriginCb'; 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 [prefs,setPrefs] = usePrefs(async () => await TabHelper.getTabOrigin(await TabHelper.getActiveTab(true)), true, envService.PLASMO_PUBLIC_TARGET); + const [prefs, , setPrefs] = usePrefs(useGetTabOriginCb(), true, envService.PLASMO_PUBLIC_TARGET); const [appConfigPrefs] = usePrefStorage(); @@ -23,16 +24,25 @@ export function ShowDebugInline({ tabSession }: { tabSession: TabSession }) { return (
- +
+ + + {!envService.isProduction && ( + + )} +
{isDebugDataVisible && debugData}
); diff --git a/src/popup/index.tsx b/src/popup/index.tsx index 20f4e19..3fe9108 100644 --- a/src/popup/index.tsx +++ b/src/popup/index.tsx @@ -19,7 +19,7 @@ import PopupContextProvider from './context'; import IndexPopupNew from './indexNew'; import IndexPopupOld from './indexOld'; -const badCapScroll: CSSProperties = /safari/i.test(envService.PLASMO_TARGET) ? { overflowY: 'scroll', height: '600px' } : {}; +const badCapScroll: CSSProperties = /safari/i.test(envService.PLASMO_PUBLIC_TARGET) ? { overflowY: 'scroll', height: '600px' } : {}; const PopupVersions = { new: IndexPopupNew, diff --git a/src/popup/indexNew.tsx b/src/popup/indexNew.tsx index 6cf48a5..7fd4e89 100644 --- a/src/popup/indexNew.tsx +++ b/src/popup/indexNew.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import Logger from '~services/Logger'; import TabHelper from '~services/TabHelper'; @@ -17,8 +17,10 @@ import defaultPrefs from '~services/preferences'; import runTimeHandler from '~services/runTimeHandler'; import { envService } from '~services/envService'; +import { HtmlNodeToggles } from './HtmlNodeToggles'; import Shortcut, { ShortcutGuide } from './shorcut'; import { ShowDebugInline } from './ShowInlineDebug'; +import { useGetTabOriginCb } from './useGetTabOriginCb'; const popupLogStyle = 'background:cyan;color:brown'; @@ -39,9 +41,7 @@ function IndexPopupNew() { const [activeTab, setActiveTab] = useState(null); const [footerMessageIndex, setFooterMeessageIndex] = useState(null); - const getTabOriginfn = useCallback(async () => await TabHelper.getTabOrigin(await TabHelper.getActiveTab(true)), [TabHelper]); - - const [prefs, setPrefs] = usePrefs(getTabOriginfn, true, envService.PLASMO_TARGET); + const [prefs, , updateConfig] = usePrefs(useGetTabOriginCb(), true, envService.PLASMO_PUBLIC_TARGET); const [tabSession, setTabSession] = useState(null); @@ -125,11 +125,11 @@ function IndexPopupNew() { (event, customValue = null) => updateConfig(field as keyof Prefs, customValue ?? event.target.value); - const updateConfig = (key: keyof Prefs, value: any, configLocal = prefs) => { - const newConfig = { ...configLocal, [key]: value }; + // const updateConfig = (key: T, value: Prefs[T], configLocal = prefs, _getTabOriginfn = getTabOriginfn) => { + // const newConfig = { ...configLocal, [key]: value }; - setPrefs(getTabOriginfn, newConfig.scope, newConfig); - }; + // setPrefs(_getTabOriginfn, newConfig.scope, newConfig); + // }; const handleToggle = (newBrMode: boolean) => { const payload = { @@ -185,7 +185,7 @@ function IndexPopupNew() { }; const showFileUrlPermissionRequestMessage = (tabSession: TabSession, prefs, _activeTab = activeTab) => { - if (!/chrome/i.test(envService.PLASMO_TARGET) || !/^file:\/\//i.test(tabSession?.origin ?? activeTab?.url) || prefs) { + if (!/chrome/i.test(envService.PLASMO_PUBLIC_TARGET) || !/^file:\/\//i.test(tabSession?.origin ?? activeTab?.url) || prefs) { return null; } @@ -351,7 +351,7 @@ function IndexPopupNew() { {chrome.i18n.getMessage('shortcutLabelText')}: {chrome.i18n.getMessage( - /firefox/i.test(envService.PLASMO_TARGET) ? 'defaultShortcutValueTextFirefox' : 'defaultShortcutValueTextChrome', + /firefox/i.test(envService.PLASMO_PUBLIC_TARGET) ? 'defaultShortcutValueTextFirefox' : 'defaultShortcutValueTextChrome', )} */} @@ -497,6 +497,8 @@ function IndexPopupNew() {
+ + )} @@ -539,7 +541,7 @@ function Footer({ textColor = 'text-secondary', chrome, onClickPasser }) {
-
{envService.VERSION_NAME}
+
Version: {envService.PLASMO_PUBLIC_VERSION_NAME}
{/*
-
{envService.VERSION_NAME}
+
{envService.PLASMO_PUBLIC_VERSION_NAME}
+ +
)} {!errorOccured &&
{getFooterLinks('text-alternate', openSettingsPage)}
} diff --git a/src/popup/shorcut.tsx b/src/popup/shorcut.tsx index 82c2c56..8c749af 100644 --- a/src/popup/shorcut.tsx +++ b/src/popup/shorcut.tsx @@ -3,10 +3,11 @@ import { useEffect, useState } from 'react'; import Logger from '~services/Logger'; import runTimeHandler from '~services/runTimeHandler'; +import { envService } from '~services/envService'; import { usePopupContext } from './context'; export function useShortcut() { - const [shortcut, setShortcut] = useState(undefined); + const [shortcut, setShortcut] = useState(envService.PLASMO_PUBLIC_SHORTCUT); const getShortcut = () => { (runTimeHandler as typeof chrome).runtime diff --git a/src/popup/useGetTabOriginCb.tsx b/src/popup/useGetTabOriginCb.tsx new file mode 100644 index 0000000..865f3e4 --- /dev/null +++ b/src/popup/useGetTabOriginCb.tsx @@ -0,0 +1,4 @@ +import { useCallback } from 'react'; +import TabHelper from '~services/TabHelper'; + +export const useGetTabOriginCb = () => useCallback(async () => await TabHelper.getTabOrigin(await TabHelper.getActiveTab(true)), [TabHelper]); diff --git a/src/services/Logger.ts b/src/services/Logger.ts index 624106c..44216d3 100644 --- a/src/services/Logger.ts +++ b/src/services/Logger.ts @@ -17,7 +17,7 @@ const cantDebug = (shouldDebug: boolean = false) => !shouldDebug; const nullCallback = () => null; -const maker = (fn: T): T => (envService.DEBUG ? nullCallback : fn) as T; +const maker = (fn: T): T => (envService.PLASMO_PUBLIC_DEBUG ? nullCallback : fn) as T; /** * @@ -25,7 +25,7 @@ const maker = (fn: T): T => (envService.DEBUG ? nullCallback : fn) as T; * @returns {Function} end and display time when called in non production environment */ const logTime = (label) => { - if (cantDebug(envService.DEBUG)) return () => nullCallback; + if (cantDebug(envService.PLASMO_PUBLIC_DEBUG)) return () => nullCallback; console.time(label); return () => console.timeEnd(label); diff --git a/src/services/TrackEventService.ts b/src/services/TrackEventService.ts index 8cdb5e7..bd50e0e 100644 --- a/src/services/TrackEventService.ts +++ b/src/services/TrackEventService.ts @@ -9,9 +9,9 @@ export enum EventCategory { function trackEvent( eventData: { eventCategory: EventCategory; eventName: string; eventType: string; [key: string]: any }, - appData = { browser: envService.PLASMO_TARGET, version: envService.VERSION }, + appData = { browser: envService.PLASMO_PUBLIC_TARGET, version: envService.PLASMO_PUBLIC_VERSION }, date = new Date(), - enableTracking = envService.ENABLE_TRACKING, + enableTracking = envService.PLASMO_PUBLIC_ENABLE_TRACKING, ) { Logger.logInfo({ enableTracking }); if (!enableTracking) { @@ -20,7 +20,7 @@ function trackEvent( const params = new URLSearchParams({ ...{ time: date.toString(), time_iso: date.toISOString(), ...eventData }, ...appData }); Logger.logInfo('track-event', params.toString()); - return fetch(envService.HOME_URL ?? 'https://jiffyreader.com' + `/track-event?${params.toString()}`); + return fetch(envService.PLASMO_PUBLIC_HOME_URL ?? 'https://jiffyreader.com' + `/track-event?${params.toString()}`); } const TrackEventService = { diff --git a/src/services/config.ts b/src/services/config.ts index 74a893d..f3e0362 100644 --- a/src/services/config.ts +++ b/src/services/config.ts @@ -1,7 +1,7 @@ import { envService } from '~services/envService'; export const USER_PREF_STORE_KEY = 'prefStore'; export const APP_PREFS_STORE_KEY = 'appStore'; -export const STORAGE_AREA = ((envService.PLASMO_TARGET as string).includes('firefox') && 'local') || 'sync'; +export const STORAGE_AREA = ((envService.PLASMO_PUBLIC_TARGET as string).includes('firefox') && 'local') || 'sync'; export const COLOR_MODE_STATE_TRANSITIONS = [ [null, 'light'], diff --git a/src/services/documentParser.ts b/src/services/documentParser.ts index 062600d..b9542a1 100644 --- a/src/services/documentParser.ts +++ b/src/services/documentParser.ts @@ -194,18 +194,21 @@ function addStyles(styleText, document) { document.head.appendChild(style); } -const setAttribute = (documentRef) => (attribute, value) => { +const amendClasses = (documentRef: typeof document) => (action: 'add' | 'remove', classList: string[]) => + action === 'add' ? documentRef.body.classList.add(...classList) : document.body.classList.remove(...classList); + +const setAttribute = (documentRef: typeof document) => (attribute, value) => { documentRef.body.setAttribute(attribute, value); }; -const getAttribute = (documentRef) => (attribute) => documentRef.body.getAttribute(attribute); +const getAttribute = (documentRef: typeof document) => (attribute) => documentRef.body.getAttribute(attribute); -const setProperty = (documentRef) => (property, value) => { +const setProperty = (documentRef: typeof document) => (property, value) => { documentRef.body.style.setProperty(property, value); }; -const getProperty = (documentRef) => (property) => documentRef.body.style.getPropertyValue(property); +const getProperty = (documentRef: typeof document) => (property) => documentRef.body.style.getPropertyValue(property); -const setSaccadesStyle = (documentRef) => (style) => { +const setSaccadesStyle = (documentRef: typeof document) => (style) => { Logger.logInfo('saccades-style', style); if (/bold/i.test(style)) { @@ -223,12 +226,13 @@ const setSaccadesStyle = (documentRef) => (style) => { export default { setReadingMode, - makeHandlers: (documentRef) => ({ + makeHandlers: (documentRef: typeof document) => ({ setAttribute: setAttribute(documentRef), getAttribute: getAttribute(documentRef), setProperty: setProperty(documentRef), getProperty: getProperty(documentRef), setSaccadesStyle: setSaccadesStyle(documentRef), + amendClasses: amendClasses(documentRef), }), hasLatex, }; diff --git a/src/services/envService.ts b/src/services/envService.ts index f15c46f..69197f8 100644 --- a/src/services/envService.ts +++ b/src/services/envService.ts @@ -7,14 +7,15 @@ const booleanMap = new Map<'true' | 'false' | undefined, boolean>([ ]); const env = { - PLASMO_VERSION: { value: process.env.PLASMO_VERSION, validator: z.string().optional() }, - PLASMO_VERSION_NAME: { value: process.env.PLASMO_VERSION_NAME, validator: z.string().optional() }, - PLASMO_TARGET: { - value: process.env.PLASMO_TARGET, + PLASMO_PUBLIC_SHORTCUT: { value: process.env.PLASMO_PUBLIC_SHORTCUT, validator: z.string() }, + PLASMO_PUBLIC_VERSION: { value: process.env.PLASMO_PUBLIC_VERSION, validator: z.string().optional() }, + PLASMO_PUBLIC_VERSION_NAME: { value: process.env.PLASMO_PUBLIC_VERSION_NAME, validator: z.string().optional() }, + PLASMO_PUBLIC_TARGET: { + value: process.env.PLASMO_PUBLIC_TARGET, validator: z .string() .default('') - .transform((x) => x as typeof process.env.PLASMO_TARGET), + .transform((x) => x as typeof process.env.PLASMO_PUBLIC_TARGET), }, NODE_ENV: { value: process.env.NODE_ENV, @@ -23,21 +24,21 @@ const env = { .optional() .transform((x) => x as typeof process.env.NODE_ENV), }, - PLASMO_DEBUG: { - value: process.env.PLASMO_DEBUG, + PLASMO_PUBLIC_DEBUG: { + value: process.env.PLASMO_PUBLIC_DEBUG, validator: z .boolean() .or( z - .enum(['true', 'false']) + .enum(['TRUE', 'FALSE']) // .optional() // .default('true') .transform((x) => booleanMap.get(x as keyof typeof booleanMap.keys)), ) .default(false), }, - PLASMO_ENABLE_TRACKING: { - value: process.env.PLASMO_ENABLE_TRACKING, + PLASMO_PUBLIC_ENABLE_TRACKING: { + value: process.env.PLASMO_PUBLIC_ENABLE_TRACKING, validator: z .boolean() .or( @@ -49,7 +50,7 @@ const env = { ) .default(false), }, - PLASMO_HOME_URL: { value: process.env.PLASMO_HOME_URL, validator: z.string().optional() }, + PLASMO_PUBLIC_HOME_URL: { value: process.env.PLASMO_PUBLIC_HOME_URL, validator: z.string().optional() }, }; type Env = typeof env; @@ -78,4 +79,6 @@ const envService = { }, }; +console.log({ envService }); + export { envService }; diff --git a/src/services/preferences.ts b/src/services/preferences.ts index c8c1648..3fb95ab 100644 --- a/src/services/preferences.ts +++ b/src/services/preferences.ts @@ -21,6 +21,23 @@ const defaultPrefs = { showBeta: true, transformControlPanelText: false, autoOnDelay: 5_000, + showContentDebugOverlay: false, + symanticTags: { + nav: true, + footer: true, + aside: true, + a: true, + button: true, + p: true, + pre: true, + span: true, + code: true, + caption: true, + li: true, + ul: true, + ol: true, + dialog: true, + }, }; export default defaultPrefs; diff --git a/src/services/usePrefs.tsx b/src/services/usePrefs.tsx index beef80f..9100f7f 100644 --- a/src/services/usePrefs.tsx +++ b/src/services/usePrefs.tsx @@ -10,7 +10,7 @@ import defaultPrefs from './preferences'; const PREF_STORE_SCOPES = ['global', 'local', 'reset']; const PREF_LOG_STYLE = 'color: green; background: black;'; -const usePrefs = (getOrigin: () => Promise, initialize = false, target = envService.PLASMO_TARGET ?? 'chrome'): [Prefs, SetPrefsExternal] => { +const usePrefs = (getOrigin: () => Promise, initialize = false, target = envService.PLASMO_PUBLIC_TARGET ?? 'chrome'): [Prefs, SetPrefsExternal, typeof updateConfig] => { const [privateOrigin, setPrivateOrigin] = useState(null); const area = ((target as string).includes('firefox') && 'local') || 'sync'; @@ -84,10 +84,17 @@ const usePrefs = (getOrigin: () => Promise, initialize = false, target = })(); }, [getOrigin]); + const updateConfig = (key: T, value: Prefs[T], configLocal = outPrefs, _getTabOriginfn = getOrigin) => { + const newConfig = { ...configLocal, [key]: value }; + + setPrefsExternal(_getTabOriginfn, newConfig.scope, newConfig); + }; + const outPrefs = getActivePrefs(); Logger.logInfo('%cusePrefs.return', 'background-color:lime'); Logger.LogTable({ privateOrigin, outPrefs, prefStore, area }); - return [outPrefs, setPrefsExternal]; + + return [outPrefs, setPrefsExternal, updateConfig]; }; export default usePrefs; diff --git a/src/styles/contentStyle.scss b/src/styles/contentStyle.scss index 646a970..2f5dd65 100644 --- a/src/styles/contentStyle.scss +++ b/src/styles/contentStyle.scss @@ -10,7 +10,13 @@ $hue3: #561f37ff; $hue4: rgb(68, 155, 255); $delta: 8%; -$saccadesColorsBase: (0, $hue1), (1, $hue2), (2, $hue3), (3, $hue4); +$saccadesColorsBase: ( + 0, + $hue1), + (1, $hue2), + (2, $hue3), + (3, $hue4 +); /** generate (3) fixation-strength variants @@ -57,6 +63,7 @@ $saccadesColorsBase: (0, $hue1), (1, $hue2), (2, $hue3), (3, $hue4); } [br-mode='on'] { + br-bold *, br-edge { opacity: (var(--fixation-edge-opacity, $activeFixationOpacity)); @@ -71,4 +78,28 @@ $saccadesColorsBase: (0, $hue1), (1, $hue2), (2, $hue3), (3, $hue4); @include makeColorVariants($color, $id, -$delta, 'dark'); } + + $excludedElements: ( + nav, + footer, + p, + a, + button, + aside + ); + +@each $excludedElement in $excludedElements { + + &.br-exclusions-#{$excludedElement} #{$excludedElement} { + + & br-bold :is(*, [fixation-strength]), + & br-edge { + --fixation-edge-opacity: initial !important; + --br-line-height: initial !important; + --br-boldness: initial !important; + opacity: initial; + } + } + } +} \ No newline at end of file