Skip to main content

​
Overview

The glide.content API allows you to execute code in the content process (the web page context) rather than the main browser process. This is essential for interacting with page DOM, handling page-specific events, and manipulating web content.
Glide uses a multi-process architecture like Firefox. The main process handles browser UI and coordination, while each tab runs in a separate content process for security and stability.

​
Methods

​
fn()

Mark a function so that it will be executed in the content process instead of the main process. 
glide.content.fn<F extends (...args: any[]) => any>(
  wrapped: F
): glide.ContentFunction<F>
​
wrapped
F extends (...args: any[]) => any
required
The function to execute in the content process. This function will be serialized and sent to the content process, so it cannot capture any outside variables.
​
return
glide.ContentFunction<F>
A wrapped function that can be used with excmds and keymaps. When invoked, it will execute in the content process.
Functions marked with glide.content.fn() are serialized before being sent to the content process. This means:
  • They cannot access variables from the surrounding scope
  • They cannot use closures
  • All logic must be self-contained within the function

​
execute()

Execute a function in the content process for a specific tab. 
// Without arguments
glide.content.execute<const Return>(
  func: () => Return,
  opts: {
    tab_id: number | glide.TabWithID;
    args?: undefined;
  }
): Promise<Return>

// With arguments
glide.content.execute<const Args extends readonly any[], const Return>(
  func: (...args: Args) => Return,
  opts: {
    tab_id: number | glide.TabWithID;
    args: Args;
  }
): Promise<Return>
​
func
(...args: Args) => Return
required
The function to execute in the content process. This function will be stringified before being sent, so it cannot capture any outside variables.
​
opts.tab_id
number | glide.TabWithID
required
The ID of the tab to inject the code into, or the tab object returned by glide.tabs.active().
​
opts.args
Args
Arguments to pass to the function. Must be JSON serializable. Use this to pass data into your content function since closures don’t work.
​
return
Promise<Return>
A promise that resolves to the return value of the executed function.
Critical Limitations:
  1. The function is stringified before execution, so it cannot access variables from the outer scope
  2. All arguments must be JSON serializable (no functions, DOM elements, etc.)
  3. The return value must also be JSON serializable
This will NOT work:
const color = 'red';
await glide.content.execute(
  () => document.body.style.color = color, // Error: color is undefined!
  { tab_id }
);
This WILL work:
const color = 'red';
await glide.content.execute(
  (c: string) => document.body.style.color = c,
  { tab_id, args: [color] }
);

​
DOM Utilities

When executing code in the content process, you have access to the DOM global utility:

​
DOM.create_element()

Helper for creating DOM elements with a convenient API: 
// Simple element
const div = DOM.create_element('div', ['Hello, world!']);

// With attributes
const link = DOM.create_element('a', {
  attributes: {
    href: 'https://example.com',
    target: '_blank'
  },
  textContent: 'Click me'
});

// With children
const container = DOM.create_element('div', [
  DOM.create_element('h1', ['Title']),
  DOM.create_element('p', ['Paragraph text'])
]);

​
DOM.listeners.has()

Check if an element has event listeners: 
const button = document.querySelector('button');
if (DOM.listeners.has(button, 'click')) {
  console.log('Button has click listeners');
}

​
Complete Examples

glide.ts
glide.keymaps.set('normal', '<leader>hl', async ({ tab_id }) => {
  await glide.content.execute(
    (color: string) => {
      const links = document.querySelectorAll('a');
      links.forEach(link => {
        (link as HTMLElement).style.backgroundColor = color;
      });
    },
    { tab_id, args: ['yellow'] }
  );
});

​
Extract and Log Page Data

glide.ts
glide.keymaps.set('normal', '<leader>pa', async ({ tab_id }) => {
  const analysis = await glide.content.execute(
    () => {
      return {
        url: window.location.href,
        title: document.title,
        headings: {
          h1: document.querySelectorAll('h1').length,
          h2: document.querySelectorAll('h2').length,
          h3: document.querySelectorAll('h3').length
        },
        images: document.querySelectorAll('img').length,
        links: document.querySelectorAll('a').length,
        forms: document.querySelectorAll('form').length,
        scripts: document.querySelectorAll('script').length
      };
    },
    { tab_id }
  );
  
  console.log('Page Analysis:', analysis);
});

​
Inject Custom CSS

glide.ts
glide.excmds.create(
  { name: 'dark_mode', description: 'Toggle dark mode on current page' },
  glide.content.fn(() => {
    const styleId = 'glide-dark-mode';
    const existing = document.getElementById(styleId);
    
    if (existing) {
      existing.remove();
    } else {
      const style = DOM.create_element('style', {
        id: styleId,
        textContent: `
          html {
            filter: invert(1) hue-rotate(180deg);
          }
          img, video {
            filter: invert(1) hue-rotate(180deg);
          }
        `
      });
      document.head.appendChild(style);
    }
  })
);

​
Type Reference

​
glide.ContentFunction<F>

interface ContentFunction<F extends (...args: any[]) => any> {
  $brand: "$glide.content.fn";
  fn: F;
  name: string;
}
Represents a function that will be executed in the content process. Created by glide.content.fn().