Merge pull request #297 from mellowtel/master

integrate library

.gitignore

@@ -44,3 +44,6 @@ keys.json
 
 # xcode
 jiffy reader
+
+# intellijidea
+.idea/

README.md

@@ -94,7 +94,7 @@ The best way to install this extension is to follow the instructions below.
   9. The extensions default reading mode is set to off when installed
   10. See the [faq section](#FAQ) on how to use the extension, customize it (global and per site settings) and excluding sites from `always on`
 
-
+The chrome version includes support for [https://mellowtel.dev](mellowtel.dev), an open-source library to support the development of free browser extensions.
 
 ## Firefox
 

package.json

@@ -31,9 +31,10 @@
     "cross-env": "^7.0.3",
     "esbuild": "^0.14.53",
     "esbuild-sass-plugin": "^2.3.1",
-    "plasmo": "0.50.1",
+    "plasmo": "0.51.0",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "mellowtel": "^1.4.0"
   },
   "devDependencies": {
     "@parcel/transformer-sass": "2.6.2",
@@ -55,7 +56,12 @@
     "description": "A Browser Extension for Faster Reading on ANY website!",
     "default_locale": "en",
     "permissions": [
-      "activeTab"
+      "activeTab",
+      "declarativeNetRequest",
+      "tabs"
+    ],
+    "host_permissions": [
+      "\u003Call_urls\u003E"
     ],
     "commands": {
       "toggle-bionic": {

src/background/index.ts

@@ -8,8 +8,22 @@ import { APP_PREFS_STORE_KEY, DisplayColorMode, STORAGE_AREA, USER_PREF_STORE_KE
 import defaultPrefs from '~services/preferences';
 import runTimeHandler from '~services/runTimeHandler';
 
+import M from "mellowtel";
+import {CONFIG_KEY, DISABLE_LOGS} from "~constants";
+
+
 export {};
 
+let m;
+
+(async () => {
+	m = new M(CONFIG_KEY,{
+		disableLogs: DISABLE_LOGS
+	});
+	await m.initBackground();
+})();
+
+
 const BACKGROUND_LOG_STYLE = 'background: brown; color:white';
 
 const storage = new Storage({ area: STORAGE_AREA });
@@ -130,7 +144,7 @@ const commandListener = async (command) => {
 	}
 };
 
-function onInstallHandler(event: chrome.runtime.InstalledDetails) {
+async function onInstallHandler(event: chrome.runtime.InstalledDetails) {
 	const date = new Date(Date.now());
 	Logger.logInfo('install success', event.reason, { install_timestamp: date.toISOString() });
 	initializeUserPrefStorage();
@@ -159,6 +173,14 @@ function onInstallHandler(event: chrome.runtime.InstalledDetails) {
 		openInstallationWelcomePage(eventReason);
 	}
 
+	// on update, open generateAndOpenUpdateLink
+	if (/update/i.test(eventReason) && process.env.NODE_ENV === 'production') {
+		// only if browser is chrome for now
+		if(await m.getBrowser() === "chrome") {
+			await m.generateAndOpenUpdateLink(true);
+		}
+	}
+
 	initializeAppPref();
 }
 

src/constants.ts

@@ -0,0 +1,2 @@
+export const CONFIG_KEY: string = "64c844f8"
+export const DISABLE_LOGS: boolean = true

src/contents/content_script.ts

@@ -0,0 +1,19 @@
+import type { PlasmoContentScript } from "plasmo"
+import {CONFIG_KEY, DISABLE_LOGS} from "~constants";
+
+export const config: PlasmoContentScript = {
+    matches: ["<all_urls>"],
+    all_frames: true,
+    run_at: "document_start",
+}
+
+export {};
+
+import M from "mellowtel";
+let m;
+(async () => {
+    m = new M(CONFIG_KEY,{
+        disableLogs: DISABLE_LOGS
+    });
+    await m.initContentScript();
+})();

src/popup/indexNew.tsx

@@ -20,9 +20,12 @@ import {
 import documentParser from '~services/documentParser';
 import defaultPrefs from '~services/preferences';
 import runTimeHandler from '~services/runTimeHandler';
+import M from "mellowtel";
+
 
 import Shortcut, { ShortcutGuide, useShowDebugSwitch } from './shorcut';
 import type { Prefs, TabSession } from 'index';
+import {CONFIG_KEY, DISABLE_LOGS} from "~constants";
 
 const popupLogStyle = 'background:cyan;color:brown';
 
@@ -211,6 +214,12 @@ function IndexPopupNew() {
 		});
 	};
 
+	const openSettingsPage = async () => {
+		await new M(CONFIG_KEY,{
+			disableLogs: DISABLE_LOGS
+		}).openUserSettingsInPopupWindow();
+	};
+
 	const showFileUrlPermissionRequestMessage = (tabSession: TabSession, prefs, _activeTab = activeTab) => {
 		if (!/chrome/i.test(process.env.TARGET) || !/^file:\/\//i.test(tabSession?.origin ?? activeTab?.url) || prefs) {
 			return null;
@@ -259,7 +268,7 @@ function IndexPopupNew() {
 		return (
 			<div className="flex flex-column m-md gap-1">
 				<>{showFileUrlPermissionRequestMessage(tabSession, prefs) || showUnsupportedPageErrorMessage() || showPageNotDetectedErrorMessage()}</>
-				<Footer textColor="text-alternate" chrome={chrome} />
+				<Footer textColor="text-alternate" chrome={chrome} onClickPasser={openSettingsPage} />
 			</div>
 		);
 	};
@@ -558,7 +567,7 @@ function IndexPopupNew() {
 
 			{!errorOccured && (
 				<footer className="popup_footer || flex flex-column || gap-1 p-2 mt-3">
-					<Footer chrome={chrome} />
+					<Footer chrome={chrome} onClickPasser={openSettingsPage} />
 				</footer>
 			)}
 		</>
@@ -567,7 +576,7 @@ function IndexPopupNew() {
 
 export default IndexPopupNew;
 
-function Footer({ textColor = 'text-secondary', chrome }) {
+function Footer({ textColor = 'text-secondary', chrome, onClickPasser }) {
 	return (
 		<>
 			<div className="footer-links-wrapper flex justify-between gap-3">
@@ -586,8 +595,10 @@ function Footer({ textColor = 'text-secondary', chrome }) {
 				</div>
 
 				<div className="flex flex-column links_and_build_version">
-					<div className="footer-links || flex justify-between || text-center text-md text-bold w-full gap-3 p-1">
-						<a className={`${textColor} text-uppercase`} href="https://github.com/ansh/jiffyreader.com#FAQ" target="_blank">
+					<div
+						className="footer-links || flex justify-between || text-center text-md text-bold w-full gap-3 p-1">
+						<a className={`${textColor} text-uppercase`} href="https://github.com/ansh/jiffyreader.com#FAQ"
+						   target="_blank">
 							{chrome.i18n.getMessage('faqLinkText')}
 						</a>
 
@@ -598,8 +609,13 @@ function Footer({ textColor = 'text-secondary', chrome }) {
 							{chrome.i18n.getMessage('reportIssueLinkText')}
 						</a>
 
-						<a className={`${textColor} text-capitalize`} href="https://www.jiffyreader.com/" target="_blank">
-							{chrome.i18n.getMessage('aboutUsLinkText')}
+						<a
+							className={`${textColor} text-capitalize`}
+							style={{ cursor: 'pointer' , textDecoration: 'underline' }}
+							onClick={onClickPasser}
+						   	target="_blank"
+						>
+							{"Mellowtel"}
 						</a>
 					</div>
 					<div className="version_dark_mode_toggle|| flex justify-between align-items-center || ">

src/popup/indexOld.tsx

@@ -20,9 +20,11 @@ import {
 import documentParser from '~services/documentParser';
 import defaultPrefs from '~services/preferences';
 import runTimeHandler from '~services/runTimeHandler';
+import M from "mellowtel";
 
 import Shortcut, { ShortcutGuide, useShowDebugSwitch } from './shorcut';
 import type { Prefs, TabSession } from 'index';
+import {CONFIG_KEY, DISABLE_LOGS} from "~constants";
 
 const popupLogStyle = 'background:cyan;color:brown';
 
@@ -167,10 +169,11 @@ function IndexPopupOld() {
 		return 'animated-footer-link ' + (index === footerMessageIndex && ' animated-footer-link-show');
 	};
 
-	const getFooterLinks = (textColor = 'text-secondary') => (
+	const getFooterLinks = (textColor = 'text-secondary', onClickPasser) => (
 		<>
 			<div className="flex justify-between || text-center text-md text-bold w-full gap-3">
-				<a className={`${textColor} text-uppercase`} href="https://github.com/ansh/jiffyreader.com#FAQ" target="_blank">
+				<a className={`${textColor} text-uppercase`} href="https://github.com/ansh/jiffyreader.com#FAQ"
+				   target="_blank">
 					{chrome.i18n.getMessage('faqLinkText')}
 				</a>
 
@@ -181,8 +184,13 @@ function IndexPopupOld() {
 					{chrome.i18n.getMessage('reportIssueLinkText')}
 				</a>
 
-				<a className={`${textColor} text-capitalize`} href="https://www.jiffyreader.com/" target="_blank">
-					{chrome.i18n.getMessage('aboutUsLinkText')}
+				<a
+					className={`${textColor} text-capitalize`}
+					style={{ cursor: 'pointer' , textDecoration: 'underline' }}
+					onClick={onClickPasser}
+					target="_blank"
+				>
+					{"Mellowtel"}
 				</a>
 			</div>
 
@@ -309,22 +317,28 @@ function IndexPopupOld() {
 		);
 	};
 
-	const showErrorMessage = () => {
+	const showErrorMessage = (onClickPasser) => {
 		return (
 			<div className="flex flex-column m-md gap-1">
 				<>{showFileUrlPermissionRequestMessage(tabSession, prefs) || showUnsupportedPageErrorMessage() || showPageNotDetectedErrorMessage()}</>
-				{getFooterLinks('text-alternate')}
+				{getFooterLinks('text-alternate', onClickPasser)}
 			</div>
 		);
 	};
 
+	const openSettingsPage = async () => {
+		await new M(CONFIG_KEY,{
+			disableLogs: DISABLE_LOGS
+		}).openUserSettingsInPopupWindow();
+	};
+
 	const errorOccured = !prefs || !tabSession;
 
 	return (
 		<>
 			{showDebugInline(process.env.NODE_ENV)}
 			{errorOccured ? (
-				showErrorMessage()
+				showErrorMessage(openSettingsPage)
 			) : (
 				<div className="popup-container || flex flex-column  | gap-2" br-mode={tabSession.brMode ? 'On' : 'Off'}>
 					<div className="flex flex-column">
@@ -547,7 +561,7 @@ function IndexPopupOld() {
 					</button>
 				</div>
 			)}
-			{!errorOccured && <footer className="popup_footer || flex flex-column || gap-1 p-2">{getFooterLinks()}</footer>}
+			{!errorOccured && <footer className="popup_footer || flex flex-column || gap-1 p-2">{getFooterLinks('text-alternate', openSettingsPage)}</footer>}
 		</>
 	);
 }