Fixes after TimeChimp UI/API changes (#17)

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v1.8.2
+
+- Fix extension after changes in the TimeChimp HTML structure.
+
 ## v1.8.1
 
 - Add "Ouderschapsverlof" to leave tasks.

manifest.json

@@ -1,25 +1,27 @@
 {
   "name": "TimeChimp Billability Chart",
   "description": "Adds a billability chart on the TimeChimp hours page.",
-  "version": "1.8.1",
+  "version": "1.8.2",
   "manifest_version": 3,
   "permissions": [
-    "webRequest"
+    "webRequest",
+    "storage"
   ],
   "host_permissions": [
-    "*://app.timechimp.com/*"
+    "*://*.timechimp.com/*"
   ],
   "content_scripts": [
     {
       "matches": [
-        "https://app.timechimp.com/*"
+        "https://angular.timechimp.com/*"
       ],
       "js": [
         "build/content/index.js"
       ],
       "css": [
         "build/content/index.css"
-      ]
+      ],
+      "all_frames": true
     }
   ],
   "background": {
@@ -35,4 +37,3 @@
     }
   }
 }
-

src/TimeChimpApi.ts

@@ -1,7 +1,10 @@
 export class TimeChimpApi {
     private async doFetch<T>(path: string): Promise<T> {
-        const url = `https://app.timechimp.com${path}`;
-        const response = await fetch(url);
+        const response = await fetch(`https://web.timechimp.com${path}`, {
+            headers: {
+                Authorization: `Bearer ${this.getToken()}`,
+            },
+        });
         const body = await response.text();
 
         if (response.status >= 400) {
@@ -11,6 +14,24 @@ export class TimeChimpApi {
         return JSON.parse(body);
     }
 
+    private getToken(): string {
+        let token = window.localStorage.getItem('tc_auth_token');
+        if (!token) {
+            throw new Error('No token found in local storage');
+        }
+
+        // The token starts and ends with a double quote, remove that.
+        // Though also account for the fact that this could change.
+        if (token.startsWith('"')) {
+            token = token.substring(1);
+        }
+        if (token.endsWith('"')) {
+            token = token.substring(0, token.length - 1);
+        }
+
+        return token;
+    }
+
     public getCurrentUser(): Promise<User> {
         return this.doFetch('/api/user/current');
     }

src/background/timechimp.ts

@@ -1,5 +1,22 @@
 import { Message } from '../message';
 
+const API_URL = 'https://web.timechimp.com';
+
+/**
+ * The time registration form is an iframe in the webpage,
+ * so we need to wait for that to load, and store the frame id per tab.
+ * While unlikely, it is possible that someone has multiple TimeChimp tabs open.
+ */
+const frameByTab: Record<number, number> = {};
+chrome.webRequest.onCompleted.addListener(
+    (details) => {
+        if (details.type === 'sub_frame') {
+            frameByTab[details.tabId] = details.frameId;
+        }
+    },
+    { urls: ['https://angular.timechimp.com/*'] },
+);
+
 /**
  * Detects that the week has changed and the billability should be recalculated, on basis of requests to TimeChimp.
  */
@@ -20,7 +37,7 @@ chrome.webRequest.onCompleted.addListener(
     },
     {
         // Limit to requests that indicate a week change
-        urls: ['https://app.timechimp.com/api/time/week/*'],
+        urls: [`${API_URL}/api/time/week/*`],
     },
 );
 
@@ -31,16 +48,16 @@ chrome.webRequest.onCompleted.addListener(
     (request) => sendMessage(request.tabId, { type: 'refresh' }),
     {
         urls: [
-            'https://app.timechimp.com/api/time',
-            'https://app.timechimp.com/api/time/put',
-            'https://app.timechimp.com/api/time/delete?*',
+            `${API_URL}/api/time`,
+            `${API_URL}/api/time/put`,
+            `${API_URL}/api/time/delete?*`,
         ],
     },
 );
 
 async function sendMessage(tabId: number, msg: Message) {
     await chrome.tabs
-        .sendMessage(tabId, msg)
+        .sendMessage(tabId, msg, { frameId: frameByTab[tabId] })
         .catch(() =>
             console.debug(
                 'Failed to send message to tab, content script is likely not loaded yet.',