added accessibility enhancer extension

Harshitmishra001 · Jun 9, 2024 · 4dc1a77 · 4dc1a77
1 parent c2c8fb0
commit 4dc1a77
Show file tree

Hide file tree

Showing 9 changed files with 220 additions and 0 deletions.
diff --git a/Accessibility Enhancer/accessibility.js b/Accessibility Enhancer/accessibility.js
@@ -0,0 +1,20 @@
+function increaseTextSize() {
+    document.body.style.fontSize = 'larger';
+  }
+
+  function decreaseTextSize() {
+    document.body.style.fontSize = 'smaller';
+  }
+
+  function changeBackgroundColor() {
+    document.body.style.backgroundColor = document.body.style.backgroundColor === 'white' ? 'lightgrey' : 'white';
+  }
+
+  function increaseContrast() {
+    document.body.style.filter = 'contrast(150%)';
+  }
+
+  function decreaseContrast() {
+    document.body.style.filter = 'contrast(100%)';
+  }
+
diff --git a/Accessibility Enhancer/background.js b/Accessibility Enhancer/background.js
@@ -0,0 +1,5 @@
+chrome.runtime.onInstalled.addListener(() => {
+    chrome.storage.sync.set({ fontSize: 'medium', backgroundColor: 'white', contrast: 'normal' });
+    console.log('Default settings saved');
+  });
+
diff --git a/Accessibility Enhancer/manifest.json b/Accessibility Enhancer/manifest.json
@@ -0,0 +1,31 @@
+{
+    "manifest_version": 3,
+    "name": "Accessibility Enhancer Extension",
+    "description": "Enhance web accessibility with features like text size adjustment, background color change, and contrast improvement.",
+    "version": 1.0,
+    "permissions": ["storage", "activeTab", "scripting"],
+    "background": {
+      "service_worker": "background.js"
+    },
+    "action": {
+      "default_popup": "popup.html",
+      "default_icon": {
+        "16": "icons/icon16.png",
+        "48": "icons/icon48.png",
+        "128": "icons/icon128.png"
+      }
+    },
+    "options_page": "options.html",
+    "icons": {
+      "16": "icons/icon16.png",
+      "48": "icons/icon48.png",
+      "128": "icons/icon128.png"
+    },
+    "content_scripts": [
+      {
+        "matches": ["<all_urls>"],
+        "js": ["accessibility.js"]
+      }
+    ]
+  }
+
diff --git a/Accessibility Enhancer/options.html b/Accessibility Enhancer/options.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Accessibility Enhancer Options</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+    }
+    label {
+      display: block;
+      margin: 10px 0 5px;
+    }
+  </style>
+</head>
+<body>
+  <h2>Extension Options</h2>
+  <form id="optionsForm">
+    <label for="fontSize">Default Text Size:</label>
+    <select id="fontSize">
+      <option value="small">Small</option>
+      <option value="medium">Medium</option>
+      <option value="large">Large</option>
+    </select>
+    <label for="bgColor">Default Background Color:</label>
+    <input type="color" id="bgColor" name="bgColor" value="#ffffff">
+    <label for="contrast">Default Contrast:</label>
+    <select id="contrast">
+      <option value="normal">Normal</option>
+      <option value="high">High</option>
+    </select>
+    <button type="submit">Save</button>
+  </form>
+  <script src="options.js"></script>
+</body>
+</html>
diff --git a/Accessibility Enhancer/options.js b/Accessibility Enhancer/options.js
@@ -0,0 +1,27 @@
+document.addEventListener('DOMContentLoaded', () => {
+    restoreOptions();
+    document.getElementById('optionsForm').addEventListener('submit', saveOptions);
+  });
+
+  function saveOptions(event) {
+    event.preventDefault();
+    const fontSize = document.getElementById('fontSize').value;
+    const bgColor = document.getElementById('bgColor').value;
+    const contrast = document.getElementById('contrast').value;
+    chrome.storage.sync.set({
+      fontSize,
+      bgColor,
+      contrast
+    }, () => {
+      console.log('Options saved');
+    });
+  }
+
+  function restoreOptions() {
+    chrome.storage.sync.get(['fontSize', 'bgColor', 'contrast'], (items) => {
+      document.getElementById('fontSize').value = items.fontSize || 'medium';
+      document.getElementById('bgColor').value = items.bgColor || '#ffffff';
+      document.getElementById('contrast').value = items.contrast || 'normal';
+    });
+  }
+
diff --git a/Accessibility Enhancer/popup.html b/Accessibility Enhancer/popup.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Accessibility Enhancer</title>
+  <style>
+    body {
+      width: 200px;
+      font-family: Arial, sans-serif;
+    }
+    button {
+      width: 100%;
+      margin: 5px 0;
+      padding: 10px;
+      background-color: #007BFF;
+      color: white;
+      border: none;
+      cursor: pointer;
+    }
+  </style>
+</head>
+<body>
+  <h2>Accessibility Enhancer</h2>
+  <button id="increaseText">Increase Text Size</button>
+  <button id="decreaseText">Decrease Text Size</button>
+  <button id="changeBg">Change Background Color</button>
+  <button id="increaseContrast">Increase Contrast</button>
+  <button id="decreaseContrast">Decrease Contrast</button>
+  <script src="popup.js"></script>
+</body>
+</html>
diff --git a/Accessibility Enhancer/popup.js b/Accessibility Enhancer/popup.js
@@ -0,0 +1,35 @@
+document.getElementById('increaseText').addEventListener('click', () => {
+    chrome.scripting.executeScript({
+      target: { tabId: chrome.tabs.Tab.id },
+      function: increaseTextSize
+    });
+  });
+
+  document.getElementById('decreaseText').addEventListener('click', () => {
+    chrome.scripting.executeScript({
+      target: { tabId: chrome.tabs.Tab.id },
+      function: decreaseTextSize
+    });
+  });
+
+  document.getElementById('changeBg').addEventListener('click', () => {
+    chrome.scripting.executeScript({
+      target: { tabId: chrome.tabs.Tab.id },
+      function: changeBackgroundColor
+    });
+  });
+
+  document.getElementById('increaseContrast').addEventListener('click', () => {
+    chrome.scripting.executeScript({
+      target: { tabId: chrome.tabs.Tab.id },
+      function: increaseContrast
+    });
+  });
+
+  document.getElementById('decreaseContrast').addEventListener('click', () => {
+    chrome.scripting.executeScript({
+      target: { tabId: chrome.tabs.Tab.id },
+      function: decreaseContrast
+    });
+  });
+
diff --git a/Accessibility Enhancer/typewriter.css b/Accessibility Enhancer/typewriter.css
@@ -0,0 +1,19 @@
+.typewriter h1, .typewriter p {
+    display: inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    border-right: 0.15em solid orange;
+    font-size: 24px;
+    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
+  }
+
+  @keyframes typing {
+    from { width: 0; }
+    to { width: 100%; }
+  }
+
+  @keyframes blink-caret {
+    from, to { border-color: transparent; }
+    50% { border-color: orange; }
+  }
+
diff --git a/Accessibility Enhancer/welcome.html b/Accessibility Enhancer/welcome.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Welcome to Accessibility Enhancer</title>
+  <link rel="stylesheet" type="text/css" href="typewriter.css">
+</head>
+<body>
+  <div class="typewriter">
+    <h1>Welcome to Accessibility Enhancer!</h1>
+    <p>Making the web more accessible, one click at a time.</p>
+  </div>
+  <script>
+    setTimeout(() => {
+      window.location.href = 'https://www.google.com/';
+    }, 4000);
+  </script>
+</body>
+</html>