Several improvements

.gitignore

@@ -1,3 +1,4 @@
 /node_modules/
 /.vscode/
+/build/
 package-lock.json

README.md

@@ -1,66 +1,33 @@
-# README
+# Vanita
 
-> :warning: **NEVER DOWNLOAD OR RUN CODE THAT COMES FROM SOMEWHERE ELSE EVEN IF SOMETHING OR SOMEONE ARE CLAIMING THAT IT'S FROM THIS REPOSITORY. ONLY RUN THE CODE FROM THIS REPOSITORY, OR EVEN BETTER, BUILD IT YOURSELF. RUNNING CODE THAT YOU DO NOT UNDERSTAND ALWAYS COMES WITH RISK OF ACCOUNT THEFT AND OTHER MALICIOUS ACTIONS, BE CAREFUL!**
+![extension method showcase gif](/extension/logo.png)
 
-## About :placard:
+## About
 
-RWP stands for Roblox web panel, it's a code snippet that you can run via developer console or through the provided browser extension to try out early Roblox site features and get extended functionality without any programming experience.
+Enhances the Roblox website experience with extra functionality.
 
-## Usage :customs:
+What are the main features?
 
-Both methods work well, however, installing browser extension will be better on the long run.
+- Save beyond the 50 outfits limit with outfits tab.
 
-### Extension Method :electric_plug:
+Why choose this over other Roblox extensions?
 
-![extension method showcase gif](/examples/extension-method.gif)
+- Open-source (MIT license).
+- Roblox site stays vanilla by default, some features may allow you to modify certain parts of the site when enabled.
+- No data collection.
+- Free, but donations are appreciated.
 
-1. Download this GitHub repository onto your computer.
-
-2. Extract the zip file.
-
-3. Go to [`chrome://extensions`](chrome://extensions).
-
-4. Enable "Developer mode" toggle.
-
-5. Click "Load unpacked" button.
-
-6. Select the [`extension`](extension) folder and click "Select Folder".
-
-7. Go to <https://www.roblox.com/> and click on the extension icon.
-
-8. Check "Injection Enabled" checkbox and refresh the page.
-
-### Console Method :computer:
-
-![extension method showcase gif](/examples/console-method.gif)
-
-1. Go to [`dist/release.js`](dist/release.js)
-
-2. Click "Raw".
-
-3. Select the entire page (Ctrl+A).
-
-4. Copy to clipboard (Ctrl+C).
-
-5. Go to <https://www.roblox.com/>.
-
-6. Open developer console either by pressing (F12) or by the opening context menu (Right Click) and clicking "Inspect".
-
-7. Click on the "Console" tab.
-
-8. Paste from clipboard (Ctrl+V) into the console and press (Enter).
-
-## Building :hammer:
+## Building
 
-If you don't trust the [`dist/release.js`](dist/release.js) file *(I dont blame you if you do)*, you can build it yourself.
+If you don't trust the [`extension/embedded.js`](extension/embedded.js) file *(I dont blame you if you do)*, you can build it yourself.
 
-### Requirements :passport_control:
+### Requirements
 
 1. Installed NodeJS runtime environment.
 
 2. Installed NPM package manager.
 
-### Instructions :notebook:
+### Instructions
 
 1. Download this GitHub repository onto your computer.
 
@@ -70,8 +37,8 @@ If you don't trust the [`dist/release.js`](dist/release.js) file *(I dont blame
 
 4. Run `npm install` to install dependencies that the project relies on and wait until it's done.
 
-5. Run `npm run build` to build the [`dist/release.js`](dist/release.js) file and wait until it's done.
+5. Run `npm run build` to build the [`extension/embedded.js`](extension/embedded.js) file and wait until it's done.
 
-## Credits :medal_sports:
+## Credits
 
 [@Julli4n](https://github.com/Julli4n) - [For discovering the API endpoint and documenting it](https://gist.github.com/Julli4n/13016b11e80109ba643ab9e90b431e02).

extension/manifest.json

@@ -1,21 +1,31 @@
 {
-	"name": "Roblox Web Panel",
-	"description": "RWP stands for Roblox web panel, it's a code snippet that you can run via developer console to try out early Roblox site features before they're officially out without any programming experience.",
-	"version": "1.0.0",
+	"name": "Vanita",
+	"description": "Enhances the Roblox website experience with extra functionality.",
+	"version": "2.0.0",
 	"manifest_version": 3,
-	"background": {
-		"service_worker": "background.js"
-	},
 	"permissions": [
-		"storage",
-		"activeTab",
-		"scripting",
-		"tabs"
+		"storage"
 	],
-	"action": {
-		"default_popup": "popup.html"
-	},
-	"host_permissions": [
+	"content_scripts": [
+		{
+			"matches": ["https://www.roblox.com/*"],
+			"js": ["embedded.js"]
+		}
+	],
+	"host_permissions":[
 		"https://www.roblox.com/*"
+	],
+	"icons": {
+		"128": "logo.png"
+	},
+	"web_accessible_resources": [
+		{
+			"resources": [
+				"logo.png"
+			],
+			"matches": [
+				"https://www.roblox.com/*"
+			]
+		}
 	]
 }

loader.js

@@ -2,6 +2,11 @@ const container = document.createElement("div");
 container.id = "app";
 document.body.appendChild(container);
 
+const toggleBtn = document.createElement("div");
+toggleBtn.id = "app-toggle";
+toggleBtn.textContent = "Vanita";
+document.body.appendChild(toggleBtn);
+
 const style = document.createElement("style");
 /*
 	Will be replaced with actual css by pack.js.

package.json

@@ -1,5 +1,5 @@
 {
-	"name": "rwp",
+	"name": "vanita",
 	"author": {
 		"name": "Daw588",
 		"url": "https://daw588.glitch.me/"
@@ -18,6 +18,7 @@
 	"devDependencies": {
 		"@sveltejs/vite-plugin-svelte": "^1.4.0",
 		"@tsconfig/svelte": "^3.0.0",
+		"@types/chrome": "^0.0.216",
 		"@types/fs-extra": "^11.0.1",
 		"@types/uglify-js": "^3.17.1",
 		"sass": "^1.58.1",
@@ -28,7 +29,8 @@
 		"typescript": "^4.9.5",
 		"uglify-js": "^3.17.4",
 		"vite": "^4.1.1",
-		"vite-plugin-html": "^3.2.0"
+		"vite-plugin-html": "^3.2.0",
+		"zip-a-folder": "^1.1.5"
 	},
 	"dependencies": {
 		"clipboardy": "^3.0.0",

scripts/copy.js

@@ -1,5 +1,5 @@
 import fs from "node:fs/promises";
 import clipboard from "clipboardy";
 
-const relaseJs = await fs.readFile("dist/release.js", { encoding: "utf-8" });
+const relaseJs = await fs.readFile("extension/embedded.js", { encoding: "utf-8" });
 await clipboard.write(relaseJs);

scripts/pack.js

@@ -2,6 +2,7 @@ import fs from "node:fs/promises";
 import fsExtra from "fs-extra";
 import path from "node:path";
 import uglify from "uglify-js";
+import { zip } from "zip-a-folder";
 
 /**
  * Finds file with desired extension in a given directory.
@@ -20,8 +21,8 @@ async function getFilePathByExtension(directoryPath, extension) {
 
 // Paths to files needed to be packed
 const loaderJsPath = "loader.js";
-const indexJsPath = await getFilePathByExtension("dist/assets", ".js");
-const indexCssPath = await getFilePathByExtension("dist/assets", ".css");
+const indexJsPath = await getFilePathByExtension("build/assets", ".js");
+const indexCssPath = await getFilePathByExtension("build/assets", ".css");
 
 // Get raw contents
 let loaderJsRaw = await fs.readFile(loaderJsPath, { encoding: "utf-8" });
@@ -49,8 +50,6 @@ const indexJsMin = uglify.minify(indexJsRaw).code;
 */
 const finalCode = loaderJsMin + `(()=>{${indexJsMin}})()`;
 
-await fsExtra.emptyDir("dist");
-await fs.writeFile("dist/release.js", finalCode, { encoding: "utf-8" });
-
-// Create one for extension as well
-await fs.writeFile("extension/embedded.js", finalCode, { encoding: "utf-8" })
+await fsExtra.emptyDir("build");
+await fs.writeFile("extension/embedded.js", finalCode, { encoding: "utf-8" });
+await zip("extension", "build/release.zip");

src/app.svelte

@@ -5,19 +5,55 @@
 	import Draggable from "./lib/draggable";
 	import About from "./tabs/about.svelte";
 	import Outfits from "./tabs/outfits.svelte";
+	import LocalStorage from "./lib/local-storage";
+	import GoX from "svelte-icons/go/GoX.svelte";
+	import LocalFiles from "./lib/local-files";
 
 	let draggable: Draggable;
 	let currentTabName: string = "outfits";
+	let isOpen = false;
+
+	$: if (isOpen !== null) {
+		document.getElementById("app-toggle").style.display = (isOpen) ? "none" : "flex";
+		document.getElementById("app").style.display = (isOpen) ? "flex" : "none";
+	}
+
+	onMount(async () => {
+		const windowLocation = new LocalStorage<{x: number, y: number}>("window-location", {
+			x: 0,
+			y: 0
+		});
 
-	onMount(() => {
 		const containerElement = document.getElementById("app");
 		draggable = new Draggable(containerElement);
+
+		const toggleBtn = document.getElementById("app-toggle");
+		toggleBtn.onclick = () => {
+			isOpen = true;
+		}
+
+		// Load previous window location
+
+		const saved = await windowLocation.load();
+		//console.log(saved);
+		draggable.targetX = saved.x;
+		draggable.targetY = saved.y;
+
+		draggable.onDragCompleted(() => {
+			// Save recent window location
+			windowLocation.save({
+				x: draggable.targetX,
+				y: draggable.targetY
+			})
+		});
 	});
 </script>
 
 <div class="header">
-	<div class="title">RWP - Vanilla Roblox with extended functionality</div>
+	<img class="icon" draggable={false} src={LocalFiles.getAssetUrl("logo.png")} alt="Vanita Logo" />
+	<div class="title">Vanita</div>
 	<div class="drag" on:mousedown={e => draggable.drag(e)}></div>
+	<button class="close" on:click={() => isOpen = false}><GoX /></button>
 </div>
 
 <div class="tabs">
@@ -29,4 +65,4 @@
 	<Outfits />
 {:else if currentTabName === "about"}
 	<About />
-{/if}
+{/if}