feat: enable webextension builds

Currently only supports Chrome due to no `chrome` -> `browser` polyfill

src/background/background.ts

@@ -0,0 +1,111 @@
+chrome.runtime.onMessage.addListener(
+  function(request, sender, sendResponse) {
+    if (request.contentScriptQuery == "queryExchangeRates") {
+      const url = "https://open.er-api.com/v6/latest/USD";
+      fetch(url)
+          .then(response => {
+            console.log(response)
+            return response.json()
+          })
+          .then(json => {
+            sendResponse(json)
+          })
+          .catch(error => {
+            console.error("Failed to get exchange rates", error);
+          })
+      return true;
+    }
+})
+
+chrome.runtime.onMessage.addListener(
+  function(request, sender, sendResponse) {
+    if (request.contentScriptQuery == "querySchema") {
+      const url = "https://raw.githubusercontent.com/danocmx/node-tf2-static-schema/master/static/items.json";
+      fetch(url)
+          .then(response => response.json())
+          .then(json => sendResponse(json))
+          .catch(error => {
+            console.error("Failed to get schema", error);
+          })
+      return true;
+    }
+  }
+);
+
+chrome.runtime.onMessage.addListener(
+  function(request, sender, sendResponse) {
+    if (request.contentScriptQuery == "getPricesTFToken") {
+      fetch('https://api2.prices.tf/auth/access', {
+        method: 'post',
+        headers: new Headers({
+          'Accept': 'application/json'
+        })
+      })
+      .then(response => response.json())
+      .then(json => sendResponse(json['accessToken']))
+      .catch(error => {
+        console.error("Failed to get access token", error);
+      })
+      return true;
+    }
+  }
+)
+
+class PricesResponse {
+  keys: number
+  metal: number
+}
+
+async function priceUsingPricesTF(token: string, sku: string, retries: number = 3): Promise<PricesResponse> {
+  const url = `https://api2.prices.tf/prices/${encodeURIComponent(sku)}`;
+  const response = await fetch(url, {
+    method: 'get',
+    headers: {
+      'Accept': 'application/json',
+      'Authorization': `Bearer ${token}`,
+    }
+  })
+  if (response.status === 404 && sku.includes(';') && !sku.includes(';uncraftable')) {
+    const quality: number = parseInt(sku.split(';')[1], 10);
+    if(quality === 6) {
+      // Try uncraftable variant if unique weapon
+      return priceUsingPricesTF(token, sku + ';uncraftable');
+    }
+  }
+  if(response.status === 503) {
+    // Happens if we send too many requests in a short period of time
+    // Retry after a few seconds
+    if(retries >= 0) {
+      console.log(`Cloudflare rate limit exceeded, trying again after 1 second, ${retries} retries left`)
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      return priceUsingPricesTF(token, sku, retries - 1);
+    } else {
+      throw new Error(`Cloudflare rate limit exceeded, stopping`)
+    }
+  }
+  const data = await response.json();
+  const prices = new PricesResponse();
+  prices.keys = data['sellKeys']
+  prices.metal = data['sellHalfScrap'] / 18.0;
+  return prices;
+}
+
+chrome.runtime.onMessage.addListener(
+  function(request, sender, sendResponse) {
+    if (request.contentScriptQuery == "priceSKU") {
+      const sku: string = request.sku
+      const service: string = request.service
+      const token: string = request.token
+      switch (service) {
+        case "prices.tf": {
+          priceUsingPricesTF(token, sku).then((response) => {
+            sendResponse(JSON.stringify(response));
+          })
+          return true;
+        }
+        default:
+          return false;
+      }
+    }
+  }
+);

src/content/content.ts

@@ -1,4 +1,5 @@
-import styleCss from './style.css'
+declare const __ENV_WEBEXTENSION: boolean;
+declare const __ENV_USERSCRIPT: boolean;
 
 import { logDebug, log, logError } from './utils/log'
 import { getPricesToken } from './pricing/pricestf'
@@ -417,7 +418,8 @@ async function inject() {
 }
 
 function addStyles() {
-	const head = document.head || document.getElementsByTagName('head')[0],
+	if(__ENV_USERSCRIPT) {
+		const head = document.head || document.getElementsByTagName('head')[0],
 		style = document.createElement('style');
 	head.appendChild(style);
 	style.innerHTML = styleCss;

src/content/exchangeRateService.ts

@@ -1,8 +1,9 @@
 import { getStorageValue, setStorageValue } from './storage'
 import { logDebug, log, logError } from './utils/log'
 import { storage_exchangerates, storage_exchangerates_next, storage_exchangerates_update } from './config'
-declare function GM_fetch(input: string | URL | globalThis.Request, init?: RequestInit): Promise<Response>
-import './GM_fetch'
+import { fetchWrap } from './fetchWrap';
+declare const __ENV_WEBEXTENSION: boolean;
+declare const __ENV_USERSCRIPT: boolean;
 
 export interface ExchangeRates {
   [key: string]: number;
@@ -26,7 +27,7 @@ export async function prepareExchangeRates(): Promise<ExchangeRates> {
 		const lastUpdateTime = new Date(update);
 		const nextUpdateTime = new Date(nextUpdate);
 		log(`Exchange rates updated at ${lastUpdateTime}`);
-		if (rates == null || Object.keys(rates).length === 0 || lastUpdateTime.getTime() > nextUpdateTime.getTime()) {
+		if (rates == null || Object.keys(rates).length === 0 || Date.now() > nextUpdateTime.getTime()) {
 			needsUpdate = true
 		}
 	} else {
@@ -35,19 +36,35 @@ export async function prepareExchangeRates(): Promise<ExchangeRates> {
 
   if(needsUpdate) {
     log("Exchange rates out of Date. Rebuilding...");
-    const url = "https://open.er-api.com/v6/latest/USD"
-    const response = await GM_fetch(url);
-    if (response.ok) {
-      await setStorageValue(storage_exchangerates_update, new Date().toISOString())
-      const json = await response.json()
-      if(json != null){
-        rates = json['rates']
-        await setStorageValue(storage_exchangerates, rates)
-        await setStorageValue(storage_exchangerates_next, json['time_next_update_utc'])
+    let exchangeResponse: {
+      rates: ExchangeRates,
+      time_next_update_utc: string
+    }
+    if(__ENV_USERSCRIPT) {
+      const url = "https://open.er-api.com/v6/latest/USD"
+      try {
+        const response: Response = await fetchWrap(url)
+        if(response.ok) {
+          exchangeResponse = await response.json()
+        }
+      } catch (e) {
+        logDebug(e);
+        throw e;
       }
-			logDebug(`Exchange rates updated at ${new Date()}`)
     } else {
-      logError(`Failed to fetch exchange rates. Status code: ${response.status}`, response)
+      exchangeResponse = await chrome.runtime.sendMessage({contentScriptQuery: "queryExchangeRates"})
+    }
+    try {
+      if(exchangeResponse == null) {
+        throw new Error("Rates are null")
+      }
+      rates = exchangeResponse.rates
+      await setStorageValue(storage_exchangerates_update, new Date().toISOString())
+      await setStorageValue(storage_exchangerates, exchangeResponse.rates)
+      await setStorageValue(storage_exchangerates_next, exchangeResponse.time_next_update_utc)
+			logDebug(`Exchange rates updated at ${new Date()}`)
+    } catch(e) {
+      logError(`Failed to store exchange rates.`, e)
     }
   }
 

src/content/fetchWrap.ts

@@ -0,0 +1,10 @@
+declare let __ENV_USERSCRIPT: boolean;
+declare function GM_fetch(input: string | URL | globalThis.Request, init?: RequestInit): Promise<Response>
+
+export function fetchWrap(input: string | URL | globalThis.Request, init?: RequestInit): Promise<Response> {
+  if(__ENV_USERSCRIPT) {
+    return GM_fetch(input, init)
+  } else {
+    return fetch(input, init)
+  }
+}

src/content/priceService.ts

@@ -2,6 +2,8 @@ import { defindex_key, storage_priceprefix } from "./config"
 import { priceUsingPricesTF } from "./pricing/pricestf"
 import { getStorageValue, setStorageValue } from "./storage"
 import { logDebug } from "./utils/log"
+declare const __ENV_WEBEXTENSION: boolean;
+declare const __ENV_USERSCRIPT: boolean;
 
 /** Pricing data for a given TF2 item. */
 export class ItemPriceData {
@@ -58,7 +60,12 @@ export async function fetchPrice(token: string, sku: string, update: Date = new
 			data.ttl = ttl
 
 			try {
-				const response = await priceUsingPricesTF(token, sku)
+				let response: PricesResponse
+				if(__ENV_USERSCRIPT) {
+					response = await priceUsingPricesTF(token, sku)
+				} else {
+					response = JSON.parse(await chrome.runtime.sendMessage({contentScriptQuery: "priceSKU", service: "prices.tf", sku: sku, token: token}));
+				}
 				if (response) {
 					data.keys = response.keys
 					data.metal = response.metal

src/content/pricing/pricestf.ts

@@ -1,10 +1,12 @@
-declare function GM_fetch(input: string | URL | globalThis.Request, init?: RequestInit): Promise<Response>
-import '../GM_fetch'
+import { fetchWrap } from '../fetchWrap'
 import { logDebug, logError } from '../utils/log'
+declare const __ENV_WEBEXTENSION: boolean;
+declare const __ENV_USERSCRIPT: boolean;
 
 async function getPricesToken(): Promise<string> {
+  if(__ENV_USERSCRIPT) {
   return new Promise<string>((resolve, reject) => {
-    GM_fetch('https://api2.prices.tf/auth/access', {
+    fetchWrap('https://api2.prices.tf/auth/access', {
       method: 'post',
       headers: new Headers({
         'Accept': 'application/json'
@@ -18,6 +20,9 @@ async function getPricesToken(): Promise<string> {
       })
       .then((responseData) => resolve(responseData['accessToken']))
   })
+  } else {
+    return chrome.runtime.sendMessage({contentScriptQuery: 'getPricesTFToken'})
+  }
 }
 
 class PricesResponse {
@@ -43,7 +48,7 @@ async function priceUsingPricesTF(token: string, sku: string, retries: number =
   // https://api2.prices.tf/prices/${sku}
   // Authorization: Bearer ${token}
   try {
-    const response = await GM_fetch(`https://api2.prices.tf/prices/${encodeURIComponent(sku)}`, {
+    const response = await fetchWrap(`https://api2.prices.tf/prices/${encodeURIComponent(sku)}`, {
       method: 'get',
       headers: {
         'Accept': 'application/json',

src/content/schemaService.ts

@@ -1,10 +1,11 @@
+declare const __ENV_WEBEXTENSION: boolean;
+declare const __ENV_USERSCRIPT: boolean;
 import { getStorageValue, setStorageValue } from './storage'
 import { logDebug, log, logError } from './utils/log'
 import './config'
-declare function GM_fetch(input: string | URL | globalThis.Request, init?: RequestInit): Promise<Response>
-import './GM_fetch'
 import { storage_version, storage_schema, storage_lastUpdateTime } from './config'
 import Australiums from '../resources/australiums.json'
+import { fetchWrap } from './fetchWrap'
 const semver = require('semver')
 
 export function checkAustraliumVariant(defindex: number): boolean {
@@ -162,7 +163,7 @@ export async function prepareSchema(): Promise<ItemSchema> {
 
 	const storedVersion: string | null = await getStorageValue(storage_version, null)
 	if(!storedVersion || !semver.valid(storedVersion)) {
-		log(`Cache is from an unknown version of the extension. Updating for version ${__VERSION__}`);
+		log(`Preparing the extension for the first time.`);
 		needsUpdate = true
 	} else if(semver.valid(storedVersion) && semver.lt(storedVersion, __VERSION__)) {
 		log(`Cache is from a previous version (${storedVersion}) of the extension. Updating for version ${__VERSION__}`);
@@ -183,15 +184,22 @@ export async function prepareSchema(): Promise<ItemSchema> {
 
 	if(needsUpdate) {
 		log("Item Schema out of Date. Rebuilding...");
-		const url = "https://raw.githubusercontent.com/danocmx/node-tf2-static-schema/master/static/items.json"
-		const response = await GM_fetch(url);
-		if (response.ok) {
+		try {
 			await setStorageValue(storage_lastUpdateTime, new Date().getTime());
 
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any
 			const cacheItems: any = {}
 
-			const responseItems: SchemaResponseItem[] = await response.json()
+			let responseItems: SchemaResponseItem[];
+			if(__ENV_USERSCRIPT) {
+				const url = "https://raw.githubusercontent.com/danocmx/node-tf2-static-schema/master/static/items.json"
+				const response = await fetchWrap(url);
+				if(response.ok) {
+					responseItems = await response.json();
+				}
+			} else {
+				responseItems = await chrome.runtime.sendMessage({contentScriptQuery: "querySchema"})
+			}
 			// We want to keep the keys `defindex`, `item_name`, and `attributes`
 			responseItems.forEach((item: SchemaResponseItem) => {
 				const defindex: number = item['defindex']
@@ -234,8 +242,8 @@ export async function prepareSchema(): Promise<ItemSchema> {
 			itemSchema = cacheItems
 			await setStorageValue(storage_version, __VERSION__);
 			logDebug(`Item schema updated at ${new Date()}`)
-		} else {
-			logError("Could not fetch item schema.");
+		} catch (e) {
+			logError("Could not fetch item schema.", e);
 		}
 	}
 	return itemSchema

src/content/storage.ts

@@ -6,7 +6,8 @@ function getStorageValue(name: string, defaultValue: string): Promise<any> {
 	if(__ENV_USERSCRIPT) {
 		return GM.getValue(name, defaultValue);
 	} else if(__ENV_WEBEXTENSION) {
-		return browser.storage.local.get(name);
+		return chrome.storage.local.get(name)
+			.then((result) => result[name])
 	} else {
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		return new Promise<any>((resolve) => {
@@ -19,7 +20,7 @@ function setStorageValue(name: string, value: unknown): Promise<void> {
 	if(__ENV_USERSCRIPT) {
 		return GM.setValue(name, value as GM.Value);
 	} else if(__ENV_WEBEXTENSION) {
-		return browser.storage.local.set({name, value});
+		return chrome.storage.local.set({[name]: value});
 	} else {
 		return new Promise<void>((_, reject) => {
 			reject();

src/manifest.json

@@ -4,14 +4,34 @@
   "author": EXTENSION_AUTHOR,
   "manifest_version": 3,
   "version": EXTENSION_VERSION,
+  "permissions": [
+    "storage",
+    "scripting"
+  ],
+  "host_permissions": [
+    "https://wiki.teamfortress.com/wiki/*",
+    "https://*.prices.tf/*",
+    "https://open.er-api.com/*"
+  ],
+  "web_accessible_resources": [
+    {
+      "resources": ["lib/style.css", "resources/*"],
+      "matches": ["https://wiki.teamfortress.com/*"]
+    }
+  ],
   "content_scripts": [
     {
       "matches": ["*://wiki.teamfortress.com/wiki/*"],
       "run_at": "document_start",
       "all_frames": true,
+      "css": ["lib/style.css"],
       "js": ["content/content.js"]
     }
   ],
+  "background": {
+    "service_worker": "background/background.js",
+    "type": "module"
+  },
   "icons": {
     "48": "icons/icon-48.png",
     "96": "icons/icon-96.png"