Restore link highlight

markasread/background.js

@@ -1,4 +1,6 @@
-chrome.runtime.onInstalled.addListener(function(details) {
+import { tcDefaults } from "./defaults.js"
+
+chrome.runtime.onInstalled.addListener(function() {
     fetchMarkData();
 })
 
@@ -35,9 +37,10 @@ chrome.tabs.onActivated.addListener(async function callback() {
     } else {
         await markAsVisited(tabs[0].id);
     }
+    await changeLinkColor(tabs[0])
 });
 
-chrome.tabs.onUpdated.addListener(async function callback() {
+chrome.tabs.onUpdated.addListener(async function callback(activeInfo, info) {
         // console.log("onUpdated");
 
     const tabs = await chrome.tabs.query({active: true, currentWindow: true})
@@ -46,6 +49,17 @@ chrome.tabs.onUpdated.addListener(async function callback() {
     } else {
         await markAsVisited(tabs[0].id);
     }
+    if (info.status === 'complete') {
+        await changeLinkColor(tabs[0]);
+        chrome.tabs.sendMessage(
+            tabs[0].id, 
+            { 
+                action: "start_mutation_observer",
+                tabId: tabs[0].id
+            }
+        )
+
+    }
 });
 
 chrome.commands.onCommand.addListener(async function() {
@@ -90,7 +104,7 @@ function markAsVisited(atabId) {
     return chrome.action.setIcon({ path: "visited.png", tabId: atabId });
 }
 
-chrome.runtime.onMessage.addListener(async function(msg) {
+chrome.runtime.onMessage.addListener(async function(msg, sender, sendResponse) {
     if (msg.action === 'import') {
         var data = msg.data;
 
@@ -103,7 +117,16 @@ chrome.runtime.onMessage.addListener(async function(msg) {
                 }
             }
         }
+    } else if (msg.action === 'process_post_load_elements') {
+        const visited = []
+        for(const link of msg.links) {
+            if (await markedAsRead(link)) {
+                visited.push(link)
+            }
+        }
+        chrome.tabs.sendMessage(sender.tab.id, {action: "change_link_color", links: visited, linkColor: "red"})
     }
+    sendResponse()
 });
 
 async function removeUrl(url) {
@@ -156,4 +179,45 @@ async function addUrl(url) {
 
 function getKey(url) {
     return new URL(url).origin;
+}
+
+async function changeLinkColor(tab) {
+	const storage = await chrome.storage.local.get(tcDefaults)
+	const visitedObj = await fetchMarkData()
+	const visited = visitedObj["visited"]
+    if(storage.changeLinkColor) {
+        if(containsSite(storage.sites, tab.url)) {
+            // Retrieves links from DOM
+            const links = await chrome.tabs.sendMessage(
+                tab.id, 
+                { action: "get_links" }
+            );  
+            // Finds visited links
+            const visitedLinks = links.filter(link => isVisited(link, visited))
+            // Sends list of visited links to content script to update the color.
+            chrome.tabs.sendMessage(
+                tab.id, 
+                { 
+                    action: "change_link_color", 
+                    links: visitedLinks,
+                    linkColor: storage.linkColor
+                }
+            )
+        }
+    }
+}
+
+function isVisited(url, visited) {
+	if(url) {
+		var key = getKey(url);
+		if(visited?.[key]) {
+			var path = url.replace(key, '');
+			return visited[key].includes(path);
+		}		
+	}
+	return false;
+}
+
+function containsSite(sites, url) {
+	return sites.split("\n").filter(site => url.includes(site)).length;
 }

markasread/content-scripts/changeLinkColor.js

@@ -0,0 +1,38 @@
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+    if (message.action == "get_links") {
+        let links = document.querySelectorAll('a');
+        links = Array.from(links).map(link => link.href)
+        sendResponse(links)
+    } else if (message.action == "change_link_color") {
+        let linkElements = document.querySelectorAll('a');
+        changeLinkColor(message.links, linkElements, message.linkColor)
+        sendResponse()
+    } else if (message.action == "start_mutation_observer") {
+        observer.observe(
+            document, 
+            {
+                subtree: true, childList: true 
+            }
+        );
+        sendResponse()
+    }
+});
+
+function changeLinkColor(linksToMatch, linkElementsToSearch, linkColor) {
+    const linksSet = new Set(linksToMatch)
+    linkElementsToSearch.forEach(linkElement => {
+        if (linksSet.has(linkElement.href)) {
+            linkElement.style.color = linkColor
+            // Occasionally the text is in the anchor element's children
+            linkElement.querySelectorAll("*").forEach(el => el.style.color = linkColor)
+        }
+    })
+}
+
+var observer = new MutationObserver(function(mutations) {
+    const linkElements = mutations.flatMap(mutation => Array.from(mutation.addedNodes))
+                                    .filter(node => node.nodeType == Node.ELEMENT_NODE)
+                                    .flatMap(node => Array.from(node.querySelectorAll('a')))
+    const links = linkElements.map(node => node.href)
+    chrome.runtime.sendMessage({ links: links, action: "process_post_load_elements" }) 
+});

markasread/defaults.js

@@ -0,0 +1,5 @@
+export var tcDefaults = {
+    changeLinkColor: false,
+    linkColor: 'blue',
+    sites: `https://github.com`	
+};

markasread/manifest.json

@@ -10,8 +10,9 @@
             "16": "icon_16.png"
         }
     },
-    "background": {
-        "service_worker": "background.js"
+    "background": { 
+        "service_worker":  "background.js",
+         "type": "module" 
     },
     "commands": {
         "mark_page": {
@@ -31,7 +32,18 @@
         "tabs",
         "storage",
         "downloads",
-        "unlimitedStorage"
+        "unlimitedStorage",
+        "scripting"
     ],
+    "host_permissions": [
+        "http://*/", 
+        "https://*/"
+    ],
+    "content_scripts": [{
+        "matches": ["*://*/*"],
+        "js": [
+            "content-scripts/changeLinkColor.js"
+        ]
+      }],
     "options_page": "options.html"
 }

markasread/options.html

@@ -3,10 +3,35 @@
 	<head>
 		<title>Mark As Read</title>
 		<link rel="stylesheet" type="text/css" href="options.css">
-		<script src="options.js"></script>
+		<script type="module" src="options.js"></script>
 	</head>
 	<body>
 		<h1>Mark As Read</h1>
+        <section>
+			<h3>Change Color of Visited Links</h3>
+			<div class="row">
+				<label for="changeLinkColor">Enabled</label>
+				<input id="changeLinkColor" type="checkbox" />
+			</div>
+			<div class="row">
+				<label for="linkColor">Link Color</label>
+				<input id="linkColor" type="text" placeholder="red, yellow, magenta..." size="20"/>
+				<label type="text" size="20">(default = blue)</label>
+			</div>
+			<div class="row">
+				<label for="sites"
+					>Sites on which extension is enabled<br />
+					(one per line)<br />
+					<br />
+				</label>
+				<textarea id="sites" rows="10" cols="50" placeholder="https://github.com"></textarea>
+				<br />
+				<button id="save">Save</button>
+				<button id="restore">Restore Defaults</button>
+			</div>
+			<div id="status"></div>
+		</section>
+		<hr />
 		<section>
 			<h3>Backup</h3>
 			<button id="download">Export</button>

markasread/options.js

@@ -1,3 +1,5 @@
+import { tcDefaults } from "./defaults.js"
+
 function download() {
     chrome.storage.local.get("visited", function(obj) {
         var result = JSON.stringify(obj["visited"], null, 4); 
@@ -28,9 +30,57 @@ function clearData() {
     chrome.storage.local.clear();
 }
 
+
+async function saveOptions() {
+	var changeLinkColor = document.getElementById("changeLinkColor").checked;
+	var linkColor = document.getElementById("linkColor").value;
+	var sites = document.getElementById("sites").value;
+
+	await chrome.storage.local.remove([
+		"changeLinkColor",
+		"linkColor",
+		"sites"
+	]);
+	await chrome.storage.local.set(
+		{
+			changeLinkColor: changeLinkColor || tcDefaults.changeLinkColor,
+			linkColor: linkColor || tcDefaults.linkColor,
+			sites: sites || tcDefaults.sites
+		}
+    )
+    // Update status to let user know options were saved.
+    var status = document.getElementById("status");
+    status.textContent = "Options saved";
+    setTimeout(function() {
+        status.textContent = "";
+    }, 1000);
+}
+
+async function restoreDefaults() {
+	await chrome.storage.local.set(tcDefaults)
+    await restoreOptions();
+    // Update status to let user know options were saved.
+    var status = document.getElementById("status");
+    status.textContent = "Default options restored";
+    setTimeout(function() {
+        status.textContent = "";
+    }, 1000);
+}
+
+function restoreOptions() {
+	return chrome.storage.local.get(tcDefaults).then(storage => {
+		document.getElementById("changeLinkColor").checked = storage.changeLinkColor != tcDefaults.changeLinkColor ? storage.changeLinkColor : false;
+		document.getElementById("linkColor").value = storage.linkColor != tcDefaults.linkColor ? storage.linkColor : "";
+		document.getElementById("sites").value = storage.sites != tcDefaults.sites ? storage.sites : "";
+	});
+}
+
 document.addEventListener('DOMContentLoaded', function() {
     document.getElementById("download").addEventListener("click", download);
     document.getElementById('upload').addEventListener("change", upload, false);
     document.getElementById("import").addEventListener('click', openDialog);
     document.getElementById("clear").addEventListener('click', clearData)
+    document.getElementById("save").addEventListener("click", saveOptions);
+	document.getElementById("restore").addEventListener("click", restoreDefaults);
+	restoreOptions();
 }, false);