InjectorKit
InjectorKit is a library for hooking into web applications. It stores elements' selectors so if something changes only the elements library needs to be updated. It also automatically re-injects elements if needed.
InjectorKit was originally made for use by plugins for BetterDiscord, and comes with elements for Discord's UI by default.
Usage
The main function you'll use is the InjectorKit.get
function. It returns an Element
object, which contains functions to add content before, after or inside that element.
;;// orconst InjectorKit = ;const DiscordElements = ; const DiscordInjectorKit = InjectorKit;const injectorkit = ; injectorkitstart; // Add a menu above the user details panelconst menu = document;menuclassList; const injection = injectorkit;
In a BetterDiscord plugin
For BetterDiscord v2, you can use InjectorKit as an external module. Just add "injectorkit": "^2.0.0"
to the your plugin's dependencies.
{ const DiscordInjectorKit = Dependenciesinjectorkitdefault; // ... return { if !thisinjectorkit thisinjectorkit = thisid; thisinjectorkitstart; } { thisinjectorkit; } { thisinjectorkit; } // ... };
Using callbacks
You can add callbacks to catch when exactly something is injected/removed. (Note: when an element is itself removed there will be no callback.) You can in a callback change properties of each instance of the element to inject, or remove if needed. You can also create an injection with only a callback.
const menu = document;menuclassList; injectorkit;
Using Element.once
You can use the Element.once
function to wait for an element to be added to the DOM.
injectorkit;
If you don't specify a callback, any matching element that is already in the DOM will be ignored and a promise will be returned.
const element = await injectorkit;
Available elements
Discord
Not that much yet.
Name | CSS Selector | Notes |
---|---|---|
app | #app-mount | The root element Discord is mounted at |
server-list | .guilds-wrapper | |
user-details | .container-iksrDt | The user details panel at the bottom of the channel list |
search-bar | .search-2--6aU | |
channel-list-channel | .channels-3g2vYe .containerDefault-7RImuF, .channels-3g2vYe .containerDragAfter-3rB7mB, .channels-3g2vYe .containerDragBefore-12YyA9, .channels-3g2vYe .containerUserOver-2YhVL6 | |
messages | .messages-wrap | |
message | .message-group | A message (this includes messages that have been collapsed into a single container) |
member-list | .channel-members-wrap | |
member-list-member | .channel-members-wrap .member | |
preferences | .layer-kosS71 | The user/app settings layer |
preferences-sidebar | .layer-kosS71 .side-2nYO0F | |
modal | .modal-2LIEKY | |
modal-help | .modal-2LIEKY .need-help-modal | |
modal-addserver | .modal-2LIEKY .create-guild-container | |
modal-addserver-createjoin | .modal-2LIEKY .create-guild-container > .create-or-join | |
modal-addserver-create | .modal-2LIEKY .create-guild-container > .create-guild | |
modal-addserver-join | .modal-2LIEKY .create-guild-container > .join-server | |
tooltips | .tooltips | |
tooltip | .tooltips > * |