super-productivity/docs/wiki/2.15-Develop-a-Plugin.md
Corey Newton c2b18683d8
docs/wiki content v0.7 (#6568)
* docs(wiki): add new Quickstart to help with using Sync

There is a slew of notes that try to explain or show this so a
Quickstart can help bring everything into one place.

* docs(wiki): combine "First Steps" into single note with relevant links

* docs(wiki): update index notes

* docs(wiki): fix remaining broken external links

* docs(wiki): add core developer How-To guides to orient first-time devs

The majority of the documentation is currently spread across several
files ins "docs/" and READMEs. Over time these can be consolidated into
the wiki while retaining the common CONTRIBUTING.md as a valid entry
point.

* docs(wiki): add basic guides for plugins and issue integration

As with the core development docs, there is too much to add here right
now. These notes will serve as a simple entry to other resources.

* docs(wiki): add basic reference note for theming

* docs(wiki): add basic Translation guide

* docs(wiki): rename Theming and linting to clean up headings

* docs(wiki): add heading lint exception for GH-specific nav pages; rework sidebar and index pages

Sidebar should be a quick-access for the more common topics grouped
thematically with the X.00 notes simply enumerating all the notes where
appropriate.
2026-02-20 21:13:38 +01:00

1.5 KiB

Develop a Plugin

How to create and test a custom plugin for Super Productivity.

Plugins extend the app with custom UI, hooks (e.g. on task complete), and API access to tasks, projects, and counters. They run in a sandbox; iframe plugins must inline CSS and JavaScript.

Quick Steps

  1. Create a folder with at least:
    • manifest.json (id, name, version, description, manifestVersion, minSupVersion)
    • plugin.js (runs on load; can register header buttons, shortcuts, hooks)
  2. Optionally add index.html (and set iFrame: true in the manifest) for custom UI.
  3. In the app: SettingsPluginsLoad Plugin from Folder and select your plugin directory.
  4. Use DevTools (F12 or Ctrl+Shift+I) to debug.

Full Documentation and Examples

The full plugin guide and API live in the repository:

docs/plugin-development.md

It covers:

  • Manifest fields, plugin types (JavaScript vs iframe), and security
  • Available API methods (tasks, projects, tags, counters, notifications, dialogs)
  • Theme variables and UI Kit for iframe plugins
  • Best practices and testing

Example plugins in the repo: packages/plugin-dev/yesterday-tasks-plugin, procrastination-buster, api-test-plugin. For UI-heavy plugins: packages/plugin-dev/boilerplate-solid-js. TypeScript API types: packages/plugin-api/src/types.ts.