From a236e15990a5f5294639064171e46eed45399f31 Mon Sep 17 00:00:00 2001 From: Glen Whitney Date: Tue, 10 Oct 2023 03:17:19 +0000 Subject: [PATCH] feat: Get extension working in the Edge browser (#42) To accomplish this, it needed to be bundled up in a zip file, so code to do that was added. (Quite possibly the zip will be able to be renamed as an .xpi file to create the file needed for Firefox. At the moment, you must extract this zip and "sideload" the extension into Edge by selected the extracted folder. I read that Edge will handle the packing into a single extension file itself. Also, some of the features used in the extension had to be polyfilled into Edge. And the final major change is that the "Xray" feature is not available in Edge, so data passed from the content script to the script injected into the page had to be moved from Xray to attributes of the script element. This all represents more progress on #28, Chrome(ium) is next. Reviewed-on: https://code.studioinfinity.org/glen/archematics/pulls/42 Co-authored-by: Glen Whitney Co-committed-by: Glen Whitney --- .gitignore | 2 ++ etc/manifest.json | 8 ++++++-- package.json5 | 6 ++++-- pnpm-lock.yaml | 14 ++++++++++++++ src/adapptext.civet | 8 ++++---- src/adapptlet.civet | 13 ++++++++++++- tools/makePlugin.bash | 11 +++++++---- 7 files changed, 49 insertions(+), 13 deletions(-) diff --git a/.gitignore b/.gitignore index 9ec83ad..ca6ef17 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,8 @@ tsbuild jsbuild public/js extension +archematics +archematics.zip # Editor backups *~ diff --git a/etc/manifest.json b/etc/manifest.json index d96eb28..369f795 100644 --- a/etc/manifest.json +++ b/etc/manifest.json @@ -8,11 +8,15 @@ "content_scripts": [ { "matches": ["*://*/*"], - "js": ["giveAwrl.js"] + "js": [ + "browser-polyfill.js", + "custom-elements.min.js", + "giveAwrl.js" + ] }, { "matches": ["*://*/*"], - "js": ["adapptext.js"], + "js": ["browser-polyfill.js", "adapptext.js"], "run_at": "document_start" } ], diff --git a/package.json5 b/package.json5 index b369d69..077cb78 100644 --- a/package.json5 +++ b/package.json5 @@ -14,12 +14,12 @@ // Use the Typescript compiler to create the final .js files: build_js: 'tsc && mkdir -p public/js && cp -r jsbuild/* public/js', build_deps: 'bash tools/copyDeps.bash public/js/deps', - build_plugin: 'bash tools/makePlugin.bash extension', + build_plugin: 'bash tools/makePlugin.bash archematics', build: 'pnpm --sequential /build_/', start: 'node public/js', go: 'pnpm --sequential "/build|start/"', serve: 'pnpm build && http-server', - clean: 'rm -rf tsbuild jsbuild public/js extension', + clean: 'rm -rf tsbuild jsbuild public/js archematics archematics.zip', }, packageManager: 'pnpm', keywords: [ @@ -37,9 +37,11 @@ '@danielx/civet': '^0.6.43', '@types/firefox-webext-browser': '^111.0.2', '@types/jquery': '^3.5.22', + '@webcomponents/custom-elements': '^1.6.0', 'http-server': '^14.1.1', rollup: '^4.0.2', typescript: '^5.2.2', + 'webextension-polyfill': '^0.10.0', }, dependencies: { colorsea: '^1.2.1', diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 088d969..df466fd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -22,6 +22,9 @@ devDependencies: '@types/jquery': specifier: ^3.5.22 version: 3.5.22 + '@webcomponents/custom-elements': + specifier: ^1.6.0 + version: 1.6.0 http-server: specifier: ^14.1.1 version: 14.1.1 @@ -31,6 +34,9 @@ devDependencies: typescript: specifier: ^5.2.2 version: 5.2.2 + webextension-polyfill: + specifier: ^0.10.0 + version: 0.10.0 packages: @@ -190,6 +196,10 @@ packages: - supports-color dev: true + /@webcomponents/custom-elements@1.6.0: + resolution: {integrity: sha512-CqTpxOlUCPWRNUPZDxT5v2NnHXA4oox612iUGnmTUGQFhZ1Gkj8kirtl/2wcF6MqX7+PqqicZzOCBKKfIn0dww==} + dev: true + /acorn@8.10.0: resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==} engines: {node: '>=0.4.0'} @@ -619,6 +629,10 @@ packages: hasBin: true dev: false + /webextension-polyfill@0.10.0: + resolution: {integrity: sha512-c5s35LgVa5tFaHhrZDnr3FpQpjj1BB+RXhLTYUxGqBVN460HkbM8TBtEqdXWbpTKfzwCcjAZVF7zXCYSKtcp9g==} + dev: true + /webpack-sources@3.2.3: resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==} engines: {node: '>=10.13.0'} diff --git a/src/adapptext.civet b/src/adapptext.civet index 18edc0a..8b0be59 100644 --- a/src/adapptext.civet +++ b/src/adapptext.civet @@ -29,12 +29,13 @@ config := childList: true, subtree: true obs.observe document.documentElement, config -function addScriptTag(url: string, module = false) +function addScriptTag(url: string, params = '', module = false) return new Promise (resolve, reject) => script := document.createElement 'script' script.addEventListener 'load', resolve script.addEventListener 'error', reject script.src = url + if params then script.dataset.params = params if module then script.type = 'module' document.head.appendChild script @@ -65,7 +66,6 @@ document.addEventListener "DOMContentLoaded", async => codebase .= browser.runtime.getURL 'deps/GeoGebra/HTML5/5.0/' codebase += use3d ? 'web3d' : 'webSimple' adapParams: AdapParams := {codebase, config, joyceApplets } - // @ts-ignore - window.wrappedJSObject.adapParams = cloneInto(adapParams, window) + apars := JSON.stringify(adapParams) addScriptTag(browser.runtime.getURL 'deps/GeoGebra/deployggb.js').then => - addScriptTag browser.runtime.getURL('adapptlet.js'), true + addScriptTag browser.runtime.getURL('adapptlet.js'), apars, true diff --git a/src/adapptlet.civet b/src/adapptlet.civet index d2c8965..010e0fd 100644 --- a/src/adapptlet.civet +++ b/src/adapptlet.civet @@ -78,10 +78,21 @@ function postApplets(jApplets: AppletDescription[], codebase = '') if codebase then geoApp.setHTML5Codebase codebase geoApp.inject jApp.id +adapptScript := findAdappt() as HTMLScriptElement + +function findAdappt() + scripts := document.querySelectorAll 'script' + for scrip of scripts + src := scrip.getAttribute 'src' + if src and src.includes 'adapptlet' + return scrip + +console.log 'In script', document.currentScript, adapptScript + adapParams: AdapParams := typeof GGBApplet is 'undefined' ? {loader: 'https://www.geogebra.org/apps/deployggb.js', joyceApplets: []} - : ((window as any).adapParams as AdapParams) + : JSON.parse(adapptScript.dataset.params ?? '') as AdapParams // Always use the final joyceApplets if there are any: if joyceApplets.length diff --git a/tools/makePlugin.bash b/tools/makePlugin.bash index 4ffc2fb..709d2cd 100644 --- a/tools/makePlugin.bash +++ b/tools/makePlugin.bash @@ -18,7 +18,10 @@ do cp -r etc/$trimspec $1/$dest done -npx rollup public/js/giveAwrl.js --dir extension -npx rollup public/js/adapptlet.js --file extension/adapptlet.js -npx rollup public/js/adapptext.js --file extension/adapptext.js -cp public/js/options.js public/js/adapptypes.js extension +npx rollup public/js/giveAwrl.js --dir $1 +npx rollup public/js/adapptlet.js --file $1/adapptlet.js +npx rollup public/js/adapptext.js --file $1/adapptext.js +cp public/js/options.js public/js/adapptypes.js $1 +cp node_modules/webextension-polyfill/dist/browser-polyfill.js $1 +cp node_modules/@webcomponents/custom-elements/custom-elements.min.js $1 +zip -r $1 $1