Setup

In order to get started building your plugin with JS you'll first need to make sure that:

• You know the differences between Java and JavaScript.
• You know the differences between Front-end and Back-end development.
• You have installed Node.js and Node.js-compatible package manager.
• You have heard of Webpack, Rollup, or Vite.
• You have a basic knowledge of JavaScript.
• You know how to make a simple web app in your preferred JS framework.
• You won't make a malware.

Selecting your JS framework

Anisun is written in Next.js, which is based on React. Our extension system allows website to share parts of React as the dependencies to plugins, so your correctly configured React bundles will be smaller compared to React projects with default configurations. For example, one of my React plugins is 210 KBs in size when using default configuration and 35 KBs in size when using optimized configuration with shared React dependency. There is a small problem with that optimization tho, you will see more on the next page.

For other JS framework, you need to bundle the whole framework into the output code. Otherwise it won't work.

But don't worry, it's not really a big deal. Vue will bundle a simple project under 80 KBs, Svelte will manage to get 22 KBs (even smaller than optimized React bundle, huh?)

Configuring output files

INFO

The key feature here is to bundle JS & CSS code into a single .js file.

Webpack

Set output.chunkFormat or optimization.splitChunks (whatever works for you) to false

Also, you will probably need to install style-loader package to bundle CSS code too.

Rollup

Set output.manualChunks to undefined

Also, you will probably need to install cssInjectedByJsPlugin package to bundle CSS code too.

Starter templates

If you don't want to configure everything by yourself, then just use anisun-extension-starters.