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: #42
Co-authored-by: Glen Whitney <glen@studioinfinity.org>
Co-committed-by: Glen Whitney <glen@studioinfinity.org>

.gitignore

@@ -3,6 +3,8 @@ tsbuild
 jsbuild
 public/js
 extension
+archematics
+archematics.zip
 
 # Editor backups
 *~

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"
       }
    ],

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',

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

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
+      apars := JSON.stringify(adapParams)
-      window.wrappedJSObject.adapParams = cloneInto(adapParams, window)
       addScriptTag(browser.runtime.getURL 'deps/GeoGebra/deployggb.js').then =>
-         addScriptTag browser.runtime.getURL('adapptlet.js'), true
+         addScriptTag browser.runtime.getURL('adapptlet.js'), apars, true

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

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/giveAwrl.js --dir $1
-npx rollup public/js/adapptlet.js --file extension/adapptlet.js
+npx rollup public/js/adapptlet.js --file $1/adapptlet.js
-npx rollup public/js/adapptext.js --file extension/adapptext.js
+npx rollup public/js/adapptext.js --file $1/adapptext.js
-cp public/js/options.js public/js/adapptypes.js extension
+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