MangaBaka
Sign in
Discord Join our cozy Discord community to chat with like-minded people and stay up to date with MangaBaka (and get the BAKA server tag)

Integrate a userscript or extension

Recipes for specific tasks against the API.

Add your own data to MangaBaka pages from a userscript or browser extension, through marked injection points and two DOM events.

Play well with others#↑

A user can run several integrations on the same page.

  • Append to the injection points. Never replace their contents with innerHTML or setHTMLUnsafe().
  • Don't stop events from propagating: other listeners need them too.

Add ?outline_browser_extension_elements=1 to any page URL to outline every injection point in red, hidden ones included. Hover one to see its name.

Announce your integration#↑

Set this attribute from your content script at run_at: document_start, as early as you can:

document.documentElement.setAttribute('data-mb-extension', '1')

Events are sent without it today. A later release will send them only when it is set, so set it now.

Injection points#↑

Every place you may add content carries a data-browser-extension-injection attribute naming it, such as ratings or links. List them on the current page:

document.querySelectorAll('[data-browser-extension-injection]')

Some carry class="hidden" and aren't shown by default. Remove that class when you inject into one.

Use these attributes rather than our layout or class names, which change without notice.

Events#↑

Events tell you when an injection point is ready, so you don't have to poll the DOM.

mb:page:ready#↑

Sent once per page navigation, early in rendering:

document.addEventListener('mb:page:ready', (event) => {
	console.log(event.detail)
})

event.detail has:

  • name: always page.
  • scope: the kind of page, such as series:view:info or series:search. Other pages send other.
  • user: the signed-in user, or null.
  • list_config: the list settings for the page.

mb:element:ready#↑

Sent for each injection point when it comes near the viewport. Hidden ones are sent when the browser is idle. Browsers without IntersectionObserver get no element events, but the attributes are still there to find.

document.addEventListener('mb:element:ready', (event) => {
	const element = document.getElementById(event.detail.element_id)
	console.log(event.detail.name, element)
})

event.detail has:

  • name: the injection point's name.
  • element_id: the DOM id of the element.
  • scope: as above.
  • series: the series the element belongs to.
  • library_series: the user's library entry for that series, when there is one.
  • user and list_config: as above.

An event can fire more than once for the same element, for example after the user navigates or edits a library entry. element_id stays the same, so update what you added instead of adding it again.

Every key in event.detail may be missing, and values can change shape without notice: some carry internal page state. Check each one before you use it.

Feedback#↑

Missing an injection point, or found a bug? Ask on Discord.

  • Use a personal access token: call the API as yourself from your own script. A token gives full access to the account, so never ask users to paste theirs into a script or extension you publish. Use OAuth for that.