.gitignore

@@ -1,5 +1,5 @@
 node_modules
+dist
 .vscode
 web-ext-artifacts
 .amo-upload-uuid
-dist

README.md

@@ -1,30 +0,0 @@
-
-# :dollar: Kobo Price
-
-Helps you find the lowest book price on kobo.com.
-
-![example](./img/example.gif)
-
-## Installation
-You can install this script in several ways:
-
-- [Firefox add-on](https://addons.mozilla.org/en-US/firefox/addon/kobo-price)
-- [Chrome extension](https://chromewebstore.google.com/detail/kobo-price/gjiadglcgiidfphjijgeellagidbkiah)
-- [Userscript](https://raw.githubusercontent.com/fotonmoton/koboprice/master/userscript/koboprice.user.js)
-
-## Usage
-On kobo.com, the book price for each country could be different. This script will fetch all book prices, convert them to USD at today's rate, sort them, and show to you as a list. Then you can change your billing address to the country whose price you like and proceed to checkout.
-
-- Go to the book/audiobook page you want to buy
-- wait a couple of minutes until all the prices are loaded (you should see the progress on the right side of the book page)
-- get the list of prices sorted and converted to USD
-
-## Build
-
-All artifacts are based on the `dist/index.js` bundle. To get it, run `npm run bundle`. To get the web extension archive, run `npm run build-ext`. To get the userscript, run `npm run build-userscript`.
-
-To get all the above:
-
-```sh
-npm install && npm build-all
-```

eslint.config.js

@@ -4,7 +4,7 @@ import globals from "globals";
 
 export default [
   {
-    ignores: ["dist", "userscript"],
+    ignores: ["dist"],
   },
   eslintPluginPrettierRecommended,
   js.configs.recommended,

lib/bookPriceFor.js

@@ -1,5 +1,5 @@
 import { bookUrl } from "./bookUrl";
-import { extractPrice } from "./extractPrice";
+import { extractPriceFrom } from "./extractPriceFrom";
 import { getRate } from "./rates";
 import { convertPrice } from "./convertPrice";
 import { cacheBookPrice, getBookPrice } from "./cache";
@@ -17,7 +17,7 @@ export const bookPriceFor = async (country) => {
     return fromCache;
   }
 
-  const countryPrice = await extractPrice(url);
+  const countryPrice = await extractPriceFrom(url);
 
   let convertedPrice;
 

lib/bookUrl.js

@@ -1,9 +1,6 @@
 export const bookUrl = (country) => {
   const urlPattern = /^https:\/\/www\.kobo\.com\/../;
   const newPath = `https://www.kobo.com/${country}`;
-  const url = window.location.href.replace(urlPattern, newPath);
 
-  l("url for country", country, url);
+  return window.location.href.replace(urlPattern, newPath);
-
-  return url;
 };

lib/cache.js

@@ -1,20 +1,8 @@
-import { COUNTRIES } from "./countries";
-
 const CACHE_PREFIX = "KOBOPRICE";
 
-const initCountries = () =>
-	COUNTRIES.reduce(
-		(acc, { countryCode }) => ({ ...acc, [countryCode]: true }),
-		{},
-	);
-
 export const initCache = () => {
   if (!localStorage.getItem(CACHE_PREFIX)) {
-		setState({
+    setState({ books: {}, rates: null });
-			books: {},
-			rates: null,
-			countries: initCountries(),
-		});
   }
 };
 export const getState = () => JSON.parse(localStorage.getItem(CACHE_PREFIX));
@@ -28,10 +16,3 @@ export const cacheBookPrice = (price, url) => {
   state.books[url] = price;
   setState(state);
 };
-export const getSelectedCountries = () =>
-	getState().countries || initCountries();
-export const cacheSelectedCountries = (countries) => {
-	const state = getState();
-	state.countries = countries;
-	setState(state);
-};

lib/convertPrice.js

@@ -26,14 +26,9 @@ export const convertPrice = async (price, curr, rate) => {
       price = price.replace("S/.", "");
       break;
     }
-    case "try": {
-      price = price.replace(".", "").replace(",", ".");
-      break;
-    }
     case "clp":
     case "cop":
-    case "twd":
+    case "twd": {
-    case "mxn": {
       break;
     }
     default:

lib/extractPrice.js

@@ -1,51 +0,0 @@
-const timeout = (duration) => new Promise((r) => setTimeout(r, duration));
-
-const observePriceOnPage = (page) =>
-	new Promise((res, rej) => {
-		timeout(5000).then(() => rej("price not found"));
-
-		var observer = new MutationObserver(() => {
-			const price = page?.querySelector(
-				".primary-right-container .pricing-details .active-price span",
-			)?.textContent;
-
-			if (price) {
-				l("found price", price);
-				observer.disconnect();
-				res(price);
-			}
-		});
-
-		observer.observe(page, {
-			childList: true,
-			characterData: true,
-			subtree: true,
-		});
-	});
-
-export const extractPrice = async (url) => {
-	try {
-		l("going to", url);
-
-		const iframe = document.createElement("iframe");
-
-		iframe.src = url;
-
-		iframe.hidden = true;
-
-		document.body.append(iframe);
-
-		await new Promise((res) => (iframe.contentWindow.onload = res));
-
-		l("starting observing price on", url);
-
-		const price = await observePriceOnPage(iframe.contentDocument.body);
-
-		document.body.removeChild(iframe);
-
-		return price;
-	} catch (e) {
-		l("getPriceForCountry", e, url);
-		return "";
-	}
-};

lib/extractPriceFrom.js

@@ -0,0 +1,52 @@
+const timeout = (duration) => new Promise((r) => setTimeout(r, duration));
+
+const observePriceOnPage = (page) =>
+  new Promise((res, rej) => {
+    timeout(10000).then(() => rej("price not found"));
+
+    var observer = new MutationObserver(() => {
+      const price = page.querySelector(
+        ".primary-right-container .pricing-details .active-price span",
+      ).textContent;
+
+      if (price) {
+        l("found price", price);
+        observer.disconnect();
+        res(price);
+      }
+    });
+
+    observer.observe(page, {
+      attributes: true,
+      childList: true,
+      characterData: true,
+      subtree: true,
+    });
+  });
+
+export const extractPriceFrom = async (url) => {
+  try {
+    l("going to", url);
+
+    const iframe = document.createElement("iframe");
+
+    iframe.src = url;
+
+    iframe.hidden = true;
+
+    document.body.append(iframe);
+
+    await new Promise((res) => (iframe.contentWindow.onload = res));
+
+    l("starting observing price on", url);
+
+    const price = await observePriceOnPage(iframe.contentDocument.body, url);
+
+    document.body.removeChild(iframe);
+
+    return price;
+  } catch (e) {
+    l("getPriceForCountry", e, url);
+    return "";
+  }
+};

lib/index.js

@@ -1,208 +1,104 @@
-import { useSelectedCountries } from "./useCountries";
 import "./logger";
-import { createElement, h, render } from "preact";
+import { COUNTRIES } from "./countries";
-import { useCallback, useEffect, useRef, useState } from "preact/hooks";
-import { bookUrl } from "./bookUrl";
 import { initCache } from "./cache";
-import { usePrices } from "./usePrices";
+import { bookPriceFor } from "./bookPriceFor";
 
 /*
 TODO:
+- publish to stores
 - more durable source for rates
+- React for UI
+- More informative UI, show loading progress
+- clear stale cache
 - readme how to use and debug
+- configuration (purge cache, change base currency)
 */
 
 const createPricesContainer = () => {
-	const pricingActionContainers = document.querySelectorAll(".pricing-details");
+  const pricingActionContainer = document.querySelector(
+    ".primary-right-container",
+  );
 
-	l("all pricing containers", pricingActionContainers);
+  const container = document.createElement("div");
 
-	let visible;
+  container.style.display = "flex";
-	for (const node of pricingActionContainers) {
+  container.style.flexDirection = "column";
-		if (node.checkVisibility()) {
+  container.style.border = "1px solid black";
-			l("found visible pricing container", node);
+  container.style.padding = "10px";
-			visible = node;
-			break;
-		}
-	}
 
-	return visible.parentNode.insertBefore(
+  return pricingActionContainer.parentNode.insertBefore(
-		document.createElement("div"),
+    container,
-		visible,
+    pricingActionContainer,
   );
 };
 
-const isInLibrary = () => document.querySelectorAll(".read-now").length;
+const getPrices = async () => {
-
+  const prices = [];
-const formatPrice = (countryPrice, convertedPrice, isSelected) => {
+  for (const country of COUNTRIES) {
-	if (!isSelected) return "SKIP";
+    // intentionally blocking execution
-
+    // to resolve sequentially.
-	if (countryPrice == undefined) {
+    // It should prevent DOS and triggering captcha
-		return "NOT LOADED";
+    prices.push(await bookPriceFor(country));
   }
 
-	if (convertedPrice) {
+  return prices;
-		return `${countryPrice} => ${convertedPrice?.formatted}`;
-	}
-
-	return "NOT FOUND";
 };
 
-const Price = ({ price, toggleCountry, isSelected }) => {
+const sortPrices = (prices) =>
-	const { convertedPrice, countryCode, countryPrice } = price;
+  prices.sort(
-	const [isHovered, setHover] = useState(false);
+    (a, b) =>
-
+      (a?.convertedPrice?.intValue || Infinity) -
-	const hover = useCallback(() => setHover(true));
+      (b?.convertedPrice?.intValue || Infinity),
-	const leave = useCallback(() => setHover(false));
-
-	const style = {
-		display: "flex",
-		flexDirection: "row",
-		justifyContent: "space-between",
-		alignItems: "center",
-		backgroundColor: isHovered ? "#d7d7d7" : "",
-		padding: "0 10px",
-	};
-
-	const link = h(
-		"a",
-		{
-			style: { textDecoration: "underline" },
-			href: bookUrl(countryCode),
-			target: "_blank",
-		},
-		countryCode.toUpperCase(),
   );
 
-	const checkbox = h("input", {
+const showPrices = (container, prices) => {
-		type: "checkbox",
+  container.innerText = null;
-		checked: isSelected,
+  prices.forEach((price) => {
-		onChange: () => toggleCountry(),
+    const link = document.createElement("a");
+    link.href = price.url;
+    link.target = "_blank";
+    link.style.marginBottom = "5px";
+    link.style.display = "flex";
+    link.style.justifyContent = "space-between";
+    const oldPrice = document.createElement("p");
+    oldPrice.innerText = `${price.countryCode.toUpperCase()}: ${price?.countryPrice || "NO PRICE"}`;
+    const newPrice = document.createElement("p");
+    newPrice.innerText = price?.convertedPrice?.formatted ?? "NO PRICE";
+    newPrice.style.fontWeight = "bold";
+    link.appendChild(oldPrice);
+    link.appendChild(newPrice);
+    container.appendChild(link);
   });
-
-	const priceLabel = h(
-		"p",
-		{ style: { fontWeight: "bold" } },
-		formatPrice(countryPrice, convertedPrice, isSelected),
-	);
-
-	return h(
-		"label",
-		{ style, onMouseEnter: hover, onMouseLeave: leave },
-		h("div", { style: { display: "flex" } }, checkbox, link),
-		priceLabel,
-	);
 };
 
-const InLibrary = () =>
+async function main() {
-	h(
+  const container = createPricesContainer();
-		"div",
-		{
-			style: {
-				display: "flex",
-				flexDirection: "column",
-				border: "1px solid black",
-				textAlign: "center",
-			},
-		},
-		h("h2", null, "Already in Library!"),
-	);
 
-const Percent = (percent) => {
+  container.innerText = "LOADING PRICES...";
-	const spinner = useRef();
 
-	useEffect(() => {
+  try {
-		spinner.current.animate(
+    initCache();
-			[{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }],
-			{ iterations: Infinity, duration: 1000 },
-		);
-	}, []);
 
-	const style = { padding: "10px 10px 0 10px", textAlign: "center" };
+    const countriesPrice = await getPrices();
 
-	if (percent == 100) return h("h2", { style }, "all prices are loaded!");
+    l("country prices", countriesPrice);
 
-	return h(
+    sortPrices(countriesPrice);
-		"h2",
-		{ style },
-		`${percent}%`,
-		h("span", {
-			ref: spinner,
-			style: {
-				width: "16px",
-				height: "16px",
-				borderRadius: "50%",
-				display: "inline-block",
-				borderTop: "3px solid black",
-				borderRight: "3px solid transparent",
-				boxSizing: "border-box",
-				marginLeft: "15px",
-			},
-		}),
-	);
-};
 
-const Header = (state, percentChecked) => {
+    l("sorted prices", countriesPrice);
-	if (state === "loading") return Percent(percentChecked);
 
-	if (state === "done")
+    showPrices(container, countriesPrice);
-		return h(
+  } catch (e) {
-			"h2",
+    l("error", e);
-			{ style: { textAlign: "center" } },
+    container.innerText = "FAILED TO LOAD PRICES. CHECK CONSOLE FOR MORE INFO";
-			"All prices are loaded!",
+  } finally {
-		);
+    l("done");
-
-	return h(
-		"h2",
-		{ style: { textAlign: "center" } },
-		'Select countries or leave as is and press "load"',
-	);
-};
-
-const Load = (state, load) => {
-	return h(
-		"button",
-		{
-			disabled: state === "loading",
-			onClick: load,
-			type: "button",
-			style: { backgroundColor: "#91ff91" },
-		},
-		state === "loading" ? "Loading..." : "Load prices",
-	);
-};
-
-const App = () => {
-	const { isSelected, toggleCountry, selected } = useSelectedCountries();
-	const { prices, percentChecked, state, load } = usePrices(selected);
-
-	l(selected);
-	const style = {
-		display: "flex",
-		flexDirection: "column",
-		border: "1px solid black",
-	};
-
-	if (isInLibrary()) {
-		return InLibrary();
   }
-
+}
-	return h(
-		"div",
-		{ style },
-		Header(state, percentChecked),
-		...prices.map((price) =>
-			h(Price, {
-				price,
-				toggleCountry: () => toggleCountry(price.countryCode),
-				isSelected: isSelected(price.countryCode),
-				isLoading: state,
-			}),
-		),
-		Load(state, load),
-	);
-};
 
 l("starting...");
-initCache();
+
-render(createElement(App), createPricesContainer());
+window.onload = () => {
+  l("page is fully loaded");
+  void main();
+};

lib/useCountries.js

@@ -1,22 +0,0 @@
-import "./logger";
-
-import { useCallback, useEffect, useState } from "preact/hooks";
-import { cacheSelectedCountries, getSelectedCountries } from "./cache";
-
-export const useSelectedCountries = () => {
-	const [selected, setSelected] = useState(() => getSelectedCountries());
-
-	useEffect(() => cacheSelectedCountries(selected), [selected]);
-
-	const toggleCountry = useCallback((countryCode) =>
-		setSelected({ ...selected, [countryCode]: !selected[countryCode] }),
-	);
-
-	const isSelected = useCallback((countryCode) => !!selected[countryCode]);
-
-	return {
-		selected,
-		toggleCountry,
-		isSelected,
-	};
-};

lib/usePrices.js

@@ -1,61 +0,0 @@
-import { useCallback, useState } from "preact/hooks";
-import { bookPriceFor } from "./bookPriceFor";
-import { COUNTRIES } from "./countries";
-
-const sortPrices = (prices, selectedCountries) =>
-	prices.sort((a, b) => {
-		if (!selectedCountries[a.countryCode]) return 1;
-		if (!selectedCountries[b.countryCode]) return -1;
-
-		return (
-			(a?.convertedPrice?.intValue || Infinity) -
-			(b?.convertedPrice?.intValue || Infinity)
-		);
-	});
-
-export const usePrices = (selectedCountries) => {
-	const [prices, setPrices] = useState(COUNTRIES);
-	const [state, setState] = useState("init");
-
-	const load = useCallback(async () => {
-		setState("loading");
-		for (let index = 0; index < prices.length; index += 2) {
-			if (!selectedCountries[prices[index].countryCode]) continue;
-
-			// intentionally blocking execution
-			// to resolve sequentially.
-			// It should prevent DOS and triggering captcha
-			if (index + 1 < prices.length) {
-				const [first, second] = await Promise.all([
-					bookPriceFor(prices[index]),
-					bookPriceFor(prices[index + 1]),
-				]);
-				prices[index] = first;
-				prices[index + 1] = second;
-			} else {
-				prices[index] = await bookPriceFor(prices[index]);
-			}
-
-			setPrices([...prices]);
-		}
-		setState("done");
-		l("DONE");
-	}, [selectedCountries]);
-
-	const selectedCount = Object.entries(selectedCountries)
-		.map(([_, selected]) => selected)
-		.filter(Boolean).length;
-
-	const alreadyLoaded = prices.filter(
-		(p) => p.countryPrice != undefined && selectedCountries[p.countryCode],
-	).length;
-
-	const percentChecked = (alreadyLoaded / selectedCount) * 100;
-
-	return {
-		prices: sortPrices(prices, selectedCountries),
-		percentChecked: percentChecked.toFixed(2),
-		load,
-		state,
-	};
-};

manifest.json

@@ -1,8 +1,9 @@
 {
   "name": "Kobo Price",
   "description": "Find lowest book price on kobo.com",
-  "version": "1.3.0",
+  "version": "1.1.1",
   "manifest_version": 3,
+  "permissions": ["activeTab"],
   "content_scripts": [
     {
       "js": ["dist/index.js"],
@@ -17,12 +18,5 @@
     "gecko": {
       "id": "koboprice@tertyshny.dev"
     }
-  },
-  "icons": {
-    "16": "icons/16.png",
-    "32": "icons/32.png",
-    "48": "icons/48.png",
-    "128": "icons/128.png"
   }
- 
 }

package-lock.json

@@ -10,8 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "currency.js": "^2.0.4",
-        "date-fns": "^3.6.0",
+        "date-fns": "^3.6.0"
-        "preact": "^10.22.1"
       },
       "devDependencies": {
         "@eslint/js": "^9.6.0",
@@ -4869,15 +4868,6 @@
       "integrity": "sha512-cHjPPsE+vhj/tnhCy/wiMh3M3z3h/j15zHQX+S9GkTBgqJuTuJzYJ4gUyACLhDaJ7kk9ba9iRDmbH2tJU03OiA==",
       "dev": true
     },
-    "node_modules/preact": {
-      "version": "10.22.1",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.22.1.tgz",
-      "integrity": "sha512-jRYbDDgMpIb5LHq3hkI0bbl+l/TQ9UnkdQ0ww+lp+4MMOdqaUYdFc5qeyP+IV8FAd/2Em7drVPeKdQxsiWCf/A==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/preact"
-      }
-    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",

package.json

@@ -7,13 +7,10 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "eslint --fix",
-    "bundle": "esbuild lib/index.js --bundle --minify --sourcemap --target=chrome58,firefox57,safari11 --outfile=dist/index.js",
+    "build": "esbuild lib/index.js --bundle --minify --sourcemap --target=chrome58,firefox57,safari11 --outfile=dist/index.js",
-    "watch-bundle": "npm run bundle -- --watch",
+    "watch-build": "npm run build -- --watch",
-    "watch-ext": "web-ext run --start-url https://www.kobo.com/ww/en/ebook/foundation-the-foundation-trilogy-book-1-1",
+    "watch-ext": "web-ext run --start-url kobo.com",
-    "watch": "concurrently npm:watch-bundle npm:watch-ext",
+    "watch": "concurrently npm:watch-build npm:watch-ext"
-    "build-userscript": "cat userscript/koboprice.meta.js dist/index.js > userscript/koboprice.user.js",
-    "build-ext": "web-ext build",
-    "build-all": "npm run bundle && npm run build-userscript && rm -rf web-ext-artifacts && npm run build-ext"
   },
   "author": "",
   "license": "ISC",
@@ -30,7 +27,6 @@
   },
   "dependencies": {
     "currency.js": "^2.0.4",
-    "date-fns": "^3.6.0",
+    "date-fns": "^3.6.0"
-    "preact": "^10.22.1"
   }
 }