cloak

CloakJS: Simplifying Tab Cloaking with JavaScript

CloakJS is a lightweight JavaScript library designed for easy tab cloaking.

Demo

View a live demo at http://cloak.parcoil.com/demo/

Get Started

To start using CloakJS quickly use Jsdelivr:

<script src="https://cdn.jsdelivr.net/gh/Parcoil/cloak@main/src/index.min.js"></script>

Preparing Your Webpage

Before using CloakJS, ensure your webpage is properly configured:

Ensure you have a favicon set:

<link rel="icon" type="image/x-icon" href="your-icon-here" />

Make sure your webpage has a title:

<title>My cool games site</title>

Configuring Cloaks

To configure cloaks on your page:

Create a <select> element with the data tag data-cloak-select:

<select name="cloak" data-cloak-select>
  <option value="default">Default Cloak</option>
  <option value="poop">Poop Cloak</option>
  <option value="purple">Purple Cloak</option>
  <option value="sparkles">Sparkle Cloak</option>
</select>

Define your cloaks in a <script> tag on your settings page:

<script>
  const cloaks = [
    { name: "default", icon: "./cloaks/default.ico", title: "Default Cloak" },
    { name: "poop", icon: "./cloaks/poop.ico", title: "Poop Cloak" },
    { name: "purple", icon: "./cloaks/purple.ico", title: "Purple Cloak" },
    { name: "sparkles", icon: "./cloaks/sparkles.ico", title: "Sparkle Cloak" },
  ];
</script>

Using CloakJS APIs

You can use the following APIs with CloakJS:

getTitle(): Get the current document title.

Example:

const title = cloak.getTitle();
console.log(title); // Outputs the current title of the document

setTitle(newTitle): Set a new document title.

Example:
```
cloak.setTitle("New Title");
```

getFavicon(): Get the current favicon URL.

Example:

const favicon = cloak.getFavicon();
console.log(favicon); // Outputs the current favicon URL

setFavicon(url): Set a new favicon URL.

Example:
```
cloak.setFavicon("new-icon-url.ico");
```
setCloak(newTitle, url): Set both the document title and favicon, and store them in localStorage.

Example:
```
cloak.setCloak("New Cloak Title", "new-cloak-icon-url.ico");
```
reset(): Resets the cloak to the default document title.

Example:
```
cloak.reset();
```

aboutBlank(url): Opens the current tab in a about:blank iframe

Example:

cloak.aboutBlank("https://wikipedia.org");
// defaults to https://www.google.com/search?q=how+many+seconds+in+a+day if no url provided

If you encounter any issues, feel free to create an issue on GitHub.

This site is open source. Improve this page.