Advanced Plugin Topics

How does plugin loading work?

All of the script files that belong to a plugin are directly inserted/mounted into a <script> tag in the document. They are automatically combined and wrapped inside of a helper function that exposes the tmcp API object. This means that all of the scripts for a plugin are included in their own closure, and can benefit from top-level await.

How do I access Electron or Node APIs?

The electron remote package is available, so you can use require() to access needed APIs. Typically you'd require the remote into an object, and use that to require anything else:

const remote = require('@electron/remote');
const fs = remote.require('fs');
const path = remote.require('path');
// etc.

You can use this require function to load any node_modules you may want to install into your plugin's folder:

const remote = require('@electron/remote');
const path = remote.require('path');
const somePackage = remote.require(path.join(__dirname, 'node_modules', 'package_name'));

How do I make a custom interface for a result display?

When setting the display type to html you can include any arbitrary HTML you'd like. It is also possible to create an HTML file in your plugin folder and load that for use:

// Require packages
const remote = require('@electron/remote');
const fsp = remote.require('fs/promises');
const path = remote.require('path');

// Read a custom HTML file
const htmlPath = path.join(__dirname, 'custom-display.html');
const htmlContents = await fsp.readFile(htmlPath, 'utf-8');

tmcp.addItem({
  text: 'Custom item',
  action: () => {},
  display: {
    type: 'html',
    content: htmlContents // Use the HTML content
  },
  keepOpen: true
});

How do I extend the functionality of TMCP itself?

Plugins allow any arbitrary code, so some advanced things may be possible by interacting directly with the DOM. If you have features in mind for TMCP you can always open a pull request, however.