Merge pull request #2549 from sreevidya-16/master

Added VPN Extension
Sulagna-Dutta-Roy · Jul 28, 2024 · 40ec6ef · 40ec6ef
2 parents 1529923 + 2a16128
commit 40ec6ef
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 0 deletions.
diff --git a/VPN Extension/index.html b/VPN Extension/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VPN Extension</title>
+    <link rel="stylesheet" href="styles.css">
+    <script src="vpn.js" defer></script>
+</head>
+<body>
+    <header>
+        <h1>VPN Extension</h1>
+    </header>
+    <main>
+        <section id="vpn-control">
+            <h2>VPN Control</h2>
+            <button id="connect-btn">Connect VPN</button>
+            <button id="disconnect-btn">Disconnect VPN</button>
+            <p id="status">Status: Disconnected</p>
+        </section>
+    </main>
+    <footer>
+        <p>&copy; 2024 VPN Extension</p>
+    </footer>
+</body>
+</html>
diff --git a/VPN Extension/manifest.js b/VPN Extension/manifest.js
@@ -0,0 +1,29 @@
+{
+    "manifest_version": 3,
+    "name": "VPN Extension",
+    "version": "1.0",
+    "description": "A simple VPN control extension",
+    "icons": {
+        "48": "icons/icon48.png",
+        "128": "icons/icon128.png"
+    },
+    "action": {
+        "default_popup": "index.html",
+    },
+    "permissions": [
+        "storage",
+        "activeTab",
+        "webRequest",
+        "webRequestBlocking",
+        "proxy"
+    ],
+    "background": {
+        "service_worker": "vpn.js"
+    },
+    "content_scripts": [
+        {
+            "matches": ["<all_urls>"],
+            "js": ["vpn.js"]
+        }
+    ]
+}
diff --git a/VPN Extension/styles.css b/VPN Extension/styles.css
@@ -0,0 +1,78 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    background-color: #f5f5f5;
+}
+
+header {
+    background-color: #007BFF;
+    color: white;
+    padding: 1rem;
+    width: 100%;
+    text-align: center;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+main {
+    background-color: white;
+    padding: 2rem;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    text-align: center;
+}
+
+h1 {
+    margin: 0;
+}
+
+h2 {
+    color: #333;
+}
+
+button {
+    margin: 1rem;
+    padding: 1rem 2rem;
+    font-size: 1rem;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+#connect-btn {
+    background-color: #28a745;
+    color: white;
+}
+
+#connect-btn:hover {
+    background-color: #218838;
+}
+
+#disconnect-btn {
+    background-color: #dc3545;
+    color: white;
+}
+
+#disconnect-btn:hover {
+    background-color: #c82333;
+}
+
+#status {
+    font-size: 1.2rem;
+    margin-top: 1rem;
+    color: #555;
+}
+
+footer {
+    position: absolute;
+    bottom: 1rem;
+    text-align: center;
+    width: 100%;
+    color: #777;
+}
diff --git a/VPN Extension/vpn.js b/VPN Extension/vpn.js
@@ -0,0 +1,37 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const connectBtn = document.getElementById('connect-btn');
+    const disconnectBtn = document.getElementById('disconnect-btn');
+    const statusText = document.getElementById('status');
+
+    connectBtn.addEventListener('click', () => {
+        console.log('Connect button clicked');
+        connectVPN();
+    });
+
+    disconnectBtn.addEventListener('click', () => {
+        console.log('Disconnect button clicked');
+        disconnectVPN();
+    });
+
+    function connectVPN() {
+        console.log('Connecting to VPN...');
+        statusText.textContent = 'Status: Connecting...';
+
+        // Simulate a delay to mimic the VPN connection process
+        setTimeout(() => {
+            console.log('VPN connected');
+            statusText.textContent = 'Status: Connected';
+        }, 2000); // Adjust the delay as needed
+    }
+
+    function disconnectVPN() {
+        console.log('Disconnecting from VPN...');
+        statusText.textContent = 'Status: Disconnecting...';
+
+        // Simulate a delay to mimic the VPN disconnection process
+        setTimeout(() => {
+            console.log('VPN disconnected');
+            statusText.textContent = 'Status: Disconnected';
+        }, 2000); // Adjust the delay as needed
+    }
+});