add extensions support (#247)

extensions/chrome_ext_v3/Test.js

@@ -0,0 +1,2 @@
+export const Particle = ({
+});

extensions/chrome_ext_v3/app/ExtensionApp.js

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ *
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file or at
+ * https://developers.google.com/open-source/licenses/bsd
+ */
+import {App} from '../deploy/Library/App/TopLevel/App.js';
+import {logFactory} from '../deploy/Library/Core/utils.min.js';
+import {XenComposer} from '../deploy/Library/Dom/Surfaces/Default/XenComposer.js';
+import {HistoryService} from '../deploy/Library/App/HistoryService.js';
+import {FirebaseStoragePersistor} from '../deploy/Library/Firebase/FirebaseStoragePersistor.js';
+import {DeviceUxRecipe} from '../deploy/Library/Media/DeviceUxRecipe.js';
+import {CameraNode} from '../deploy/Library/GraphsNodes/CameraNode.js';
+
+const log = logFactory(true, 'ExtensionApp', 'navy');
+
+const ExtensionRecipe = {
+  $stores: {
+    html: {
+      $tags: ['persisted'],
+      $type: 'MultilineString',
+      $value: `
+<div style="padding: 24px;">
+  <h3>Hello World ${Math.random()}</h3>
+</div>
+        `.trim(),
+    }
+  },
+  echo: {
+    $kind: '$library/Echo.js',
+    $inputs: ['html']
+  }
+};
+
+export const ExtensionApp = class extends App {
+  constructor(path, root, options) {
+    super(path, root, options);
+    this.services = {
+      HistoryService
+    };
+    this.persistor = new FirebaseStoragePersistor('user');
+    this.userAssembly = [CameraNode, ExtensionRecipe];
+    this.composer = new XenComposer(document.body, true);
+    this.composer.onevent = (p, e) => this.handle(p, e);
+    this.arcs.render = p => this.render(p);
+    log('Extension lives!');
+  }
+  async spinup() {
+    await super.spinup();
+    setTimeout(() => {
+      this.arcs.set('user', 'mediaDevices', {
+        videoinput: {
+          deviceId: '545b0c354475465dd731e6fe7414319c2d88f4660c6c108ca43528191638406b',
+          kind: 'videoinput',
+          label: 'HD Pro Webcam C920 (046d:082d)',
+          groupId: '6b5db3734e5bd10ecda9de583b7ef3761be03ce1ab1b49c1a91a312fb91f6de2'
+        }
+      });
+    }, 1000);
+//     this.arcs.set('user', 'html', `
+// <div style="padding: 24px;">
+//   <h3>Hello World ${Math.random()}</h3>
+// </div>
+//     `);
+  }
+  render(packet) {
+    log('render', packet);
+    this.composer.render(packet);
+  }
+  handle(pid, eventlet) {
+    // TODO(sjmiles): the composer doesn't know from Arcs or Users, so the PID is all we have
+    // we should make the PID into an USERID:ARCID:PARTICLEID ... UAPID? UAP? E[vent]ID?
+    const arc = Object.values(this.arcs.user.arcs).find(({hosts}) => hosts[pid]);
+    arc?.onevent(pid, eventlet);
+  }
+};

extensions/chrome_ext_v3/app/arcs.js

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright (c) 2022 Google LLC All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+// use Library path from configuration
+
+const Library = globalThis.config.arcsPath;
+
+// import modules from the ArcsJs Library
+// the 'load' function imports modules in parallel
+
+const load = async paths => (await Promise.all(paths.map(p => import(`${Library}/${p}`)))).reduce((e, m) =>({...e, ...m}),{});
+
+export const {
+  Paths, logFactory, App, Resources, Params,
+  deepQuerySelector, Xen,
+  quickStart,
+  LocalStoragePersistor,
+  // HistoryService,
+  // NodeCatalogRecipe,
+  // MediaService,
+  // MediapipeNodes,
+  // FaceMeshService, SelfieSegmentationService,
+  // ThreejsService, ShaderService,
+  // TensorFlowService, CocoSsdService,
+  // LobbyService,
+  // GoogleApisService,
+  // // must be last
+  // ...etc
+} = await load([
+  'Core/utils.js',
+  'Isolation/vanilla.js',
+  'App/TopLevel/App.js',
+  'App/Resources.js',
+  'App/Params.js',
+  'App/boot.js',
+  'App/common-dom.js',
+  //'App/HistoryService.js',
+  'Dom/Xen/xen-async.js',
+  'Dom/dom.js',
+  'Dom/multi-select.js',
+  'Dom/code-mirror/code-mirror.js',
+  'LocalStorage/LocalStoragePersistor.js',
+  // 'Designer/designer-layout.js',
+  // 'NodeGraph/dom/node-graph.js',
+  // 'NodeTypeCatalog/draggable-item.js',
+  // 'NodeTypeCatalog/NodeCatalogRecipe.js',
+  // 'Rtc/LobbyService.js',
+  // 'Goog/GoogleApisService.js',
+  // 'NewMedia/CameraNode.js',
+  // 'NewMedia/MediaService.js',
+  // 'Mediapipe/FaceMeshService.js',
+  // 'Mediapipe/SelfieSegmentationService.js',
+  // 'Mediapipe/MediapipeNodes.js',
+  // 'Threejs/ThreejsService.js',
+  // 'Shader/ShaderService.js',
+  // 'Shader/ShaderNodes.js',
+  // 'TensorFlow/TensorFlow.js',
+  // 'TensorFlow/TensorFlowService.js',
+  // 'TensorFlow/CocoSsdService.js',
+  // 'TensorFlow/CocoSsdNode.js',
+  // 'Display/DisplayNodes.js'
+]);
+
+// // memoize important paths
+
+// const url = Paths.getAbsoluteHereUrl(import.meta, 1);
+
+// // important paths
+// Paths.add({
+//   $app: `${url}/../deploy/nodegraph`,
+//   $config: `${url}/config.js`,
+//   $library:`${url}/../deploy/Library`
+// });

extensions/chrome_ext_v3/app/config.js

@@ -0,0 +1,9 @@
+globalThis.config = {
+  arcsPath: `../deploy/Library`,
+  logFlags: {
+    particles: true,
+    //recipe: true,
+    //runtime: true,
+    storage: true
+  }
+};

extensions/chrome_ext_v3/background.js

@@ -0,0 +1,35 @@
+/* global chrome */
+
+import './deploy/Library/Core/core.js';
+import './deploy/Library/Isolation/vanilla.js';
+//import {Arcs} from './deploy/Library/App/TopLevel/Arcs.js';
+import {App} from './deploy/Library/App/TopLevel/App.js';
+
+const paths = {
+  $library: './deploy/Library'
+};
+
+(async () => {
+  await import('./Test.js');
+  const app = new App(paths);
+  //await app.spinup();
+  // await Arcs.init({
+  //   //paths: this.paths,
+  //   //root: this.root || document.body,
+  //   //onservice: this.service.bind(this),
+  //   //injections: {themeRules, ...this.injections}
+  // });
+})();
+
+chrome.action.onClicked.addListener(async () => {
+  const url = chrome.runtime.getURL("hello.html");
+  /*const tab = */await chrome.tabs.create({url});
+});
+
+onmessage = event => {
+  console.log(event);
+};
+
+chrome.runtime.onMessage.addListener(event => {
+  console.log(event);
+});

extensions/chrome_ext_v3/hello.html

@@ -0,0 +1,23 @@
+<!doctype html>
+
+<link type="text/css" rel="stylesheet" href="./deploy/Library/Dom/Material/material-icon-font/icons.css">
+
+<style>
+  html {
+    overflow: hidden;
+  }
+  body {
+    margin: 0;
+    width: 600px;
+    height: 400px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+  body > * {
+    flex: 1;
+  }
+</style>
+
+<script type="module" src="hello.js"></script>

extensions/chrome_ext_v3/hello.js

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright (c) 2022 Google LLC All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+import './app/config.js';
+import {quickStart} from './app/arcs.js';
+import {ExtensionApp} from './app/ExtensionApp.js';
+
+await quickStart(ExtensionApp, import.meta.url, {
+  $nodegraph: '$app/deploy/nodegraph/Library'
+});

extensions/chrome_ext_v3/jello.html

@@ -0,0 +1,24 @@
+<!doctype html>
+
+<link type="text/css" rel="stylesheet" href="./deploy/Library/Dom/Material/material-icon-font/icons.css">
+
+<style>
+  html {
+    overflow: hidden;
+  }
+  body {
+    margin: 0;
+    width: 600px;
+    height: 400px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+  body > * {
+    flex: 1;
+  }
+</style>
+
+Jello!
+<script type="module" src="jello.js"></script>

extensions/chrome_ext_v3/jello.js

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright (c) 2022 Google LLC All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+import './app/config.js';
+import {quickStart} from './app/arcs.js';
+import {ExtensionApp} from './app/ExtensionApp.js';
+
+await quickStart(ExtensionApp, import.meta.url, {
+  $nodegraph: '$app/deploy/nodegraph/Library'
+});

extensions/chrome_ext_v3/link-deploy.sh

@@ -0,0 +1,2 @@
+#/bin/sh
+ln -s .. deploy

extensions/chrome_ext_v3/manifest.json

@@ -0,0 +1,35 @@
+{
+  "manifest_version": 3,
+  "name": "ArcsExtV3",
+  "version": "0.3.1",
+  "action": {
+    "default_icon": {
+      "32": "assets/logo_32x32.png"
+    },
+    "default_title": "Open Tools",
+    "default_popup": "jello.html"
+  },
+  "content_scripts": [{
+    "matches": ["http://localhost:9888/*"],
+    "js": ["content-script.js"]
+  }],
+  "content_security_policy": {
+    "sandbox": "sandbox allow-scripts; worker-src blob:; camera 'self';"
+  },
+  "sandbox": {
+    "pages": [
+      "deploy/librarian/index.html",
+      "viewer.html",
+      "hello.html"
+    ]
+  },
+  "background": {
+    "service_worker": "background.js",
+    "type": "module"
+  },
+  "permissions": [
+    "scripting",
+    "activeTab",
+    "storage"
+  ]
+}

extensions/video/app/Camera.js

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright (c) 2022 Google LLC All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+({
+mediaApi(service) {
+  const media = (msg, data) => service({kind: 'MediaService', msg, data});
+  return {
+    allocateVideo: async () => media('allocateVideo'),
+    assignStream: async (video, stream) => media('assignStream', {video, stream}),
+    startFrameCapture: async (video, fps) => media('startFrameCapture', {video, fps})
+  }
+},
+async initialize(inputs, state, {service}) {
+  const {allocateVideo} = this.mediaApi(service);
+  state.video = await allocateVideo('allocateVideo');
+},
+async update({stream, fps}, state, {service, invalidate}) {
+  const {video, info} = state;
+  if (info) {
+    timeout(invalidate, 14);
+    const frame = {...info.frame, version: Math.random()};
+    return {frame};
+  }
+  const {assignStream, startFrameCapture} = this.mediaApi(service);
+  if (stream) {
+    await assignStream(video, stream);
+    state.info = await startFrameCapture(video, fps || 30);
+    invalidate();
+  }
+}
+});