Fixed issue where content script was not loading on link clicks

package.json

@@ -43,6 +43,7 @@
 		"@parcel/config-webextension": "^2.13.0",
 		"@parcel/resolver-default": "^2.13.0",
 		"@parcel/transformer-typescript-tsc": "^2.13.0",
+		"@types/chrome": "^0.0.283",
 		"@types/webextension-polyfill": "^0.12.1",
 		"npm-run-all2": "^7.0.1",
 		"parcel": "^2.13.0",
@@ -51,6 +52,7 @@
 		"stylelint-config-prettier": "^9.0.5",
 		"stylelint-config-xo": "^1.0.2",
 		"typescript": "^5.4.2",
+		"webextension-manifest": "^1.0.0",
 		"xo": "^0.59.3"
 	},
 	"@parcel/resolver-default": {

source/background.ts

@@ -0,0 +1,43 @@
+import type Manifest from 'webextension-manifest';
+// eslint-disable-next-line import/no-unassigned-import
+import './options-storage.js';
+
+const perTabIdLastUrl = {};
+
+// This is needed because github is doing some slippery things where the content script
+// isn't loaded on link clicks due to SPA. This code listens to those sort of
+// navigations and runs the content script once per url per tab
+chrome.webNavigation.onHistoryStateUpdated.addListener(
+	(details: chrome.webNavigation.WebNavigationTransitionCallbackDetails) => {
+		console.log(
+			`Detected navigation in SPA on tab ${details.tabId} for url ${details.url}`,
+		);
+		if (
+			details.tabId in perTabIdLastUrl &&
+			perTabIdLastUrl[details.tabId] === details.url
+		) {
+			console.log('doing nothing since this is an extra event');
+			return;
+		}
+
+		perTabIdLastUrl[details.tabId] = details.url;
+
+		fetch('./manifest.json')
+			.then(async (response) => response.json())
+			.then((manifest: Manifest) => {
+				const hashedJsFile = manifest.content_scripts[0].js[0];
+
+				chrome.scripting
+					.executeScript({
+						target: {tabId: details.tabId},
+						files: [hashedJsFile],
+					})
+					.catch((error: unknown) => {
+						console.error(error);
+					});
+			})
+			.catch((error: unknown) => {
+				console.error(error);
+			});
+	},
+);

source/content.ts

@@ -6,6 +6,7 @@ import {renderInDiv} from './render.js';
 console.log('💈 Content script loaded for', browser.runtime.getManifest().name);
 
 const urlRegexp = /github\.com\/([\w-.]+)\/([\w-.]+)\/pull\/(\d+)/g;
+const chainlinkAddedId = 'chainlink-added';
 
 async function init() {
 	const options = await optionsStorage.getAll();
@@ -48,6 +49,7 @@ function findAndRender(data: Results) {
 	}
 
 	const resultDiv = document.createElement('div');
+	resultDiv.id = chainlinkAddedId;
 	parentDiv.append(resultDiv);
 
 	renderInDiv(resultDiv, data);

source/manifest.json

@@ -19,7 +19,7 @@
 		"128": "images/icon-128.png"
 	},
 	"permissions": [
-		"storage"
+		"storage", "webNavigation", "scripting"
 	],
 	"host_permissions": [
 		"https://github.com/*"
@@ -36,8 +36,8 @@
 		"page": "options.html"
 	},
 	"background": {
-		"service_worker": "background.js",
+		"service_worker": "background.ts",
 		"type": "module",
-		"scripts": [ "background.js" ]
+		"scripts": [ "background.ts" ]
 	}
 }