Enable extension to work on chrome-rendered PDFs (#50)

Author: sthielen

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mindstudio-chrome-extension",
-  "version": "0.7.11",
+  "version": "0.7.12",
   "engines": {
     "node": ">= 14.0.0",
     "npm": ">= 6.0.0"

src/content/launcher/index.ts

@@ -70,7 +70,7 @@ export class LauncherService {
 
     // Listen for requests for page data launch variables and respond to them
     // (only used when invoking new runs)
-    runtime.listen('remote/request_launch_variables', () => {
+    runtime.listen('remote/request_launch_variables', async () => {
       console.info(
         '[MindStudio][Launcher] Side panel requested launch variables',
       );
@@ -79,12 +79,24 @@ export class LauncherService {
       const fullText = page.getCleanTextContent();
       const metadata = page.getMetadataBundle();
 
+      // If it's a PDF, we need to rehost it and pass the rehosted path to the
+      // launch variables for extraction
+      let rehostedPdfPath: string | undefined = undefined;
+      if (
+        window.location.href.endsWith('.pdf') ||
+        document.querySelector('embed')?.type.includes('pdf')
+      ) {
+        console.info('Rehosting PDF for extraction');
+        rehostedPdfPath = await page.getRehostedPdfSecurePath();
+      }
+
       const launchVariables: LaunchVariables = {
         url: window.location.href,
         userSelection,
         rawHtml,
         fullText,
         metadata,
+        _rehostedPdfPath: rehostedPdfPath,
       };
 
       console.info(

src/shared/services/api.ts

@@ -74,6 +74,86 @@ class ApiClient {
       enabledSites: app.extensionSupportedSites,
     }));
   }
+
+  async getSignedUploadUrl(): Promise<{
+    fields: { [index: string]: string };
+    url: string;
+    path: string;
+  }> {
+    const organizationId = await storage.get('SELECTED_ORGANIZATION');
+    if (!organizationId) {
+      throw new Error();
+    }
+
+    const url = `${ApiUrl}/v1/cdn/upload-private`;
+    const headers = await this.getHeaders();
+
+    const request = await fetch(url, {
+      method: 'POST',
+      headers: {
+        ...Object.fromEntries(headers.entries()),
+        'X-Organization-Id': organizationId,
+      },
+      body: JSON.stringify({
+        extension: 'pdf',
+        appId: '_extensionTemp',
+      }),
+    });
+
+    if (!request.ok) {
+      throw new Error(`API request failed: ${request.statusText}`);
+    }
+
+    const response = await request.json();
+
+    return response;
+  }
+
+  uploadFile(
+    route: string,
+    file: FormData,
+    onProgress?: (progress: number) => void,
+  ) {
+    return new Promise((resolve, reject) => {
+      const req = new XMLHttpRequest();
+      req.open('post', route);
+
+      req.addEventListener(
+        'load',
+        () => {
+          if (req.status >= 200 && req.status <= 299) {
+            resolve(req.response);
+          } else {
+            reject();
+          }
+        },
+        false,
+      );
+
+      req.addEventListener(
+        'error',
+        () => {
+          reject();
+        },
+        false,
+      );
+
+      req.upload.addEventListener(
+        'progress',
+        (e) => {
+          try {
+            const { loaded, total } = e;
+            const progress = Math.floor((loaded / total) * 100) / 100;
+            onProgress?.(progress);
+          } catch {}
+        },
+        false,
+      );
+
+      // Send file
+      req.send(file);
+    });
+  }
 }
 
 export const api = ApiClient.getInstance();

src/shared/types/events.ts

@@ -83,6 +83,7 @@ export interface LaunchVariables {
   fullText: string;
   metadata: string;
   userSelection: string | null;
+  _rehostedPdfPath?: string;
 }
 
 export const getEmptyLaunchVariables = (): LaunchVariables => ({

src/shared/utils/page.ts

@@ -1,10 +1,36 @@
+import { api } from '../services/api';
 import { isMindStudioElement } from './dom';
 
 /**
  * Utilities for interacting with the current web page.
  * These utilities only work in the content script context.
  */
 export const page = {
+  /**
+   * The way chrome renders PDFs makes them impossible to grab content inside,
+   * because they're actually rendering in a separate private extension. So
+   * if the current page is a PDF, we call fetch('') on the current URL and get
+   * the PDF as a blob, upload it to MindStudio, and then pass that URL (in case
+   * the URL is not publicly accessible) to MindStudio
+   */
+  async getRehostedPdfSecurePath(): Promise<string> {
+    const request = await fetch('');
+    const blob = await request.blob();
+
+    // Get a signed upload URL
+    const { fields, path, url } = await api.getSignedUploadUrl();
+
+    const data = new FormData();
+    Object.keys(fields).forEach((key) => {
+      data.append(key, fields[key]);
+    });
+    data.append('file', blob);
+
+    await api.uploadFile(url, data);
+
+    return path;
+  },
+
   /**
    * Gets the currently selected content from the page.
    * Works with both text selections and input fields.