Plugins

OUTDATED

The information on the following page is outdated for the upcoming v4.0.0 release of Schooltape.

IMPORTANT

For CSS only modifications, see snippets

First, you will need these things:

• name: The name of your plugin (e.g. My New Plugin)
• nameCamelCase: The name of your plugin in camelCase (e.g. myNewPlugin)
• description: A brief description of what your plugin does, without a period at the end (e.g. Adds a new button to the top bar)
• targets (optional): An array of CSS selectors which Schooltape will wait for to load into the DOM before injecting the plugin (e.g. [".timetable"])

Throughout this guide, you will see these between <angle brackets>. Replace them with the appropriate values.

Creating a Plugin

INFO

For a real life example, see this commit!

Boilerplate

1. Append your plugin nameCamelCase to the union type PluginId in src/utils/constants.ts

export type PluginId =
  | "subheader"
  | "scrollSegments"
  // ...
  | "<nameCamelCase>"; 

2. Append your plugin information to the PLUGIN_INFO object in src/utils/constants.ts

export const PLUGIN_INFO: Record<Types.PluginId, Types.PluginInfo> = {
  subheader: {
    name: "Subheader Revamp",
    description: "Adds a clock and current period info to the subheader",
  },
  scrollSegments: {
    name: "Scroll Segments",
    description: "Segments the Schoolbox page into scrollable sections",
  },
  // ...
  <nameCamelCase>: { 
    name: "<name>", 
    description: "<description>", 
  }, 
};

3. Append your plugin settings to the plugins record in src/utils/storage.ts

export const plugins: Record<Types.PluginId, WxtStorageItem<Types.PluginGeneric, any>> = {
  subheader: storage.defineItem<Types.PluginGeneric>("local:plugin-subheader", {
    fallback: {
      toggle: true,
    },
  }),
  scrollSegments: storage.defineItem<Types.PluginGeneric>("local:plugin-scrollSegments", {
    fallback: {
      toggle: true,
    },
  }),
  // ...
  <nameCamelCase>: storage.defineItem<Types.PluginGeneric>("local:plugin-<nameCamelCase>", { 
    fallback: { 
      // here you can define the default settings for your plugin
      toggle: true, 
    }, 
  }), 
};

4. Import your plugin in src/entrypoints/plugins.content.ts

// @ts-ignore
import subheader from "./plugins/subheader";
import scrollSegments from "./plugins/scrollSegments";
// ...
import <nameCamelCase> from "./plugins/<nameCamelCase>"; 

export default defineContentScript({
  matches: ["<all_urls>"],
  runAt: "document_start",
  excludeMatches: EXCLUDE_MATCHES,
  async main() {
    subheader();
    scrollSegments();
    // ...
    <nameCamelCase>(); 
  },
});

5. Create your plugin function in src/entrypoints/plugins with the name of your plugin in camelCase
   • If you are planning to include CSS, HTML, or Svelte alongside your TypeScript:
     1. Create a new folder in src/entrypoints/plugins with the name of your plugin in camelCase (e.g. myNewPlugin).
     2. Inside this folder, you can create a index.ts file for your TypeScript, and any other files you need (e.g. styles.css)
   • If you are only planning to include TypeScript:
     1. Create a new file in src/entrypoints/plugins with the name of your plugin in camelCase (e.g. myNewPlugin.ts)

Now, in your TypeScript file, copy the following boilerplate:

export default function init() { 
  defineStPlugin( 
    "<nameCamelCase>", 
    () => { 
      // Your code here
    }, 
    [<targets>], 
  ); 
} 

Code!

Now that you have dealt with all that boilerplate, you can start actually building your plugin!