DOM Context Tutorial
Use the DOM context to display custom UI using HTML and DOM.
Currently, you can present a custom sheet over a window or add custom views to the inspector bar. Note, your extension might not need to use the DOM context. Instead, you can use the app context to present alerts and add items to the sidebar, just not fully custom UI.
App Context Summary
Entry points:
dom/*.ts(x)
Code runs in web views embedded in Bike’s UI.
Web views are sandboxed and have no network access.
These views are loaded dynamically using app context APIs.
Communicate with the originating app context using
postMessage
andonMessage
.Import DOM context API using
import { SYMBOL } from 'bike/dom'
.
Setup
Turitoral assumes that you have run the npm run watch
command. Your extension should automatically build and install when you save changes.
Create "Archive Done" Sheet
We will modify the "Archive Done" command to show a sheet with the number of archived rows.
Overview
Create a DOM script at
dom/<scriptname>
.Pass the DOMScriptName to the app context API
window.presentSheet
.Use the returned handle to send the row count to the DOM context for display.
Code
Create the DOM script at dom/archive-done-sheet.ts
:
import { DOMExtensionContext } from "bike/dom";
export async function activate(context: DOMExtensionContext) {
context.element.textContent = "Loading..."
context.onmessage = (message) => {
context.element.textContent = message
}
}
Modify archive done in app/main.ts
to show the sheet:
function archiveDoneCommand(): boolean {
...
bike.frontmostWindow?.presentSheet('archive-done-sheet.js').then((handle) => {
handle.postMessage(doneRows.length);
})
return true;
}
Save, your modified extension should rebuild and install.
Now in Bike, perform the archive done command. The sheet should present, telling you how many rows were archived. Press the Escape key to close the sheet. In code, you can close the sheet by calling dispose()
on the returned handle.
Using React
For more complex custom views, you might want to use React.
Bike bundles and loads a single copy of React into each web view. The extension kit is set up to use that bundled version when you import react into your DOM script. You may also use the .tsx
file extension and syntax in your DOM script.
Next Steps
Follow the Style Context Tutorial to create your own outline styles.
Last updated