From d8ae0b680b6602b6273378f22661d9a268cc4cd9 Mon Sep 17 00:00:00 2001
From: Orion Reed <orionreedt@gmail.com>
Date: Fri, 13 Dec 2024 23:47:41 -0500
Subject: [PATCH] tweaks, know what to do for extension now i think maybe
 possibly

---
 browser-ext/background.ts    |  4 ----
 browser-ext/contentScript.ts | 21 ++++++++-------------
 browser-ext/injected.ts      | 20 ++++++++++++++++++++
 browser-ext/manifest.json    |  3 +++
 browser-ext/vite.config.ts   |  7 +++++++
 5 files changed, 38 insertions(+), 17 deletions(-)
 create mode 100644 browser-ext/injected.ts

diff --git a/browser-ext/background.ts b/browser-ext/background.ts
index 0d10385..1cbdede 100644
--- a/browser-ext/background.ts
+++ b/browser-ext/background.ts
@@ -1,9 +1,5 @@
 import browser from 'webextension-polyfill';
 
-browser.runtime.onInstalled.addListener(() => {
-  console.log('Installed!');
-});
-
 browser.browserAction.onClicked.addListener((tab) => {
   if (tab.id) {
     browser.tabs.sendMessage(tab.id, { action: 'insertFolkCanvas' });
diff --git a/browser-ext/contentScript.ts b/browser-ext/contentScript.ts
index f43a6fe..223f698 100644
--- a/browser-ext/contentScript.ts
+++ b/browser-ext/contentScript.ts
@@ -1,20 +1,15 @@
 import browser from 'webextension-polyfill';
-import { FolkShape } from '../src/folk-shape';
-
-// Define the custom element with its proper tag name
-customElements.define('folk-shape', FolkShape);
 
 browser.runtime.onMessage.addListener((message: any) => {
+  console.log('HELLO MESSAGE', message);
   if (message.action === 'insertFolkCanvas') {
-    // Append a 'folk-canvas' div to the document body
-    const folkCanvas = document.createElement('div');
-    folkCanvas.className = 'folk-canvas';
-    document.body.appendChild(folkCanvas);
-
-    // Create and add a 'folk-shape' element
-    const folkShape = document.createElement('folk-shape') as FolkShape;
-    folkShape.innerHTML = '<p>Hello, Folk Shape!</p>';
-    folkCanvas.appendChild(folkShape);
+    // Inject 'injected.js' into the page context
+    const script = document.createElement('script');
+    script.src = browser.runtime.getURL('injected.js');
+    script.onload = function () {
+      script.remove();
+    };
+    (document.head || document.documentElement).appendChild(script);
   }
   return true;
 });
diff --git a/browser-ext/injected.ts b/browser-ext/injected.ts
new file mode 100644
index 0000000..2d25473
--- /dev/null
+++ b/browser-ext/injected.ts
@@ -0,0 +1,20 @@
+// just checking we can add a simple element (we can)
+const testElement = document.createElement('p');
+testElement.textContent = 'Hello, TEST!';
+document.body.appendChild(testElement);
+
+// Now you can use FolkShape in the page context
+const folkShape = document.createElement('folk-shape');
+document.body.appendChild(folkShape);
+
+if (typeof customElements !== 'undefined') {
+  console.log('defining folk-shape');
+  // need to find the right way to bundle this all up and call it at the right time
+  // FolkShape.define();
+  console.log('importing folk-shape');
+  // this also won't work
+  // maybe just simply build and bundle it all up, this is probl easiest.
+  // import('../src/folk-shape').then((m) => m.FolkShape.define());
+} else {
+  console.warn('CUSTOM ELEMENTS NOT DEFINED');
+}
diff --git a/browser-ext/manifest.json b/browser-ext/manifest.json
index 71e2855..ab469b3 100644
--- a/browser-ext/manifest.json
+++ b/browser-ext/manifest.json
@@ -6,6 +6,9 @@
     "service_worker": "background.ts"
   },
   "options_page": "options.html",
+  "web_accessible_resources": [
+    "injected.ts"
+  ],
   "content_scripts": [
     {
       "matches": [
diff --git a/browser-ext/vite.config.ts b/browser-ext/vite.config.ts
index d838b9b..40f5785 100644
--- a/browser-ext/vite.config.ts
+++ b/browser-ext/vite.config.ts
@@ -2,6 +2,13 @@ import { defineConfig } from 'vite';
 import webExtension from 'vite-plugin-web-extension';
 
 export default defineConfig({
+  build: {
+    rollupOptions: {
+      input: {
+        injected: 'injected.ts',
+      },
+    },
+  },
   plugins: [
     webExtension({
       webExtConfig: {