Integrating with cmdpal

cmdpal can be extended by communicating with the active tab via DOM events. This makes cmdpal extensible by websites, content scripts, and user scripts.

extension

First, listen to the cmdpal event:

addEventListener('cmdpal', (e) => {
  // Your code here
})

Wait for user to open the command palette:

addEventListener('cmdpal', (e) => {
  if (e.detail.open) {
    onCommandPaletteOpen()
  }
})

When the command palette is open, register available commands to be shown on the command palette:

function onCommandPaletteOpen() {
  dispatchEvent(
    new CustomEvent('cmdpal', {
      detail: {
        register: {
          group: 'hello',
          commands: [
            {
              id: 'custom.hello',
              title: 'Say hello',
              description: '^_^',
              detail: 'Displays an alert',
            },
          ],
        },
      },
    }),
  )
}

When the user selects the command, cmdpal dispatches the cmdpal event with e.detail.execute.

addEventListener('cmdpal', (e) => {
  if (e.detail.execute) {
    switch (e.detail.execute.command) {
      case 'custom.hello':
        alert('meow')
        break
    }
  }
})

Look at testpage.html for a complete example based on the above code.

Look at example-integration for an example of a Chrome extension that uses a content script to integrate with cmdpal. It provides one new command to copy all link found on the webpage.

Look at types.ts for the type definition of a cmdpal event object.