This Aptitude, combined with the Olive Helps browser extension, allows an author to interact with your browser.
This Aptitude only works if you have the Olive Helps browser extension installed. Currently, we have extensions for Chrome, Firefox, and Edge.
Please note: Microsoft Edge operates as a Chrome plugin.
These documents will reference frameId and parentFrameId - for more information on frames, check out the Chrome Extension Docs here.
listenNavigation
Calls callback on any navigation event pushed from a browser running the Olive Helps extension.
import { browser } from'@oliveai/ldk';constURL_TO_OPEN='https://www.oliveai.dev/';constnewTabId=awaitbrowser.openTab(URL_TO_OPEN);constbrowserListener=awaitbrowser.listenNavigation((navDetails) => {/* navDetails will be: { frameId: number, navigationType: string (real | history) parentFrameId: number, tabId: number, timestamp: number, url: string } */// navDetails.url === URL_TO_OPEN: true// navDetails.tabId === newTabId: true// Cancel the listener when a specific URL is opened by the userif (navDetails.url ===URL_TO_OPEN) {browserListener.cancel(); }})
listenTextSelection
Calls callback on any text selection event pushed from a browser running the Olive Helps extension.
import { browser } from'@oliveai/ldk';constbrowserTextListener=awaitbrowser.listenTextSelection((value) => {// Cancel the listener when a specific string is selected in the browserconstTEXT_WE_NEED='The quick brown fox jumped';if (value ===TEXT_WE_NEED) {browserTextListener.cancel(); }}
listenNetworkActivity
Listens for any network activity by the browser. The resulting callback for the listener takes in an activity event with the following structure.
exportinterfaceNetworkActivityDetails { tabId:number; // Which tab the activity originated from requestUrl:string; // The url for fetching data method:string; // The HTTP method used in the request requestBody:null|string; // Null or a string of the request payload domain:string; // The originating url}
import { browser } from'@oliveai/ldk';constnetworkActivityListener=awaitbrowser.listenNetworkActivity((event) => {console.log(JSON.stringify(event)); // This will produce the structure abovenetworkActivityListener.cancel();}
openTab
Opens a tab in the browser running the Olive Helps extension.
import { browser } from'@oliveai/ldk';constURL_TO_OPEN='https://www.oliveai.dev/';// This will open a new tab in your browser, and return the new tab's IDconstnewTabId=awaitbrowser.openTab(URL_TO_OPEN);// This will open a new tab in your browser and return both the tab id and the source html for the pageconst {id,sourceHTML}=awaitbrowser.openTab(URL_TO_OPEN, {includeSouce:true});
openWindow
Opens a window in the browser running the Olive Helps extension.
import { browser } from'@oliveai/ldk';constURL_TO_OPEN='https://www.oliveai.dev/';// This will open a new window in your browser, and return the new window's IDconstnewWindowId=awaitbrowser.openWindow(URL_TO_OPEN);// This will open a new window in your browser, and return the new windows id and the source html for the pageconst {id,sourceHTML} =awaitbrowser.openWindow(URL_TO_OPEN, { includeSource:true});
In this example, let's assume we have a Whisper with a button, this instructs you to click the button in order to open a browser window that automatically navigates to your profile page for your insurance provider. And after doing so, you'll instructed to select the insurance ID and group ID.
import { browser } from'@oliveai/ldk';exportasyncfunctiongetInsuranceInfo() {// Assume we know the 9-digit ID will be on the page as 'ID: 123456789'// and the 8-digit group as 'Group: 12345678'constID_SELECTION_PATTERN= /ID: .{9}/gconstGROUP_SELECTION_PATTERN= /Group: .{8}/gconstCIGNA_USER_PROFILE_URL='https://my.cigna.com'awaitbrowser.openWindow(CIGNA_USER_PROFILE_URL);let insuranceId;let insuranceGroup;constbrowserListener=awaitbrowser.listenTextSelection(value => {constidMatches=value.match(ID_SELECTION_PATTERN);constgroupMatches=value.match(GROUP_SELECTION_PATTERN);// If there is a match, assign the variableif (idMatches) insuranceId = idMatches[0];if (groupMatches) insuranceGroup = groupMatches[0];// If insuranceId and insuranceGroup are defined, we can close// the listener and continue with the rest of the logic of our loopif (insuranceId && insuranceGroup) {browserListener.cancel();// Create/update whispers or execute other logic here// using the ID and Group } })}
To use the Browser aptitude, you will need to specify which domains your Loop will be using in your package.json under the ldk object like shown below. If you do not specify a domain your Loop attempts to access, Olive Helps will reject the request. This is done to ensure you feel confident that a Loop isn't sending or getting information to something unexpected.
The URLs you add will need to include a path suffix /*
..."ldk": {"permissions": {"browser": {"urlDomains": [ {"value":"*.fda.gov",// Allows any subdomain of fda.gov, but },// not any path {"value":"*.fda.gov/*",// Allows any subdomain and path of fda.gov }, ... ] }, ... }},...