Use the template to create your first Zotero plugin in 5 minutes!

hsiangyu_wong
edited September 13, 2022
Hi everyone,

I'm the author of these plugins: PDF Translate, Better Notes, PDF Preview, and Zotero Tag.

I introduce two repos to those who want to create their own plugin and developers that would definitely be helpful:
- The Zotero Plugin Template/Framework: https://github.com/windingwind/zotero-addon-template
- The NPM package of TypeScript definition d.ts for Zotero: https://github.com/windingwind/zotero-types (npm page: https://www.npmjs.com/package/zotero-types). You can also use it as a handbook of Zotero API.

As a Zotero plugin developer, I've been using TypeScript(TS ) in my several plugins for a long time. TS is more advanced than JS, making it easier to maintain the plugins using auto-complete and type-checking and preventing possible type bugs.

I've witnessed many Zotero users who want to create a plugin to customize their Zotero. However, to the best of my knowledge, there are NO Zotero plugin frameworks using TS for beginners and the official documentation is out-of-date.

I've also witnessed many Zotero plugin owners spending a lot of time debugging tons of JavaScript code, without auto-complete and type-checking. Using TS could be a solution, but most developers are not familiar with TS and do not know how to.

If you want to start coding your own Zotero plugin, I recommend you to start with the Zotero Plugin Template and you can run the Hello World demo in 5 minutes if you are familiar with any programming language.

If you are a Zotero plugin maintainer or owner, I strongly recommend you migrate to TS with this typing package!

I and two other authors write a documentation about how to create your Zotero plugin(in Chinese, translate to English using the top-right button(···)->translate): https://zotero.yuque.com/books/share/8d230829-6004-4934-b4c6-685a7001bfa0/sdihk2

*The typing package is not complete or fully correct yet. I test it in my plugins. If you find any declaration missing or incorrect, please post an issue or pr on Github.
  • mjthoraval
    Thank you very much for these resources!
    I have tried to translate the Feishu wiki with Chrome, but it does not seem to work. Do you know any workaround?

    They have an auto-translation option. But it is only available for logged in users. And you need to have a Chinese phone number to create an account (as far as I could see).
    Even after creating an account on Feishu, the auto-translation does not seem to translate the left-side pane with the Workspace Contents or the title links.

    There is an international platform equivalent to Feishu called Lark. But they seem to have completely separate storage, so I could not access a Feishu wiki with a Lark account.

    I am just checking the options to share your documentation to a wider public of English speaking (potential) developers.
  • hsiangyu_wong
    edited August 29, 2022
    Thank you @mjthoraval!

    If you are familiar with any programming language, the GitHub readme might br enough to start a hello world plugin.

    We do have the plan to translate this doc to English. Not everyone in our team can use English fluently, that’s why we decided to write the first version in Chinese.

    We have established a non official organization Zotero-Chinese to maintain CSL, plug-ins, and documents. Many to update recently and we are continuously looking for volunteers to maintain these documents.

    Besides this document for developers and some API documents, we have done the Chinese version of Better Notes plugin document, containing detailed function descriptions and use examples. We are currently working on a Zotero user guide doc and frequently asked Q&A doc.

    All these resources and docs will be open to the community, free and open source. The Chinese version will be released no later than end of this year.

    If anyone is interested in translating them to other languages, we are willing to help.

    May the Zotero community be better
  • emilianoeheyns
    @hsiangyu_wong are you interested in cooperating on something like https://www.npmjs.com/package/generator-zotero-plugin? I very much welcome the typings, will for sure be using that in my own plugins, but the scaffold I have also adds support for installing (many, not all) packages from npm.com in the plugin.
  • qqbb
    @hsiangyu_wong: Thank you, this is quite interesting. It would be nice to have the wiki on GitHub pages.
  • hsiangyu_wong
    @emilianoeheyns
    Of course! I know this repo long time ago. Thanks for your invitation!
    My template use a build-time replace while the generator does this on the first run. I’m not very sure which one is better.
    Maybe we could discuss via email? My email is wyzlshx@foxmail.com

    BTW, the typing repo is still on development and it should be merged to the @types repo, which would be recognized by IDE automatically, once it’s ready. Currently, importing the definitions might cause a build error.
  • hsiangyu_wong
    The zotero-types package is updated. The latest version does not require import and does not cause build errors.
  • hsiangyu_wong
    Hi,
    I've made a new branch `bootstrap` for this template, which is also set to the default branch. If you are about to start your plugin, please use the bootstrap branch, which will be actively maintained and supported in future versions of Zotero.

    The addon will be loaded using `addon/bootstrap.js` and the root object will be injected to `Zotero` as always. Unlike Zutilo, which loads the root object of the addon independently, hooking it under `Zotero` is more convenient.

    See logic init in `src/events.ts` and UI init in`src/views.ts`. The `addon/overlay.xul` is removed now.

    Once more APIs are available for bootstrap mode addons, I'll add them to the `zotero-types` package.
  • hsiangyu_wong
    And @mjthoraval , we put the documentation Yuque, which supports switching to English translation from the top-right button(···):
    https://zotero.yuque.com/books/share/8d230829-6004-4934-b4c6-685a7001bfa0/vec88d

    Thank you for your suggestions!
  • mjthoraval
    Thank you very much! Yuque seems to be much better for automatic translation:
    - It allows using the automatic translation integrated in Yuque without being logged-in. But somehow this automatic translation still misses the ToC on the left.
    - The Chrome automatic translation is working nicely now, while it was not working in Feishu. This also translates the ToC, so it is working nicely.
    Hopefully there is no drawback for you in functionalities. The automatic translation can probably save you the time of maintaining multiple languages.
  • hsiangyu_wong
    edited September 13, 2022
    Glad to know it works! The documentation, as well as the addon template which is the only one that supports the bootstrap mode to the best of my knowledge, will be actively maintained.
    Hope they could help more developers or beginners.
  • SLFretwell
    edited March 27, 2023
    @mjthoraval can you please explain further how you got this to work? I don't see a button to translate Yuque in the top-right corner or any menu, just buttons to Collect, Present, Login/Register, Show Markup Comments, and Show Sidebar. Additionally, when I use translate.google.com or a Google Translate extension in Chrome/Firefox, the page does not fully load (Sparrow warns of "The page is inaccessible, the link to the page is dead or removed" and the page is empty).

    Sparrow seems like a wonderful platform, I wish it supported other languages or would allow non-mainland China phone numbers...

    **Edit** Never mind! Found the other thread: https://forums.zotero.org/discussion/comment/414592/
  • hsiangyu_wong
    @SLFretwell

    Hi, sorry for the late reply.

    The Yuque documentation is a little bit out of date. It's written based on overlay extension, while currently, we would strongly recommend you start with a bootstrapped extension. It is still a good API reference handbook.

    The tools are visible when you click the top-right button on every Yuque documentation page. The icon of translate is “中A”.

    FYR, here are some examples of bootstrapped extensions:
    https://github.com/windingwind/zotero-pdf-translate
    https://github.com/windingwind/zotero-better-notes/tree/z7-1.0.0a
  • arbach
    hey, @hsiangyu_wong

    could you maybe have a look at this thread and help me out? :)

    https://forums.zotero.org/discussion/comment/471884#Comment_471884
Sign In or Register to comment.