Merge pull request #4 from Nullifiers/improvements

Improvements

Author: rajatgoyal715

CHANGELOG.md

@@ -0,0 +1,9 @@
+# 0.0.2
+ - Detect number after decimal places
+ - Detect formatted price (ex. $ 1,000,000)
+ - Format price after converting
+ - add new currency (EURO)
+ - Extension works when the extension icon is clicked
+
+# 0.0.1
+- Initial version

src/js/background.js

@@ -0,0 +1,7 @@
+chrome.browserAction.onClicked.addListener((tab) => {
+	chrome.tabs.executeScript(tab.id, {
+		runAt: 'document_end',
+		allFrames: true,
+		file: 'js/contentScript.js',
+	});
+});

src/js/contentScript.js

@@ -1,11 +1,45 @@
 (function() {
-	console.log('content script loaded');
-	
-	const usdRegex = /\$( ?[0-9]+)/g;
-	const usdToRupeeRatio = 69.58;
-
-	document.body.innerHTML = document.body.innerHTML.replace(usdRegex, (_, val) => {
-		const numval = Number(val);
-		return Number.isNaN(numval) ? `$ ${val}` : `₹ ${usdToRupeeRatio * numval}`;
+	function replace($node, regex, replaceMethod) {
+		const queue = [$node];
+		while (queue.length) {
+			let top = queue.shift();
+			if (top.childNodes.length) {
+				queue.push(...top.childNodes);
+				continue;
+			}
+
+			// If a text node is only child then replace currency using innerHTML
+			if (top.nodeType === Node.TEXT_NODE && top.parentElement.childNodes.length === 1) {
+				top = top.parentElement;
+			}
+
+			if (top.nodeType === Node.ELEMENT_NODE && regex.test(top.innerHTML)) {
+				top.innerHTML = top.innerHTML.replace(regex, replaceMethod.bind(top));
+			}
+			else if (top.nodeType === Node.TEXT_NODE && regex.test(top.nodeValue)) {
+				top.nodeValue = top.nodeValue.replace(regex, replaceMethod.bind(top));
+			}
+		}
+	}
+
+	const toRupeeRatio = {
+		'$': 69.58,
+		'€': 77.82,
+	};
+	const currencySymbols = ['\\$', '€'];
+	const currencyRegex = new RegExp(`(${currencySymbols.join('|')})\\s?(\\d+(?:,\\d{2,3})*(?:\\.\\d+)?)`, 'g');
+
+	const INR = new Intl.NumberFormat('en-IN', {style: 'currency', currency: 'INR'});
+
+	const spanStyle = 'background: rgba(220, 220, 220, 0.7); color: #333; padding: 2px 5px; border-radius: 3px';
+	const format = price => `<span style="${spanStyle}">${INR.format(price)}</span>`;
+
+	replace(document.body, currencyRegex, function (_, currency, val) {
+		const numval = Number(val.replace(/,/g, ''));
+		if (Number.isNaN(numval)) return `${currency} ${val}`;
+
+		return this.nodeType === Node.ELEMENT_NODE ?
+			format(toRupeeRatio[currency] * numval) :
+			INR.format(toRupeeRatio[currency] * numval);
 	});
 })();

src/manifest.json

@@ -1,13 +1,12 @@
 {
 	"manifest_version": 2,
 	"name": "Realtime Currency Converter",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"description": "Browser Extenstion to convert foreign currency to local currency, realtime.",
-	"content_scripts": [{
-		"matches": ["<all_urls>"],
-		"all_frames": true,
-		"js": ["js/contentScript.js"],
-		"run_at": "document_end"
-	}],
+	"browser_action": {},
+	"background": {
+		"scripts": ["js/background.js"],
+		"persistent": false
+	},
 	"permissions": ["activeTab", "storage"]
 }