mirror of
https://github.com/laurent22/joplin.git
synced 2025-02-07 19:30:04 +02:00
447 lines
19 KiB
HTML
447 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<!--
|
|
|
|
!!! WARNING !!!
|
|
|
|
This file was auto-generated from readme/api/get_started/plugins.md and any manual change
|
|
made to it will be overwritten. To make a change to this file please modify
|
|
the source Markdown file:
|
|
|
|
https://github.com/laurent22/joplin/blob/dev/readme/api/get_started/plugins.md
|
|
|
|
-->
|
|
|
|
<head>
|
|
<meta
|
|
charset="utf-8"
|
|
http-equiv="X-UA-Compatible"
|
|
content="IE=edge,chrome=1"
|
|
/>
|
|
<link rel="icon" href="/images/favicon.png" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="theme-color" content="#000000" />
|
|
<meta name="description" content="Joplin website" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="/css/bootstrap5.0.2.min.css"
|
|
as="style"
|
|
/>
|
|
<link rel="stylesheet" href="/css/fontawesome-all.min.css">
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"
|
|
rel="stylesheet"
|
|
as="style"
|
|
media="all"
|
|
onload="this.media='all'; this.onload = null"
|
|
/>
|
|
<link rel="stylesheet" href="/css/site.css" as="style" />
|
|
<title>Getting started with plugin development | Joplin</title>
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid" id="main-container">
|
|
<div class="with-profile white-bg" id="nav-section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-3">
|
|
<a href="https://joplinapp.org">
|
|
<img
|
|
src="/images/logo-text-blue.svg"
|
|
alt=""
|
|
id="top-logo"
|
|
width="180"
|
|
>
|
|
</a>
|
|
</div>
|
|
<div class="col-9 text-right d-none d-md-block">
|
|
<!-- <a href="#" class="fw500">Help</a> -->
|
|
|
|
<a href="https://joplinapp.org/gsoc2021/index/" class="fw500">GSoC 2021</a>
|
|
<a href="https://discourse.joplinapp.org/" class="fw500">Forum</a>
|
|
|
|
<!--
|
|
<a href="#" class="fw500">Joplin Cloud</a>
|
|
|
|
<a class="button-link btn-blue ml-20" href="#">
|
|
<img src="/images/download-icon.svg" alt="" />
|
|
Download</a
|
|
>
|
|
-->
|
|
</div>
|
|
<div class="col-9 text-right d-block d-md-none">
|
|
<!--
|
|
<span class="pointer"
|
|
><img src="/images/profile-black-icon.png" alt=""
|
|
/></span>
|
|
|
|
-->
|
|
<span class="pointer"
|
|
><img
|
|
src="/images/mobile-menu-black-open-icon.png"
|
|
id="open-menu-mobile"
|
|
alt=""
|
|
/></span>
|
|
|
|
|
|
<div id="menu-mobile">
|
|
|
|
<div class="text-right">
|
|
<img
|
|
src="/images/close-icon.png"
|
|
alt=""
|
|
class="pointer"
|
|
id="close-menu-mobile"
|
|
/>
|
|
</div>
|
|
|
|
<!--
|
|
<div class="text-center">
|
|
<img src="/images/logo-text-blue.svg" alt="" />
|
|
<a href="#" class="fw500 mobile-menu-link">Contacts</a>
|
|
<a href="https://discourse.joplinapp.org/" class="fw500 mobile-menu-link">Forum</a>
|
|
<a href="#" class="fw500 mobile-menu-link">Help</a>
|
|
</div>
|
|
-->
|
|
|
|
<div id="toc-mobile"><div><ul>
|
|
<li>
|
|
<p>Applications</p>
|
|
<ul>
|
|
<li><a href="https://joplinapp.org/desktop/">Desktop application</a></li>
|
|
<li><a href="https://joplinapp.org/mobile/">Mobile applications</a></li>
|
|
<li><a href="https://joplinapp.org/terminal/">Terminal application</a></li>
|
|
<li><a href="https://joplinapp.org/clipper/">Web Clipper</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<p>Support</p>
|
|
<ul>
|
|
<li><a href="https://discourse.joplinapp.org">Joplin Forum</a></li>
|
|
<li><a href="https://joplinapp.org/markdown/">Markdown Guide</a></li>
|
|
<li><a href="https://joplinapp.org/e2ee/">How to enable end-to-end encryption</a></li>
|
|
<li><a href="https://joplinapp.org/conflict/">What is a conflict?</a></li>
|
|
<li><a href="https://joplinapp.org/debugging/">How to enable debug mode</a></li>
|
|
<li><a href="https://joplinapp.org/rich_text_editor/">About the Rich Text editor limitations</a></li>
|
|
<li><a href="https://joplinapp.org/faq/">FAQ</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<p>Joplin API - Get Started</p>
|
|
<ul>
|
|
<li><a href="https://joplinapp.org/api/overview/">Joplin API Overview</a></li>
|
|
<li><a href="https://joplinapp.org/api/get_started/plugins/">Plugin development</a></li>
|
|
<li><a href="https://joplinapp.org/api/tutorials/toc_plugin/">Plugin tutorial</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<p>Joplin API - References</p>
|
|
<ul>
|
|
<li><a href="https://joplinapp.org/api/references/plugin_api/classes/joplin.html">Plugin API</a></li>
|
|
<li><a href="https://joplinapp.org/api/references/rest_api/">Data API</a></li>
|
|
<li><a href="https://joplinapp.org/api/references/plugin_manifest/">Plugin manifest</a></li>
|
|
<li><a href="https://joplinapp.org/api/references/plugin_loading_rules/">Plugin loading rules</a></li>
|
|
<li><a href="https://joplinapp.org/api/references/plugin_theming/">Plugin theming</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<p>Development</p>
|
|
<ul>
|
|
<li><a href="https://github.com/laurent22/joplin/blob/dev/BUILD.md">How to build the apps</a></li>
|
|
<li><a href="https://joplinapp.org/spec/e2ee/">End-to-end encryption spec</a></li>
|
|
<li><a href="https://joplinapp.org/spec/history/">Note History spec</a></li>
|
|
<li><a href="https://joplinapp.org/spec/sync_lock/">Sync Lock spec</a></li>
|
|
<li><a href="https://joplinapp.org/spec/plugins/">Plugin Architecture spec</a></li>
|
|
<li><a href="https://joplinapp.org/spec/search_sorting/">Search Sorting spec</a></li>
|
|
<li><a href="https://joplinapp.org/spec/server_file_url_format/">Server: File URL Format</a></li>
|
|
<li><a href="https://joplinapp.org/spec/server_delta_sync/">Server: Delta Sync</a></li>
|
|
<li><a href="https://joplinapp.org/spec/server_sharing/">Server: Sharing</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<p>Google Summer of Code 2021</p>
|
|
<ul>
|
|
<li><a href="https://joplinapp.org/gsoc2021/index/">Google Summer of Code 2021</a></li>
|
|
<li><a href="https://joplinapp.org/gsoc2021/pull_request_guidelines/">How to submit a GSoC pull request</a></li>
|
|
<li><a href="https://joplinapp.org/gsoc2021/ideas/">Project Ideas</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<p>About</p>
|
|
<ul>
|
|
<li><a href="https://joplinapp.org/changelog/">Changelog (Desktop App)</a></li>
|
|
<li><a href="https://joplinapp.org/changelog_cli/">Changelog (CLI App)</a></li>
|
|
<li><a href="https://joplinapp.org/changelog_server/">Changelog (Server)</a></li>
|
|
<li><a href="https://joplinapp.org/stats/">Stats</a></li>
|
|
<li><a href="https://joplinapp.org/donate/">Donate</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div></div>
|
|
|
|
<!--
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<a class="button-link btn-blue" href="#">
|
|
<img src="/images/download-icon.svg" alt="" />
|
|
Download</a
|
|
>
|
|
<br />
|
|
<p class="light-blue mobile-menu-link-bottom text-center">
|
|
Joplin© 2021, All rights reserved
|
|
<br />
|
|
<a href="#" class="fw500">Terms & Conditions</a>
|
|
<br />
|
|
<a href="#" class="fw500">Privacy Policy</a>
|
|
</p>
|
|
-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page-container page-plugins">
|
|
<div class="container">
|
|
<!--
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h1 class="text-center">
|
|
Page <span class="frame-bg frame-bg-yellow">title</span>
|
|
</h1>
|
|
<p class="text-center">Hello word</p>
|
|
</div>
|
|
</div>
|
|
-->
|
|
|
|
<br />
|
|
<div class="row content-wrapper">
|
|
<div id="toc"><div><ul>
|
|
<li>
|
|
<p>Applications</p>
|
|
<ul>
|
|
<li><a href="https://joplinapp.org/desktop/">Desktop application</a></li>
|
|
<li><a href="https://joplinapp.org/mobile/">Mobile applications</a></li>
|
|
<li><a href="https://joplinapp.org/terminal/">Terminal application</a></li>
|
|
<li><a href="https://joplinapp.org/clipper/">Web Clipper</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<p>Support</p>
|
|
<ul>
|
|
<li><a href="https://discourse.joplinapp.org">Joplin Forum</a></li>
|
|
<li><a href="https://joplinapp.org/markdown/">Markdown Guide</a></li>
|
|
<li><a href="https://joplinapp.org/e2ee/">How to enable end-to-end encryption</a></li>
|
|
<li><a href="https://joplinapp.org/conflict/">What is a conflict?</a></li>
|
|
<li><a href="https://joplinapp.org/debugging/">How to enable debug mode</a></li>
|
|
<li><a href="https://joplinapp.org/rich_text_editor/">About the Rich Text editor limitations</a></li>
|
|
<li><a href="https://joplinapp.org/faq/">FAQ</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<p>Joplin API - Get Started</p>
|
|
<ul>
|
|
<li><a href="https://joplinapp.org/api/overview/">Joplin API Overview</a></li>
|
|
<li><a href="https://joplinapp.org/api/get_started/plugins/">Plugin development</a></li>
|
|
<li><a href="https://joplinapp.org/api/tutorials/toc_plugin/">Plugin tutorial</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<p>Joplin API - References</p>
|
|
<ul>
|
|
<li><a href="https://joplinapp.org/api/references/plugin_api/classes/joplin.html">Plugin API</a></li>
|
|
<li><a href="https://joplinapp.org/api/references/rest_api/">Data API</a></li>
|
|
<li><a href="https://joplinapp.org/api/references/plugin_manifest/">Plugin manifest</a></li>
|
|
<li><a href="https://joplinapp.org/api/references/plugin_loading_rules/">Plugin loading rules</a></li>
|
|
<li><a href="https://joplinapp.org/api/references/plugin_theming/">Plugin theming</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<p>Development</p>
|
|
<ul>
|
|
<li><a href="https://github.com/laurent22/joplin/blob/dev/BUILD.md">How to build the apps</a></li>
|
|
<li><a href="https://joplinapp.org/spec/e2ee/">End-to-end encryption spec</a></li>
|
|
<li><a href="https://joplinapp.org/spec/history/">Note History spec</a></li>
|
|
<li><a href="https://joplinapp.org/spec/sync_lock/">Sync Lock spec</a></li>
|
|
<li><a href="https://joplinapp.org/spec/plugins/">Plugin Architecture spec</a></li>
|
|
<li><a href="https://joplinapp.org/spec/search_sorting/">Search Sorting spec</a></li>
|
|
<li><a href="https://joplinapp.org/spec/server_file_url_format/">Server: File URL Format</a></li>
|
|
<li><a href="https://joplinapp.org/spec/server_delta_sync/">Server: Delta Sync</a></li>
|
|
<li><a href="https://joplinapp.org/spec/server_sharing/">Server: Sharing</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<p>Google Summer of Code 2021</p>
|
|
<ul>
|
|
<li><a href="https://joplinapp.org/gsoc2021/index/">Google Summer of Code 2021</a></li>
|
|
<li><a href="https://joplinapp.org/gsoc2021/pull_request_guidelines/">How to submit a GSoC pull request</a></li>
|
|
<li><a href="https://joplinapp.org/gsoc2021/ideas/">Project Ideas</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<p>About</p>
|
|
<ul>
|
|
<li><a href="https://joplinapp.org/changelog/">Changelog (Desktop App)</a></li>
|
|
<li><a href="https://joplinapp.org/changelog_cli/">Changelog (CLI App)</a></li>
|
|
<li><a href="https://joplinapp.org/changelog_server/">Changelog (Server)</a></li>
|
|
<li><a href="https://joplinapp.org/stats/">Stats</a></li>
|
|
<li><a href="https://joplinapp.org/donate/">Donate</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div></div>
|
|
|
|
<div class="main-content">
|
|
<p><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=E8JMYD2LQ8MMA&lc=GB&item_name=Joplin+Development&currency_code=EUR&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted"><img src="https://joplinapp.org/images/badges/Donate-PayPal-green.svg" alt="Donate using PayPal"></a> <a href="https://github.com/sponsors/laurent22/"><img src="https://joplinapp.org/images/badges/GitHub-Badge.svg" alt="Sponsor on GitHub"></a> <a href="https://www.patreon.com/joplin"><img src="https://joplinapp.org/images/badges/Patreon-Badge.svg" alt="Become a patron"></a> <a href="https://joplinapp.org/donate/#donations"><img src="https://joplinapp.org/images/badges/Donate-IBAN.svg" alt="Donate using IBAN"></a></p>
|
|
<hr>
|
|
<h1>Getting started with plugin development<a name="getting-started-with-plugin-development" href="#getting-started-with-plugin-development" class="heading-anchor">🔗</a></h1>
|
|
<p>In this article you will learn the basic steps to build and test a plugin in Joplin.</p>
|
|
<h2>Setting up your environment<a name="setting-up-your-environment" href="#setting-up-your-environment" class="heading-anchor">🔗</a></h2>
|
|
<p>First you need to setup your environment:</p>
|
|
<ul>
|
|
<li>Make sure you have <a href="https://nodejs.org/">Node.js</a> and <a href="https://git-scm.com">git</a> installed.</li>
|
|
<li>Install <a href="https://joplinapp.org/">Joplin</a></li>
|
|
</ul>
|
|
<p>But first install <a href="https://yeoman.io/">Yeoman</a> and the <a href="https://github.com/laurent22/joplin/tree/dev/packages/generator-joplin">Joplin Plugin Generator</a>:</p>
|
|
<pre><code>npm install -g yo generator-joplin
|
|
</code></pre>
|
|
<p>Then, in the directory where you plan to develop the plugin, run:</p>
|
|
<pre><code>yo joplin
|
|
</code></pre>
|
|
<p>This will generate the basic scafolding of the plugin. At the root of it, there are a number of configuration files which you normally won't need to change. Then the <code>src/</code> directory will contain your code. By default, the project uses TypeScript, but you are free to use plain JavaScript too - eventually the project is compiled to plain JS in any case.</p>
|
|
<p>The <code>src/</code> directory also contains a <a href="https://joplinapp.org/api/references/plugin_manifest/">manifest.json</a> file, which contains the various information about the plugin that was set in the inital generation of the scaffolding, such as its name, homepage URL, etc. You can edit this at any time, but editing it after it has been published may cause users to have to download it again.</p>
|
|
<h2>Setup Source Control<a name="setup-source-control" href="#setup-source-control" class="heading-anchor">🔗</a></h2>
|
|
<p>In your plugin directory, run:</p>
|
|
<pre><code>git init
|
|
</code></pre>
|
|
<p>This will setup source control.</p>
|
|
<h2>Run Joplin in Development Mode<a name="run-joplin-in-development-mode" href="#run-joplin-in-development-mode" class="heading-anchor">🔗</a></h2>
|
|
<p>You should test your plugin in <a href="https://joplinapp.org/api/references/development_mode/">Development Mode</a>. Doing so means that Joplin will run using a different profile, so you can experiment with the plugin without risking to accidentally change or delete your data.</p>
|
|
<h2>Building the plugin<a name="building-the-plugin" href="#building-the-plugin" class="heading-anchor">🔗</a></h2>
|
|
<p>From the scaffolding, <code>src/index.ts</code> now contains the basic code for a Hello World plugin.</p>
|
|
<p>Two things to note:</p>
|
|
<ol>
|
|
<li>It contains a call to <a href="https://joplinapp.org/api/references/plugin_api/classes/joplinplugins.html#register">joplin.plugins.register</a>. All plugins call this to register the plugin in the app.</li>
|
|
<li>An <code>onStart()</code> event handler method, which is called when the plugin starts.</li>
|
|
</ol>
|
|
<p>To try this basic plugin, compile the app by running the following from the root of the project:</p>
|
|
<pre><code>npm run dist
|
|
</code></pre>
|
|
<p>Doing so should compile all the files into the <code>dist/</code> directory. This is where Joplin will load the plugin.</p>
|
|
<h2>Install the plugin<a name="install-the-plugin" href="#install-the-plugin" class="heading-anchor">🔗</a></h2>
|
|
<p>Open Joplin <strong>Configuration > Plugins</strong> section. Under Advanced Settings, add the plugin path in the <strong>Development plugins</strong> text field.<br>
|
|
This should be the path to your main plugin directory, i.e. <code>path/to/your/root/plugin/directory</code>.</p>
|
|
<h2>Test the Plugin, Hello World!<a name="test-the-plugin-hello-world" href="#test-the-plugin-hello-world" class="heading-anchor">🔗</a></h2>
|
|
<p>Restart the Development app from the command line/terminal, and Joplin should load the plugin and execute its <code>onStart</code> handler. If all went well you should see the test message in the plugin console: "Hello world. Test plugin started!". You will also be able to see the information from the manifest in the <strong>Settings > Plugins</strong></p>
|
|
<h1>Next steps<a name="next-steps" href="#next-steps" class="heading-anchor">🔗</a></h1>
|
|
<p>Great, you now have the basics of a working plugin!</p>
|
|
<ul>
|
|
<li>Start the <a href="https://joplinapp.org/api/tutorials/toc_plugin/">plugin tutorial</a> to learn how to use the plugin API.</li>
|
|
<li>See what the plugin API supports, <a href="https://joplinapp.org/api/references/plugin_api/classes/joplin.html">Plugin API reference</a>.</li>
|
|
<li>For plugin feature ideas, see this thread: <a href="https://discourse.joplinapp.org/t/any-suggestions-on-what-plugins-could-be-created/9479">https://discourse.joplinapp.org/t/any-suggestions-on-what-plugins-could-be-created/9479</a></li>
|
|
</ul>
|
|
|
|
<div class="bottom-links">
|
|
<a href="https://github.com/laurent22/joplin/blob/dev/readme/api/get_started/plugins.md">
|
|
<i class="fab fa-github"></i> Improve this doc
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="darkblue-bg">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-3 d-none d-md-block">
|
|
<img src="/images/logo-text.svg" alt="" width="150" />
|
|
</div>
|
|
<!--
|
|
<div class="col-12 col-md-6">
|
|
<p class="text-center">
|
|
<a href="#">Help</a>
|
|
|
|
<a href="https://discourse.joplinapp.org/">Forum</a>
|
|
|
|
<a href="#">Contacts</a>
|
|
</p>
|
|
</div>
|
|
<div class="col-12 col-md-3">
|
|
<br class="d-block d-md-none" />
|
|
<div class="text-right">
|
|
<a href="#" class="button-link btn-blue"
|
|
><img src="/images/download-icon.svg" alt="" />
|
|
Download</a
|
|
>
|
|
</div>
|
|
</div>
|
|
-->
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<hr />
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12 col-md-6">
|
|
<img
|
|
src="/images/logo-text.svg"
|
|
width="120"
|
|
class="img-center d-block d-md-none"
|
|
alt=""
|
|
/>
|
|
<br class="d-block d-md-none" />
|
|
<p class="text-center-sm">Copyright (C) 2016-2021 Laurent Cozic, all rights reserved</p>
|
|
</div>
|
|
<div class="col-12 col-md-6 right-links">
|
|
<p class="text-right text-center-sm">
|
|
<!--
|
|
<a href="#">Terms & Conditions</a>
|
|
<span class="d-none d-md-inline"> </span>
|
|
<br class="d-block d-md-none" />
|
|
<br class="d-block d-md-none" />
|
|
-->
|
|
<a href="https://github.com/laurent22/joplin/" class="github-link"><i class="fab fa-github"></i> GitHub Repository</a>
|
|
<a href="/privacy/">Privacy Policy</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<script
|
|
src="/js/jquery-3.6.0.min.js"
|
|
rel="preload"
|
|
as="script"
|
|
></script>
|
|
<script src="/js/script.js"></script>
|
|
|
|
<script>
|
|
function stickyHeader() {
|
|
return; // Disabled
|
|
|
|
if ($(window).scrollTop() > 179) {
|
|
$('.nav').addClass('sticky');
|
|
} else {
|
|
$('.nav').removeClass('sticky');
|
|
}
|
|
}
|
|
|
|
$(window).scroll(function() {
|
|
stickyHeader();
|
|
});
|
|
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
|
ga('create', 'UA-103586105-1', 'auto');
|
|
ga('send', 'pageview');
|
|
</script>
|
|
</body>
|
|
</html>
|