toolaby 1.4.3 → 1.4.5

package/bin.mjs

@@ -32,9 +32,9 @@ import { homedir } from 'node:os';
 import { spawn } from 'node:child_process';
 import { createHmac, randomBytes } from 'node:crypto';
 import { wireManifest, WORKER_LINES } from './lib/manifest.js';
-import { detectProject, CODE_FILES, filesToWrite, STALE_FILES, BUILD_COPY_NOTE } from './lib/project.js';
+import { detectProject, CODE_FILES, filesToWrite, fillPages, scaffoldManifest, scaffoldFilesFor, surfacesOf, hasPopup, hasSidePanel, SURFACES, STALE_FILES, BUILD_COPY_NOTE } from './lib/project.js';
 
-const VERSION = '1.4.3';
+const VERSION = '1.4.5';
 const CLIENT_ID = 'toolaby-cli';
 const argv = process.argv.slice(2);
 // `--version` and `--help` are commands of their own; every other command is the first bare word.
@@ -218,7 +218,7 @@ async function wire() {
   // A command older than the Wall asks for files the Wall no longer hands out: said, with the way to the current one, rather than a crash.
   const missing = targets.map((p) => p.split('/').pop()).filter((name) => typeof plan.files[name] !== 'string');
   if (missing.length) fail(`This command (${VERSION}) is older than the Wall at ${wall}: it expects ${missing.join(', ')}, which the Wall no longer hands out.\n  Update it: npm install -g toolaby@latest — or run the Wall's own copy: npx --yes ${wall}/toolaby.tgz ${command} ${slug}`);
-  for (const path of targets) write(path, plan.files[path.split('/').pop()].replaceAll('__APP_POPUP__', appPopup ?? '').replaceAll('__APP_SIDE_PANEL__', appSidePanel ?? ''));
+  for (const path of targets) write(path, fillPages(plan.files[path.split('/').pop()], { appPopup, appSidePanel }));
   // What an earlier wiring wrote and this one does not, wherever it put them: taken away, so nothing stale is shipped.
   const removed = [];
   for (const at of new Set([project.codeDir, project.popupDir, 'public/', 'src/public/'])) for (const f of STALE_FILES) { const p = join(dir, `${at}${f}`); if (existsSync(p)) { unlinkSync(p); removed.push(`${at}${f}`); } }
@@ -256,12 +256,28 @@ async function create() {
   if (existsSync(dir)) fail(`${dir} already exists`);
   const plan = await filesFor(slug, true);
   const write = (rel, content) => { mkdirSync(dirname(join(dir, rel)), { recursive: true }); writeFileSync(join(dir, rel), content); };
-  for (const f of ['manifest.json', ...CODE_FILES, 'background.js', 'popup.html', 'popup.css', 'popup.js', 'README.md']) write(f, plan.files[f].replaceAll('__APP_POPUP__', '').replaceAll('__APP_SIDE_PANEL__', ''));
+  // The scaffold's own files as the Wall names them (older Walls did not, hence the list): a Wall that adds one to the
+  // minimal extension is written by this command too, instead of a manifest naming a file that never arrived.
+  const scaffold = Array.isArray(plan.scaffold) && plan.scaffold.length ? plan.scaffold : ['manifest.json', 'background.js', 'popup.html', 'sidepanel.html', 'popup.css', 'popup.js', 'README.md'];
+  // Which surfaces this extension is made with: both (the default), one of them, or none at all for a tool that works
+  // from the background. Asked for once here, rather than written and then deleted by hand.
+  const asked = opt('--surfaces');
+  if (asked && !SURFACES.includes(asked)) fail(`--surfaces takes ${SURFACES.join(', ')} — not "${asked}".`);
+  const surfaces = surfacesOf(asked);
+  const wanted = [...CODE_FILES, ...scaffoldFilesFor(surfaces, scaffold)];
+  const absent = wanted.filter((f) => typeof plan.files[f] !== 'string');
+  if (absent.length) fail(`The Wall at ${wall} named ${absent.join(', ')} for a new extension but did not hand ${absent.length > 1 ? 'them' : 'it'} over.\n  Nothing was written. Update this command: npm install -g toolaby@latest — or run the Wall's own copy: npx --yes ${wall}/toolaby.tgz create ${slug}`);
+  // Both surfaces, and the panel drawn inside them: no page of the Wall's stands in front, so both names stay empty.
+  for (const f of wanted) write(f, fillPages(plan.files[f]));
+  // The manifest names the side panel only now that the page is beside it — an extension whose side_panel points at a
+  // missing file does not load at all, so a Wall that stops serving the page must not leave the key behind either.
+  write('manifest.json', JSON.stringify(scaffoldManifest(JSON.parse(readFileSync(join(dir, 'manifest.json'), 'utf8')), { sidePanel: hasSidePanel(surfaces), popup: hasPopup(surfaces) }), null, 2) + '\n');
   for (const s of [16, 48, 128]) {
     const res = await fetch(`${wall}/boilerplate/icons/icon${s}.png`);
     write(join('icons', `icon${s}.png`), Buffer.from(await res.arrayBuffer()));
   }
-  out(`\n  ${plan.name} → ${dir}\n\n    1. chrome://extensions → Developer mode → Load unpacked → ${dir}\n    2. Click the icon: the popup shows what the Free plan holds; Buy opens ${plan.site}/tools/${slug}\n\n  Edit background.js: your work goes behind toolaby.gate().\n`);
+  const clicking = { both: 'Click the icon: the popup shows what the Free plan holds. Open side panel, in it, is the same page at the panel\'s width', popup: 'Click the icon: the popup shows what the Free plan holds', 'side-panel': 'Click the icon: the side panel opens — it has no popup, so the click is the panel\'s', none: 'No popup and no side panel: nothing opens on a click. Your code says when to sell — toolaby.openPaymentPage()' }[surfaces];
+  out(`\n  ${plan.name} → ${dir}${surfaces === 'both' ? '' : `  (--surfaces ${surfaces})`}\n\n    1. chrome://extensions → Developer mode → Load unpacked → ${dir}\n    2. ${clicking}; Buy opens ${plan.site}/tools/${slug}\n\n  Edit background.js: your work goes behind toolaby.gate().\n  Surfaces, and how to add or drop one later: ${plan.site}/docs/surfaces\n`);
 }
 
 // ── webhooks: the catalogue, and a delivery on demand ───────────────────────────────────────────────────────────────
@@ -357,6 +373,7 @@ function help() {
                                        --into <folder>   another folder     --force   replace the platform's files
     toolaby upgrade <tool-id>          the platform's files replaced with the current ones — the popup, the client — yours untouched
     toolaby create <tool-id>           a new, minimal extension for your tool, in <tool-id>/   --dir <folder>
+                                       --surfaces both|popup|side-panel|none   what it opens (default: both)
     toolaby tools                      your tools, with their ids
     toolaby webhooks events            the six events, with an example of each
     toolaby webhooks trigger <event>   an example delivery to your endpoints; --to <url> sends it to a local server instead

package/lib/manifest.js

@@ -50,13 +50,22 @@ export function wireManifest(input, o) {
         did.push(`the Wall's popup in front of ${appPopup}: it opens on to yours while the device may, and shows the panel when it may not`);
     }
     // The extension's own side panel, the same way: the Wall's in front, with the permission a side panel needs.
+    // Chrome spells it side_panel.default_path, Firefox sidebar_action.default_panel; a manifest may carry both.
+    const theirs = (v) => (typeof v === 'string' && v !== WALL_SIDE_PANEL ? v : null);
     const declaredPanel = typeof manifest.side_panel?.default_path === 'string' ? manifest.side_panel.default_path : null;
-    const appSidePanel = declaredPanel && declaredPanel !== WALL_SIDE_PANEL ? declaredPanel : declaredPanel === WALL_SIDE_PANEL ? (o.rememberedSidePanel || null) : null;
-    if (appSidePanel && declaredPanel !== WALL_SIDE_PANEL) {
+    const declaredSidebar = typeof manifest.sidebar_action?.default_panel === 'string' ? manifest.sidebar_action.default_panel : null;
+    const ours = declaredPanel === WALL_SIDE_PANEL || declaredSidebar === WALL_SIDE_PANEL;
+    const appSidePanel = theirs(declaredPanel) ?? theirs(declaredSidebar) ?? (ours ? o.rememberedSidePanel || null : null);
+    if (theirs(declaredPanel)) {
         manifest.side_panel = { ...manifest.side_panel, default_path: WALL_SIDE_PANEL };
         if (!(Array.isArray(manifest.permissions) && manifest.permissions.includes('sidePanel')))
             manifest.permissions = add(manifest.permissions, 'sidePanel');
-        did.push(`the Wall's side panel in front of ${appSidePanel}: the same as the popup, at the panel's width`);
+        did.push(`the Wall's side panel in front of ${declaredPanel}: the same as the popup, at the panel's width`);
+    }
+    // Firefox's sidebar, when it names the same page — one that names another is left alone rather than pointed elsewhere.
+    if (theirs(declaredSidebar) && (!declaredPanel || declaredSidebar === declaredPanel)) {
+        manifest.sidebar_action = { ...manifest.sidebar_action, default_panel: WALL_SIDE_PANEL };
+        did.push(`the Wall's side panel in front of ${declaredSidebar} in Firefox's sidebar_action too`);
     }
     const named = typeof manifest.background?.service_worker === 'string' && manifest.background.service_worker.trim() ? manifest.background.service_worker.trim() : null;
     let writeWorker = null;

package/lib/project.js

@@ -19,6 +19,40 @@ export const filesToWrite = (p, appPopup, appSidePanel = null) => [
     ...(appSidePanel ? SIDE_PANEL_FILES.map((f) => `${p.popupDir}${f}`) : []),
     ...(p.extraFiles ?? []).map((f) => f.to),
 ];
+export const SURFACES = ['both', 'popup', 'side-panel', 'none'];
+export const surfacesOf = (v) => SURFACES.includes(v ?? '') ? v : 'both';
+export const hasPopup = (s) => s === 'both' || s === 'popup';
+export const hasSidePanel = (s) => s === 'both' || s === 'side-panel';
+/** The scaffold's own files for those surfaces: the manifest and the background always, the pages as asked for. */
+export const scaffoldFilesFor = (s, all) => all.filter((f) => (f === 'popup.html' ? hasPopup(s) : f === 'sidepanel.html' ? hasSidePanel(s) : f === 'popup.js' || f === 'popup.css' ? s !== 'none' : true));
+/**
+ * The scaffold's manifest, once it is known which pages were really written. Chrome refuses to load an extension
+ * whose `side_panel.default_path` names a file that is not there — the whole extension, not just the panel — so the
+ * minimal extension ships a manifest that names only its popup, and whatever writes the pages settles it here: the
+ * side panel added with its page, the popup taken out when there is none (the icon stays; the click then opens the
+ * side panel, or nothing, which is what a background-only tool wants).
+ */
+export function scaffoldManifest(manifest, wrote) {
+    const out = { ...manifest };
+    if (wrote.popup === false) {
+        const action = { ...out.action };
+        delete action.default_popup;
+        out.action = action;
+    }
+    if (!wrote.sidePanel)
+        return out;
+    const permissions = Array.isArray(out.permissions) ? [...out.permissions] : [];
+    if (!permissions.includes('sidePanel'))
+        permissions.push('sidePanel');
+    return { ...out, permissions, side_panel: { default_path: 'sidepanel.html' } };
+}
+/**
+ * The last two placeholders in a handed-out file — the extension's own popup and side panel, which only the
+ * writer knows, since it is the one that read the manifest. Everything else is filled where the files are built
+ * (wiring/files.ts). Every hand-out goes through this: the Wire button, the command, and the zip on the Set up
+ * page, which once shipped `appSidePanel: '__APP_SIDE_PANEL__'` because it filled the popup's name and not this one.
+ */
+export const fillPages = (text, pages = {}) => text.replaceAll('__APP_POPUP__', pages.appPopup ?? '').replaceAll('__APP_SIDE_PANEL__', pages.appSidePanel ?? '');
 /** The import of toolaby.js from a file at `from`, both relative to the root. */
 export function importPath(from, codeDir = '') {
     const depth = from.split('/').length - 1;
@@ -109,7 +143,8 @@ export function detectProject(o) {
         // A plain extension with a build (webpack, Rollup, Parcel, esbuild…) is wired the same way — the manifest is a file and
         // the files go beside it — but only what the build copies reaches the output, so that is said.
         const declared = typeof manifest?.action?.default_popup === 'string' ? manifest.action.default_popup : null;
-        const declaredPanel = typeof manifest?.side_panel?.default_path === 'string' ? manifest.side_panel.default_path : null;
+        // Chrome's side_panel, else Firefox's sidebar_action: the same page, two spellings.
+        const declaredPanel = typeof manifest?.side_panel?.default_path === 'string' ? manifest.side_panel.default_path : typeof manifest?.sidebar_action?.default_panel === 'string' ? manifest.sidebar_action.default_panel : null;
         const named = typeof manifest?.background?.service_worker === 'string' ? manifest.background.service_worker : null;
         const workerFile = named && has(named) ? named : 'background.js';
         return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toolaby",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "description": "The Toolaby command line: sign in once, then wire any Chrome extension to your tool on the Wall — sign-in, the Free plan, licences and subscriptions — or start a new one.",
   "type": "module",
   "bin": {