tweaks, know what to do for extension now i think maybe possibly

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' });

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;
 });

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');
+}

browser-ext/manifest.json

@@ -6,6 +6,9 @@
     "service_worker": "background.ts"
   },
   "options_page": "options.html",
+  "web_accessible_resources": [
+    "injected.ts"
+  ],
   "content_scripts": [
     {
       "matches": [

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: {