diff --git a/browser-ext/background.ts b/browser-ext/background.ts
new file mode 100644
index 0000000..0d10385
--- /dev/null
+++ b/browser-ext/background.ts
@@ -0,0 +1,11 @@
+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
new file mode 100644
index 0000000..f43a6fe
--- /dev/null
+++ b/browser-ext/contentScript.ts
@@ -0,0 +1,20 @@
+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) => {
+ 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 = 'Hello, Folk Shape!
';
+ folkCanvas.appendChild(folkShape);
+ }
+ return true;
+});
diff --git a/browser-ext/manifest.json b/browser-ext/manifest.json
new file mode 100644
index 0000000..71e2855
--- /dev/null
+++ b/browser-ext/manifest.json
@@ -0,0 +1,22 @@
+{
+ "name": "folk-canvas-extension",
+ "version": "1.0.0",
+ "manifest_version": 2,
+ "background": {
+ "service_worker": "background.ts"
+ },
+ "options_page": "options.html",
+ "content_scripts": [
+ {
+ "matches": [
+ ""
+ ],
+ "js": [
+ "contentScript.ts"
+ ]
+ }
+ ],
+ "browser_action": {
+ "default_title": "Add Folk Canvas"
+ }
+}
\ No newline at end of file
diff --git a/browser-ext/options.html b/browser-ext/options.html
new file mode 100644
index 0000000..7943e1b
--- /dev/null
+++ b/browser-ext/options.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+ Folk Canvas options
+
+
+ Hello options screen!
+
+
diff --git a/browser-ext/package.json b/browser-ext/package.json
new file mode 100644
index 0000000..c1913ea
--- /dev/null
+++ b/browser-ext/package.json
@@ -0,0 +1,16 @@
+{
+ "name": "folk-canvas-extension",
+ "type": "module",
+ "scripts": {
+ "dev": "vite dev",
+ "build": "vite build"
+ },
+ "dependencies": {
+ "vite": "^6.0.3",
+ "vite-plugin-web-extension": "^4.3.1",
+ "webextension-polyfill": "^0.12.0"
+ },
+ "devDependencies": {
+ "@types/webextension-polyfill": "^0.12.1"
+ }
+}
\ No newline at end of file
diff --git a/browser-ext/vite.config.ts b/browser-ext/vite.config.ts
new file mode 100644
index 0000000..d838b9b
--- /dev/null
+++ b/browser-ext/vite.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import webExtension from 'vite-plugin-web-extension';
+
+export default defineConfig({
+ plugins: [
+ webExtension({
+ webExtConfig: {
+ startUrl: ['https://www.humprog.org/~stephen/'],
+ },
+ }) as any,
+ ],
+});