Chartero

English | 简体中文

Abstract

The name Chartero is a combination of Chart and Zotero. As a Zotero plugin, it can make your library livelier.

User Guide

Troubleshooting

Please disable all other plugins when necessary, then file an issue with the exported debug output. Feel free to ask anything in issue😁

Known Issues

Developer Guide

• 
• Using to generate charts
• Minimap and All Images are rendered by built-in
• All Images uses built-in PDF.js in ChromeWorker to extract images from PDFs.
• UI components are from
• For the legacy Zotero 6 version, please check out this branch.

Directory Structure

• addon: The assets of the plugin, see template for details.

• tools: Scripts for development.

• src

  • src/bootstrap: The entry point of the plugin.
  • src/bootstrap/modules: Implementation of modules.
  • src/vue: The iframe windows using Vue
  • src/vue/summary: At sidebar.
  • src/vue/dashboard: At sidebar tab-panel.
  • src/vue/overview: At new tab.
  • src/vue/utility: The utility functions.
  • src/vue/test: The unit test for Vue components.
  • src/modules: Git-submodules for VS Code debugging.

  • use the following command to initialize the submodules:

    git submodule init
    git submodule update

• src/worker: The worker for data processing.

URL

These URLs are registered in bootstrap.ts, and you can access them via fetch in Zotero.

• chrome://chartero/: Access to folder addon.
• resource://chartero/: Access to folder addon/content.

Preferences

The config.defaultSettings field of package.json defines the default values of preferences. The keys will be automatically replaced when compiling addon.

Locales

All locale strings are defined in locale, which will be loaded dynamically when the plugin starts.

Development Environment

package.json defines the scripts for building and debugging. When executing commands with NODE_ENV=development, the global variable __dev__ will be set to true, and the plugin will switch to the development mode.

• Here are some useful scripts:
  • reload-all: Build and reload the Zotero in production environment.
  • reload-dev: Build in development environment without Vue pages and reload Zotero.
  • build: Build in development environment and reload Zotero.
  • watch: Watch changes of files in src/vue and reload Zotero.
  • dev: Open a hot-reload server for src/vue/test/.

⚡Hot-reload and Breakpoints in Source

With the Chartero running, you can run debug config Vue in the sidebar of the VS Code. This will launch the Vue unit test in Firefox with hot-reload. You can then utilize vue devtools in Firefox as well as set breakpoints in VS Code for single-step debugging.

When running in development environment, Chartero will register a /test/chartero route in HTTP server, accepting any command from a POST request and returning its eval results in JSON format. By accessing this Endpoint, the Vue test module provides a series of "dummy" classes to simulate the Zotero environment. This method is of great reference value for other Zotero client applications.

Record Structure

The data structure of history records is defined in history/data.ts, and the JSON string is like this:

{
    "pages": {
        "0": {
            "p": {
                "1693200000": 6
            }
        }
    },
    "numPages": 27
}

Inter-plugin Compatibility

This section is for developers who have suspected compatibility issues with Chartero.

• Patched the search method of object Zotero.Search to hide the note items that record the reading history.
• Add click events to tabs in the left side-bar of Reader.
• When adding "Overview" tab, contextPane.js throws extraData[ids[0]] is undefined error, caused by the type of this tab being library.

See Also

• 🤩 Awesome Zotero Plugins