🪟 iframe API #

bridge. ships with a communication layer and a set of pre-built components that easily allow you to integrate your third-party tool into bridge. as long as it is accessible via an iframe. Tools embedded into bridge. can access the file system and other bridge. related APIs. Some API calls are subject to permission prompts.

Embedding Your Tool #

The most common way to embed your tool is to use bridge.'s iframe tab. You need to create an extension in order to do so. You can then import the iframe tab within a script like this:

import { IframeTab, addTab, getCurrentTabSystem } from '@bridge/tab'

Next, simply create an instance of the tab and add it the current tab system:

const tab = new IframeTab(await getCurrentTabSystem(), {
	/**
	 * URL to the tool you want to embed
	 */
	url: 'https://my-emdedded-tool.com',

	/**
	 * Name of the tab (shows within the UI)
	 */
	name: 'My Embedded Tool',
	/**
	 * Icon of the tab (shows next to the name within the UI)
	 */
	icon: 'mdi-book-outline',
	/**
	 * Icon color for the tab icon
	 */
	iconColor: 'behaviorPack',

	/**
	 * Optional: Pass a fileHandle that is supposed to be opened with the tab
	 */
	openWithPayload: {
		filePath,
		fileHandle,
	},
})

/**
 * Add the tab to the current tab system
 */
addTab(tab)

Establishing a Connection #

To connect your embedded web page to bridge., you need to first import the communication library:

import { Channel } from 'https://cdn.jsdelivr.net/npm/bridge-iframe-api@0.4.11/dist/bridge-iframe-api.es.js'

Then, create a new communication channel:

const api = new Channel()

And finally, connect to bridge.:

await api.connect()

You can now listen to events and trigger actions on your Channel instance.