Creating View Extensions

To create view extensions use DOMScripts. They allow you to add Javascript code to Bike hosted WebViews. These scripts can use standard web APIs to build custom UI. For example you can add new views to Bike's inspector panel.

For security these WebViews are blocked from making any network access.

For example if you try to make a fetch request from your DOMScript it will fail. Instead your extension can make fetch requests from the main extension context (assuming your extension has permission) and then postMessage the results to your DOMScript.

Overview

Bike extensions run in a headless JavaScript context, they cannot present custom UI directly.

To present custom UI:

1. Add the domScript permission to your extension.

2. Define a dom script in /src/dom/<scriptname> .

3. Make a call to Bike's API that accepts a dom script, such as window.inspector.addItem.

4. Use the returned handle to communicate with the dom script using onmessage and postMessage .

Example

First if you extension requires a special permission:

manifest.json

{
  ...
  "permissions": [
    "domScript"
  ]
}

Next define a new dom script in src/dom/inspector_item.ts . Dom scripts must always be placed in the top level of the src/dom subfolder.

import { DOMExtensionContext } from "bike";

// This script starts by displaying a "Loading..." message, and then listens 
// for messages to display from the main extension script. 
export function activate(context: DOMExtensionContext) {
    context.element.textContent = "Loading..."
    context.onmessage = (message) => {
        context.element.textContent = message
    }
}

Finally here is the code that add this inspector view to each window's inspector sidebar.

main.ts

import { AppExtensionContext, Window } from "bike";
import { Inspector, InsprectorItem } from "inspector_";

export function activate(context: AppExtensionContext) {
    bike.observeWindows((window: Window) => {
        window.inspector.addItem({
            id: "startup:inspector_item",
            name: "inspector_item.ts",
        }).then((handle) => {
            // Once the item is added use the handle to send the dom script a message
            handle.postMessage("Hello from app context!");
        });
    });
}