diff --git a/cloak.js b/cloak.js deleted file mode 100644 index f792f6d..0000000 --- a/cloak.js +++ /dev/null @@ -1 +0,0 @@ -var a='\x1b[91m[Parcoil Cloak]\x1b[0m',b={getFavicon(){const A=document.querySelectorAll('link[rel="icon"]');return A.length>0?A[0].href:null},setFavicon(_){const B=document.querySelectorAll('link[rel="icon"]');for(const c of B)c.href=_},getTitle(){return document.title},setTitle(C){document.title=C},setCloak(_a,_b){document.title=_a;const _c=document.querySelectorAll('link[rel="icon"]');for(const d of _c)d.href=_b;localStorage.setItem('cloakTitle',_a);localStorage.setItem('cloakFavicon',_b)},init(){let D=localStorage.getItem('cloakTitle');let _B=localStorage.getItem('cloakFavicon');if(!D||!_B){console.log(a,'Initializing cloak settings...');const _A=this.getFavicon();!D&&localStorage.setItem('cloakTitle',this.getTitle());if(!_B&&_A)localStorage.setItem('cloakFavicon',_A);D=localStorage.getItem('cloakTitle');_B=localStorage.getItem('cloakFavicon')}}};document.addEventListener('DOMContentLoaded',()=>{b.setFavicon(localStorage.getItem('cloakFavicon'));b.setTitle(localStorage.getItem('cloakTitle'));var e=document.getElementById('cloakSelect');e?.addEventListener('change',()=>{var E=e.value,aA=cloaks.find(aB=>aB.name===E);aA?(b.setCloak(aA.title,aA.icon),console.log(`Selected cloak title: ${aA.title}`)):(console.error(`Cloak '${E}' not found in cloaks array.`))})});b.init();export default 'cloak'; diff --git a/example/cloaks/favicon.ico b/demo/cloaks/favicon.ico similarity index 100% rename from example/cloaks/favicon.ico rename to demo/cloaks/favicon.ico diff --git a/example/cloaks/poop.ico b/demo/cloaks/poop.ico similarity index 100% rename from example/cloaks/poop.ico rename to demo/cloaks/poop.ico diff --git a/example/cloaks/purple.ico b/demo/cloaks/purple.ico similarity index 100% rename from example/cloaks/purple.ico rename to demo/cloaks/purple.ico diff --git a/example/cloaks/sparkles.ico b/demo/cloaks/sparkles.ico similarity index 100% rename from example/cloaks/sparkles.ico rename to demo/cloaks/sparkles.ico diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..038ffdb --- /dev/null +++ b/demo/index.html @@ -0,0 +1,44 @@ + + + + + + + My cool games site + + + + + +
+
+
+ Favicon +

Default Cloak

+
+

The cloak is set to:

+
+ Go to settings page + Showcase +

+ Go to the other page to change cloak (simulated settings page) +

+
+
+ +
+ + + diff --git a/example/main.css b/demo/main.css similarity index 100% rename from example/main.css rename to demo/main.css diff --git a/demo/main.js b/demo/main.js new file mode 100644 index 0000000..bb2d356 --- /dev/null +++ b/demo/main.js @@ -0,0 +1,29 @@ +const cloakText = document.getElementById("cloakText"); + +const favicon = cloak.getFavicon(); + +function updateCloakInfo() { + const title = cloak.getTitle(); + const icon = cloak.getFavicon(); + + const faviconImage = document.getElementById("favicon"); + if (faviconImage) { + faviconImage.src = icon; + } + + if (cloakText) { + cloakText.textContent = `The cloak is set to: ${title}`; + } + + document.querySelector("h1").textContent = title; +} + +document.addEventListener("DOMContentLoaded", () => { + updateCloakInfo(); +}); + +window.addEventListener("storage", (event) => { + if (event.key === "cloakTitle" || event.key === "cloakFavicon") { + updateCloakInfo(); + } +}); diff --git a/demo/other.html b/demo/other.html new file mode 100644 index 0000000..1ce0f38 --- /dev/null +++ b/demo/other.html @@ -0,0 +1,65 @@ + + + + + + Cloak Settings + + + + + + + +
+
+

Cloak Settings

+ Go home +
+ + +
+
+ +
+ + + diff --git a/demo/showcase.html b/demo/showcase.html new file mode 100644 index 0000000..c0fca02 --- /dev/null +++ b/demo/showcase.html @@ -0,0 +1,58 @@ + + + + + + + CloakJS Showcase + + + + + +
+
+

CloakJS Showcase

+

+ Discover websites using CloakJS for enhanced privacy and + customization: +

+ +
+ +
+
+ lunaar image +
+
+

Lunaar.org

+

A Unblocked games site made by Parcoil.

+
+ Visit Site +
+
+
+

Add yours by making a pull request!

+
+ +
+ Back to Home +
+
+ +
+ + + diff --git a/demo/sites/lunaar.png b/demo/sites/lunaar.png new file mode 100644 index 0000000..81b7ee9 Binary files /dev/null and b/demo/sites/lunaar.png differ diff --git a/example/index.html b/example/index.html deleted file mode 100644 index 65e0cf8..0000000 --- a/example/index.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - My cool games site - - - - -
- -

Default Cloak

-

The cloak is set to:

-
- Go to other page -

go to the other page to change cloak (simulated settings page)

- - - - diff --git a/example/main.js b/example/main.js deleted file mode 100644 index e5b57dc..0000000 --- a/example/main.js +++ /dev/null @@ -1,10 +0,0 @@ -const cloakText = document.getElementById("cloakText"); -const favicon = cloak.getFavicon(); - -function updateText() { - const title = cloak.getTitle(); - cloakText.textContent += title; - console.log(title); -} -updateText(); -window.onload = function () {}; diff --git a/example/other.html b/example/other.html deleted file mode 100644 index d45ca03..0000000 --- a/example/other.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - Document - - - - - -

this is to test cloak for multipages

- Go home -
- - -
- - - diff --git a/package.json b/package.json index 692b34e..85e8493 100644 --- a/package.json +++ b/package.json @@ -2,11 +2,7 @@ "name": "@parcoil/cloak", "version": "1.0.0", "description": "Tab Cloaking lib", - "main": "index.js", - "scripts": { - "build": "minify index.js > cloak.js && npm publish --access public", - "min": "minify index.js > cloak.js" - }, + "main": "src/index.js", "repository": { "type": "git", "url": "git+https://github.com/Parcoil/cloak.git" @@ -14,15 +10,13 @@ "keywords": [ "cloak", "tabcloak", - "proxy" + "proxy", + "unblocked" ], "author": "Parcoil Network", "license": "CC0", "bugs": { "url": "https://github.com/Parcoil/cloak/issues" }, - "homepage": "https://github.com/Parcoil/cloak#readme", - "dependencies": { - "minify": "^11.4.0" - } + "homepage": "https://github.com/Parcoil/cloak#readme" } diff --git a/readme.md b/readme.md index 2850aec..2572423 100644 --- a/readme.md +++ b/readme.md @@ -6,6 +6,8 @@ CloakJS is a lightweight JavaScript library designed for easy tab cloaking. ![Demo](https://github.com/Parcoil/cloak/blob/main/assets/demo.gif) +View a live demo at [](DEMO) + ## Get Started To start using CloakJS quickly use Jsdelivr: @@ -34,10 +36,10 @@ Make sure your webpage has a title: To configure cloaks on your page: -1. Create a `` element with the data tag `data-cloak-select`: ```html - @@ -45,7 +47,7 @@ To configure cloaks on your page: ``` -2. Define your cloaks in a ` ``` -### Using CloakJS APIs +## Using CloakJS APIs You can use the following APIs with CloakJS: - **getTitle()**: Get the current document title. - + Example: + ```javascript const title = cloak.getTitle(); console.log(title); // Outputs the current title of the document @@ -73,6 +76,7 @@ You can use the following APIs with CloakJS: - **setTitle(newTitle)**: Set a new document title. Example: + ```javascript cloak.setTitle("New Title"); ``` @@ -80,6 +84,7 @@ You can use the following APIs with CloakJS: - **getFavicon()**: Get the current favicon URL. Example: + ```javascript const favicon = cloak.getFavicon(); console.log(favicon); // Outputs the current favicon URL @@ -88,6 +93,7 @@ You can use the following APIs with CloakJS: - **setFavicon(url)**: Set a new favicon URL. Example: + ```javascript cloak.setFavicon("new-icon-url.ico"); ``` @@ -95,6 +101,7 @@ You can use the following APIs with CloakJS: - **setCloak(newTitle, url)**: Set both the document title and favicon, and store them in localStorage. Example: + ```javascript cloak.setCloak("New Cloak Title", "new-cloak-icon-url.ico"); ``` diff --git a/index.js b/src/index.js similarity index 84% rename from index.js rename to src/index.js index 07fe4fc..9e0253e 100644 --- a/index.js +++ b/src/index.js @@ -16,9 +16,8 @@ const cloak = { document.title = newTitle; }, setCloak(newTitle, url) { - document.title = newTitle; - const icons = document.querySelectorAll('link[rel="icon"]'); - icons.forEach((icon) => (icon.href = url)); + this.setTitle(newTitle); + this.setFavicon(url); localStorage.setItem("cloakTitle", newTitle); localStorage.setItem("cloakFavicon", url); }, @@ -40,10 +39,12 @@ const cloak = { cloakFavicon = localStorage.getItem("cloakFavicon"); } - // console.log(logo, `Title: ${cloakTitle} Favicon URL: ${cloakFavicon}`); + this.setCloak(cloakTitle, cloakFavicon); }, }; +window.cloak = cloak; + document.addEventListener("DOMContentLoaded", () => { let savedTitle = localStorage.getItem("cloakTitle"); let savedFavicon = localStorage.getItem("cloakFavicon"); @@ -51,7 +52,7 @@ document.addEventListener("DOMContentLoaded", () => { cloak.setFavicon(savedFavicon); cloak.setTitle(savedTitle); - const cloakSelect = document.getElementById("cloakSelect"); + const cloakSelect = document.querySelector("[data-cloak-select]"); if (cloakSelect) { cloakSelect.addEventListener("change", () => { @@ -62,7 +63,7 @@ document.addEventListener("DOMContentLoaded", () => { if (selectedCloak) { cloak.setCloak(selectedCloak.title, selectedCloak.icon); - console.log(`Selected cloak title: ${selectedCloak.title}`); + console.log(logo, `Set cloak to: ${selectedCloak.title}`); } else { console.error( `Cloak '${selectedCloakName}' not found in cloaks array.` @@ -72,6 +73,4 @@ document.addEventListener("DOMContentLoaded", () => { } }); - cloak.init(); -