Load content script in iframe, working again

manifest.json

@@ -13,14 +13,15 @@
   "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": {

src/TimeChimpApi.ts

@@ -1,12 +1,6 @@
-import { getTokenFromStorage } from './content/storage';
-
 export class TimeChimpApi {
     private async doFetch<T>(path: string): Promise<T> {
-        const token = getTokenFromStorage();
-        if (!token) {
-            throw new Error('No token found in local storage');
-        }
-
+        const token = this.getToken();
         const url = `https://web.timechimp.com${path}`;
         const response = await fetch(url, {
             headers: {
@@ -22,6 +16,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,20 @@
 import { Message } from '../message';
 
+/**
+ * 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.
  */
@@ -40,7 +55,7 @@ chrome.webRequest.onCompleted.addListener(
 
 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.',