English | 简体中文
Yank Note supports "JavaScript plugins" and "custom CSS styles". If you want to share your own plugins and styles with others, you can package them into an extension for distribution.
An extension is composed of basic information, JavaScript plugins, CSS styles, and resources, and is distributed in the form of an NPM package.
graph TB
Meta[Meta: package.json] --> Extension[(Extension)]
Plugin[Plugin: index.js] --> Extension
Style[Style: style.css] --> Extension
Themes[Themes: a.css, b.css] --> Extension
Resources[Resources: a.png, b.ttf] --> Extension
For plugin development, you can refer to the Plugin Development Guide, for custom styles, you can refer to Custom Styles, and the rules for writing metadata are in the following sections of this document.
There is an example extension repository that can be used as a reference for the whole process.
Please include README.md
and CHANGELOG.md
files in the root directory of the extension package for display to users in the extension management.
The extension information is saved in package.json
.
The fields in package.json
can refer to package.json | npm Docs, where the name
, version
, description
, homepage
, author
, license
fields are required.
In addition to the above fields, you may also need to define the following fields:
Field | Type | Description | Example |
---|---|---|---|
displayName |
Required string
|
Display name | Hello World |
icon |
Required string
|
Icon | ./icon.png |
engines |
Required { 'yank-note': string }
|
Compatible Yank Note version range | {"node": ">=14.6.0", "yank-note": "^3.30.0"} |
main |
Optional string
|
JavaScript plugin file | ./dist/index.js |
style |
Optional string
|
CSS style file | ./dist/style.css |
themes |
Optional Array<{ name: string, css: string }>
|
Theme style files. | [{"name": "Red", "css": "./themes/demo1.css"}] |
Internationalization
If you want to support multiple languages for the displayName
and description
fields, you can define multiple ones in the form of <key>_<LANGUAGE>
. LANGUAGE should be in uppercase.
{
"displayName": "HelloWorld",
"displayName_EN": "HelloWorld",
"displayName_ZH-CN": "你好世界",
"description": "hello world!",
"description_ZH-CN": "你好世界!"
}
The JavaScript entry file is defined in the main
field of package.json
.
Since plugins run in the browser, they do not support require
or import
syntax and need to be packaged in advance.
- Define the plugin style file in the
style
ofpackage.json
, and load it with the plugin. - Define the theme style file in the
themes
ofpackage.json
, and users can select and use it in the "Settings".
The Yank Note Extension Directory will be added to the application's static file search directory.
When using static resources, pay attention to whether the path is correctly concatenated. You can use relative paths or call the getExtensionBasePath
method to get the path.
When developing a plugin, it is recommended to open Yank Note in the Chrome browser for easy debugging. To open it: right-click the tray icon --> click "Open in browser"
- Use the scaffold to create a project:
yarn create yank-note-extension
. It is suggested to start the package name withyank-note-extension-
. - After entering the project, install dependencies:
yarn install
- Link the current directory to the Yank Note Extension Directory:
yarn run link-extension
- Start development:
yarn run dev
- Refresh the browser page
- Click "Tools" --> "Extension Center" to enable the extension under development
Now you should be able to see the "Hello World" menu in the "status bar" menu.
After you have finished developing, if you want to make the extension available for others to use, there are two ways:
- Manual distribution: Inform users of the download method and installation steps. Users place the extension in the Yank Note Extension Directory, and then enable it in the extension management panel.
- Use the Yank Note Extension Registry for distribution, where users can download/upgrade directly from the extension management panel. Please visit yank-note-registry for more information.