WIP: Make API request from service worker

clients/apps/chrome-extension/extension/manifest.json

@@ -16,6 +16,7 @@
             ]
         },
         {
+            "run_at": "document_end",
             "js": ["auth.js"],
             "matches": [
                 "*://dashboard.polar.sh/dashboard/settings/extension",

clients/apps/chrome-extension/package.json

@@ -20,7 +20,7 @@
     "build": "npm run build:js && npm run build:css",
     "build:prod": "API_URL=https://api.polar.sh WEB_URL=https://dashboard.polar.sh npm run build",
     "build:css": "tailwindcss -i ./src/index.css -o ./extension/index.css",
-    "build:js": "webpack --config webpack.config.js && mv dist/content.js ./extension && mv dist/auth.js ./extension",
+    "build:js": "webpack --config webpack.config.js && mv dist/content.js ./extension && mv dist/auth.js ./extension && mv dist/service-worker.js ./extension",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

clients/apps/chrome-extension/src/auth.ts

@@ -1,7 +1,10 @@
+console.log('AUTH CONTENT SCRIPT')
 window.addEventListener('load', function () {
   const interval = setInterval(async function () {
+    console.log('LOOKING FOR TOKEN')
     const tokenElem = document.getElementById('polar-token')
     if (tokenElem && tokenElem.innerText) {
+      console.log('FOUND IT')
       clearInterval(interval)
       await chrome.storage.local.set({ token: tokenElem.innerText })
       window.close()

clients/apps/chrome-extension/src/index.tsx

@@ -1,7 +1,6 @@
-import { Platforms } from 'polarkit/api/client'
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import api, { isAuthenticated } from './api'
+import { isAuthenticated } from './api'
 import AuthorizationBanner from './components/AuthorizationBanner'
 import CachedIssueListItemDecoration from './components/CachedIssueListItemDecoration'
 import './index.css'
@@ -20,34 +19,13 @@ const getIssueNumbers = (issues: NodeListOf<Element>) => {
   return issueNumbers
 }
 
-const apiRequestDecoration = (issueNumbers: string[]) => {
-  api.extension
-    .listIssuesForExtension({
-      platform: Platforms.GITHUB,
-      orgName,
-      repoName,
-      numbers: issueNumbers.join(','),
-    })
-    .then((extensionIssues) => {
-      // Add all the issues to chrome.storage
-      const itemsToAdd = {}
-      extensionIssues.forEach((issue) => {
-        itemsToAdd[`issues/${orgName}/${repoName}/${issue.number}`] = issue
-      })
-      chrome.storage.local.set(itemsToAdd)
-
-      // Remove the issues we asked for but didn't get a response for from the cache
-      const keysToRemove = issueNumbers.filter(
-        (issueNumber) =>
-          !extensionIssues.some(
-            (extensionIssue) =>
-              extensionIssue.number.toString() === issueNumber,
-          ),
-      )
-      chrome.storage.local.remove(
-        keysToRemove.map((k) => `issues/${orgName}/${repoName}/${k}`),
-      )
-    })
+const requestDecoration = (issueNumbers: string[]) => {
+  return chrome.runtime.sendMessage({
+    type: 'decorate-issues',
+    orgName,
+    repoName,
+    issueNumbers,
+  })
 }
 
 const mountDecoration = (issues: NodeListOf<Element>) => {
@@ -89,7 +67,7 @@ const decorateIssues = () => {
   const issues = findIssueNodes(document)
   if (issues.length > 0) {
     const issueNumbers = getIssueNumbers(issues)
-    apiRequestDecoration(issueNumbers)
+    requestDecoration(issueNumbers)
     mountDecoration(issues)
   }
 
@@ -106,7 +84,7 @@ const decorateIssues = () => {
               const issues = findIssueNodes(element)
               if (issues.length > 0) {
                 const issueNumbers = getIssueNumbers(issues)
-                apiRequestDecoration(issueNumbers)
+                requestDecoration(issueNumbers)
                 mountDecoration(issues)
               }
             }

clients/apps/chrome-extension/src/service-worker.ts

@@ -0,0 +1,43 @@
+import { Platforms } from 'polarkit/api/client'
+import api from './api'
+
+const apiRequestDecoration = async (
+  orgName: string,
+  repoName: string,
+  issueNumbers: string[],
+) => {
+  const extensionIssues = await api.extension.listIssuesForExtension({
+    platform: Platforms.GITHUB,
+    orgName,
+    repoName,
+    numbers: issueNumbers.join(','),
+  })
+
+  // Add all the issues to chrome.storage
+  const itemsToAdd = {}
+  extensionIssues.forEach((issue) => {
+    itemsToAdd[`issues/${orgName}/${repoName}/${issue.number}`] = issue
+  })
+  chrome.storage.local.set(itemsToAdd)
+
+  // Remove the issues we asked for but didn't get a response for from the cache
+  const keysToRemove = issueNumbers.filter(
+    (issueNumber) =>
+      !extensionIssues.some(
+        (extensionIssue) => extensionIssue.number.toString() === issueNumber,
+      ),
+  )
+  chrome.storage.local.remove(
+    keysToRemove.map((k) => `issues/${orgName}/${repoName}/${k}`),
+  )
+}
+
+chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
+  const { type, orgName, repoName, issueNumbers } = message
+  if (type === 'decorate-issues') {
+    await apiRequestDecoration(orgName, repoName, issueNumbers)
+    return true
+  }
+})
+
+export {}

clients/apps/chrome-extension/webpack.config.js

@@ -4,6 +4,7 @@ module.exports = {
   entry: {
     content: "./src/index.tsx",
     auth: "./src/auth.ts",
+    "service-worker": "./src/service-worker.ts",
   },
   mode: "production",
   module: {