Project Structure

After running acodez init, your project directory will look like this:

my-plugin/
├── src/
│   ├── index.ts         ← Plugin entry point
│   ├── commands/
│   │   └── index.ts     ← Command registrations
│   ├── styles/
│   │   └── main.scss    ← Plugin styles (SASS)
│   └── types/
│       └── module.d.ts  ← Custom type declarations
├── dist/                ← Compiled output (auto-generated)
│   └── main.js
├── plugin.json          ← Acode plugin manifest
├── icon.png             ← Plugin icon (auto-resized on build)
├── readme.md            ← Plugin readme (shown in Acode)
├── changelogs.md        ← Plugin changelogs (shown in Acode)
├── package.json
├── tsconfig.json
└── plugin.zip           ← Final distributable (auto-generated)

Key Files

plugin.json — The Manifest

This is the most important file. Acode reads this to register your plugin in the marketplace.

{
  "id": "com.yourname.myplugin",
  "name": "My Plugin",
  "version": "1.0.0",
  "main": "dist/main.js",
  "icon": "icon.png",
  "readme": "readme.md",
  "changelogs": "changelogs.md",
  "keywords": ["editor", "tool"],
  "minVersionCode": 290,
  "price": 0,
  "author": {
    "name": "Your Name",
    "email": "",
    "github": ""
  }
}

src/index.ts — The Entry Point

The core of your plugin. This class is instantiated by Acode when your plugin is loaded.

import plugin from "../plugin.json";
import { registerCommands, unregisterCommands } from "./commands/index";
import style from "./styles/main.scss";

class AcodePlugin {
  baseUrl = "";
  $page!: Acode.WCPage;
  private styleId = `${plugin.id}-styles`;

  async init($page: Acode.WCPage, cacheFile: Acode.FileSystem, cacheFileUrl: string): Promise<void> {
    this.$page = $page;

    const styleSheet = document.createElement("style");
    styleSheet.id = this.styleId;
    styleSheet.innerHTML = style;
    document.head.appendChild(styleSheet);

    registerCommands(this);
  }

  async destroy(): Promise<void> {
    document.getElementById(this.styleId)?.remove();
    unregisterCommands();
  }
}

if (window.acode) {
  const acodePlugin = new AcodePlugin();
  window.acode.setPluginInit(plugin.id, async (baseUrl, $page, { cacheFileUrl, cacheFile }) => {
    acodePlugin.baseUrl = baseUrl.endsWith("/") ? baseUrl : `${baseUrl}/`;
    await acodePlugin.init($page, cacheFile, cacheFileUrl);
  });
  window.acode.setPluginUnmount(plugin.id, () => void acodePlugin.destroy());
}

tsconfig.json — TypeScript Config

Pre-configured for the Acode WebView target (Chrome 90+).

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ES2020",
    "strict": true,
    "moduleResolution": "bundler"
  }
}