Skip to content

Commit

Permalink
Merge pull request #60 from asieduernest12/feat/dynamicHtmlNodesExclu…
Browse files Browse the repository at this point in the history
…sions

Feat/dynamic html nodes exclusions
  • Loading branch information
asieduernest12 authored Dec 30, 2024
2 parents 382a026 + e5c35f8 commit c321182
Show file tree
Hide file tree
Showing 21 changed files with 240 additions and 109 deletions.
14 changes: 7 additions & 7 deletions index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}

Expand Down
48 changes: 24 additions & 24 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,28 @@
"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",
Expand Down Expand Up @@ -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",
Expand All @@ -93,7 +93,7 @@
"commands": {
"toggle-bionic": {
"suggested_key": {
"default": "$PLASMO_SHORTCUT"
"default": "$PLASMO_PUBLIC_SHORTCUT"
},
"description": "Toggle bionic reading mode"
}
Expand Down
4 changes: 2 additions & 2 deletions src/Bookmarklet/esbuild.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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',
};

Expand All @@ -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);
Expand Down
38 changes: 23 additions & 15 deletions src/Bookmarklet/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
6 changes: 3 additions & 3 deletions src/background/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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}`,
});
};

Expand Down Expand Up @@ -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 });
Expand Down
17 changes: 13 additions & 4 deletions src/contents/content.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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) => {
Expand Down Expand Up @@ -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(() => {
Expand All @@ -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">
Expand All @@ -179,7 +188,7 @@ const IndexContent = () => {
);
};

return showDebugOverLay();
return !!prefs?.showContentDebugOverlay && showDebugOverLay();
};

export default IndexContent;
32 changes: 32 additions & 0 deletions src/popup/HtmlNodeToggles.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
34 changes: 22 additions & 12 deletions src/popup/ShowInlineDebug.tsx
Original file line number Diff line number Diff line change
@@ -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();

Expand All @@ -23,16 +24,25 @@ export function ShowDebugInline({ tabSession }: { tabSession: TabSession }) {

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>
<div className="flex flex-row || justify-between">
<label htmlFor="isDebugDataVisibleInput">
Show
<input
type="checkbox"
name="isDebugDataVisibleInput"
id="isDebugDataVisibleInput"
onChange={(event) => setIsDebugDataVisible(event.currentTarget.checked)}
checked={isDebugDataVisible}
/>
</label>

{!envService.isProduction && (
<label>
ContentOverlay
<input type="checkbox" onChange={(event) => setPrefs('showContentDebugOverlay', event.target.checked)} />
</label>
)}
</div>
{isDebugDataVisible && debugData}
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion src/popup/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Loading

0 comments on commit c321182

Please sign in to comment.