Put CSS, HTML or JavaScript in the page

Puts CSS, HTML or JavaScript into a web page, now or for a whole site, with the page API for talking back.

Put code in the page

Details #

Injects into the page of the tab you name (the front tab by default).

css is a stylesheet.
html is placed at target (a CSS selector, default body) with position: before, after, prepend, append, replace or overlay (a floating panel in the top right that you can close). With isolate (on by default) it goes in a shadow root, so the site's CSS can't break it. <script> tags in html never run.
cssFile, htmlFile and jsFile do the same with a file from the macro's Site Kit folder (styles/main.css, html/badge.html, features/badge.js), so the code lives in a real file you can edit anywhere. The file is read when the macro is saved or the file changes, so a file with no {{variables}} still runs on the instant path.
js runs in world: isolated (default) or main, the page's own world.
id names the injection. A second inject with the same id replaces the first; Take injected code out of the page takes it out.
scope is page (gone at the next navigation) or site (comes back on every matching load until removed).

Everything injected can use the page API: switchboard.run("Macro", input), switchboard.emit(name, data), switchboard.on(name, fn) and switchboard.vars. In HTML, data-switchboard-run="Macro" runs a macro, data-switchboard-emit="name" fires a A page sends an event, and data-switchboard-bind="variable" keeps text (or an input) in step with a shared variable.

The instant path. A macro whose trigger is A page loads, changes or closes with event: loading can start with a run of browser.inject steps that use no {{variables}} and no tab. The browser applies those itself, before the page paints, even with Switchboard off. JavaScript there needs Allow User Scripts for the extension; without it, the CSS and HTML are still instant and the JavaScript runs at loaded through AppleScript.

Parameters #

Parameter	Type	Values	What it does
`browser`	one of	`safari` `chrome` `front`
`css`	text		, html, js: What to put in. At least one.
`cssFile`	text		, htmlFile, jsFile: The same, from a file in the kit folder.
`html`	text
`htmlFile`	text
`id`	text		Names the injection.
`isolate`	yes / no
`js`	text
`jsFile`	text
`position`	one of	`before` `after` `prepend` `append` `replace` `overlay`
`scope`	one of	`page` `site`	`page` or `site`.
`tab`	any value		Which tab (default `front`).
`target`	text		, position, isolate: Where the HTML goes.
`via`	one of	`auto` `extension` `appleScript`	`auto`, `extension` or `appleScript`.
`world`	one of	`isolated` `main`	`isolated` or `main` for the JavaScript.

Every step also accepts label, onFailure, timeout and dryRunSafe.

Examples #

Dark mode for one site, before it paints

When

A page on news.example.com/* starts to load

Put CSS in the page

Open in Switchboard to try it

A floating button that runs a macro

When

A page on example.com/* loads

Put an overlay in the page

Open in Switchboard to try it

Gotchas #

JavaScript needs Allow User Scripts (Settings ▸ Browsers walks you to it); CSS and HTML don't.
A page with strict security rules can't stop CSS, HTML or the user scripts; it can stop the page itself from loading your injected HTML's images.
AppleScript can only reach the front tab, can't await a promise and has no switchboard object.