Injectable Content Overview

⯇Previous: The Manifest File | Next: Winside API Reference⯈

---

Injectable Content Explanation

The injectable content consists of all the files in your Winsert's source other than the manifest.json file. Injectable content can consist of up to 3 types of files: CSS Stylesheets, JavaScript payloads and, less commonly, an HTML document in the case of making a standalone Winsert that does not rely on an existing web page.

CSS Stylesheets

There is nothing special about the CSS used in Winside compared to how it would be used normally on a web page. The CSS is inserted by Winside and runs as if it were natively part of the page. CSS can be used to adjust the page so it displays correctly in a thin sidebar. If you wish to inject multiple CSS files, simply add them to the styles array in your manifest.json see The Manifest File Documentation for more information.

Hint: If you are attempting to modify an existing page, it will be useful to know the class and ID names used by that page. You can find out this information in the Elements tab of the dev tools in both Winside and your web browser.

JavaScript payloads

Boilerplate Quickstart

Note: It is recommended you use the following wrapper around your code to ensure proper functioning of your payload. Using async allows you to await API calls.

const init = async () => {
  console.log(window.Winside.vars.winsertId)

  // Your code here
}

if (document.readyState) init()
else document.addEventListener("DOMContentLoaded", init)

JavaScript payloads can be used to control elements on the page, perform operations and do anything else you would normally do with JavaScript when developing a regular web page. However, unlike the CSS Stylesheets, the JavaScript payloads injected by Winside do have some special behaviour. These are as follows:

Winside Variables

These are variables that are exposed on the window.Winside.vars object. Currently the only one is winsertId. More variables will be exposed in the future, along with uses for the WinsertId variable.

Winside API

The first of these behaviours is the the Winside API. This exposes functions on the window.WinsideAPI object that communicate with the Winside main process. This allows Winserts to do various things that a web page would not normally be able to do but still in a secure manner, controlled by Winside.

See the Winside API Reference for a full breakdown of API features and how to use them.

Expose Addons

This is special data exposed on the window.Winside.addons object. You likely do not need this data.

See the Expose Addons Reference for a full breakdown of this feature and how to use it.

---

⯇Previous: The Manifest File | Next: Winside API Reference⯈

---

Previous Versions of This Page

2023.01