From ab5f16bf63ed63b41ff9c3dfb741b531c519b6c8 Mon Sep 17 00:00:00 2001 From: Orion Reed Date: Fri, 13 Dec 2024 17:40:30 -0500 Subject: [PATCH] ext --- browser-ext/background.ts | 11 +++++++++++ browser-ext/contentScript.ts | 20 ++++++++++++++++++++ browser-ext/manifest.json | 22 ++++++++++++++++++++++ browser-ext/options.html | 12 ++++++++++++ browser-ext/package.json | 16 ++++++++++++++++ browser-ext/vite.config.ts | 12 ++++++++++++ 6 files changed, 93 insertions(+) create mode 100644 browser-ext/background.ts create mode 100644 browser-ext/contentScript.ts create mode 100644 browser-ext/manifest.json create mode 100644 browser-ext/options.html create mode 100644 browser-ext/package.json create mode 100644 browser-ext/vite.config.ts 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, + ], +});