Add files via upload

Sulagna-Dutta-Roy · May 16, 2024 · 8c00d71 · 8c00d71
1 parent b96493c
commit 8c00d71
Show file tree

Hide file tree

Showing 6 changed files with 370 additions and 0 deletions.
diff --git a/Focus/index.js b/Focus/index.js
@@ -0,0 +1,83 @@
+//This ensures that the function is executed as soon as it is defined.
+//This part implements a simple module system, allowing the script to manage dependencies if needed. However, in this particular code, it mainly prepares the script for potential modular expansion.
+(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
+    // Adds style.css to the document <head>
+    window.addEventListener(
+      'load',
+      (e) => {
+        const site1 = {
+          id: 'id1',
+          name: 'Leetcode Problem Solving Platform',
+          url: 'https://leetcode.com/',
+        }
+        const site2 = {
+          id: 'id2',
+          name: 'Codeforces',
+          url: 'https://codeforces.com/',
+        }
+        const site3 = {
+          id: 'id3',
+          name: 'Learn C++',
+          url: 'https://cplusplus.com/',
+        }
+
+        const blockedSite = {
+          id: 'idBlocked',
+          url: 'https://youtube.com',
+        }
+        const blockedSite2={
+            id:'idBlocked2',
+            url:'https://www.instagram.com/accounts/login/?hl=en',
+        }
+
+        // Add link to style.css
+        console.log('using indexDev.js')
+        var link = document.createElement('link')
+        link.rel = 'stylesheet'
+        link.type = 'text/css'
+        link.href = './style.css'
+        document.head.appendChild(link)
+
+        // Logic for replacing website body with our app
+        var body = document.querySelector('body')
+        var main = document.createElement('main')
+        body.innerHTML = ''
+        document.body.appendChild(main)
+        main.innerHTML = `
+        <div id=${site1.id} class="btn btn-primary">${site1.name}</div>
+        <div id=${site2.id} class="btn btn-primary">${site2.name}</div>
+        <div id=${site3.id} class="btn btn-primary">${site3.name}</div>
+        <div id=${blockedSite.id} class="btn btn-wide">Continue to Page</div>
+        <div id=${blockedSite2.id} class="btn1 btn-wide">Continue to Page</div>`
+
+        // Query Selectors
+        // select divs by id
+        const site1Div = document.querySelector(`#${site1.id}`)
+        const site2Div = document.querySelector(`#${site2.id}`)
+        const site3Div = document.querySelector(`#${site3.id}`)
+        const blockedSiteDiv = document.querySelector(`#${blockedSite.id}`)
+        const blockedSite2Div = document.querySelector(`#${blockedSite2.id}`)
+
+        // Event Handlers
+        // add onclick event to query selected div
+        site1Div.addEventListener('click', () => {
+          window.location.href = site1.url
+        })
+        site2Div.addEventListener('click', () => {
+          window.location.href = site2.url
+        })
+        site3Div.addEventListener('click', () => {
+          window.location.href = site3.url
+        })
+        blockedSiteDiv.addEventListener('click', () => {
+          window.location.href = blockedSite.url
+        })
+        blockedSite2Div.addEventListener('click', () => {
+          window.location.href = blockedSite2.url
+        })
+
+      },
+      false
+    )
+
+    },{}]},{},[1]);
diff --git a/Focus/indexDev.js b/Focus/indexDev.js
@@ -0,0 +1,77 @@
+// Adds style.css to the document <head>
+window.addEventListener(
+    'load',
+    (e) => {
+      const site1 = {
+        id: 'id1',
+        name: 'Leetcode Problem Solving Platform',
+        url: 'https://leetcode.com/',
+      }
+      const site2 = {
+        id: 'id2',
+        name: 'Codeforces',
+        url: 'https://codeforces.com/',
+      }
+      const site3 = {
+        id: 'id3',
+        name: 'Learn C++',
+        url: 'https://cplusplus.com/',
+      }
+      //using youtube as a distracting site
+      const blockedSite = {
+        id: 'idBlocked',
+        url: 'https://youtube.com',
+      }
+      const blockedSite2={
+        id:'idBlocked2',
+        url:'https://www.instagram.com/accounts/login/?hl=en',
+      }
+
+      // Add link to style.css
+      console.log('using indexDev.js')
+      var link = document.createElement('link')
+      link.rel = 'stylesheet'
+      link.type = 'text/css'
+      link.href = './style.css'
+      document.head.appendChild(link)
+
+      // Logic for replacing website body with our app
+      var body = document.querySelector('body')
+      var main = document.createElement('main')
+      body.innerHTML = ''
+      document.body.appendChild(main)
+      main.innerHTML = `
+      <div id=${site1.id} class="btn btn-primary">${site1.name}</div>
+      <div id=${site2.id} class="btn btn-primary">${site2.name}</div>
+      <div id=${site3.id} class="btn btn-primary">${site3.name}</div>
+      <div id=${blockedSite.id} class="btn btn-wide">Continue to Page</div>
+      <div id=${blockedSite2.id} class="btn1 btn-wide">Continue to Page</div>`
+
+      // Query Selectors
+      // select divs by id
+      const site1Div = document.querySelector(`#${site1.id}`)
+      const site2Div = document.querySelector(`#${site2.id}`)
+      const site3Div = document.querySelector(`#${site3.id}`)
+      const blockedSiteDiv = document.querySelector(`#${blockedSite.id}`)
+      const blockedSite2Div = document.querySelector(`#${blockedSite2.id}`)
+
+      // Event Handlers
+      // add onclick event to query selected div
+      site1Div.addEventListener('click', () => {
+        window.location.href = site1.url
+      })
+      site2Div.addEventListener('click', () => {
+        window.location.href = site2.url
+      })
+      site3Div.addEventListener('click', () => {
+        window.location.href = site3.url
+      })
+      blockedSiteDiv.addEventListener('click', () => {
+        window.location.href = blockedSite.url
+      })
+      blockedSite2Div.addEventListener('click', () => {
+        window.location.href = blockedSite2.url
+      })
+    },
+    false
+  )
diff --git a/Focus/manifest.json b/Focus/manifest.json
@@ -0,0 +1,13 @@
+{
+    "manifest_version": 3,
+    "name": "Website Blocker",
+    "description": "Replaces distracting websites with a page having tasks assigned to user.",
+    "version": "1.0",
+    "content_scripts": [
+      {
+        "matches": ["https://www.youtube.com/*","https://www.instagram.com/accounts/login/?hl=en"],
+        "css": ["./style.css"],
+        "js": ["./index.js"]
+      }
+    ]
+  }
diff --git a/Focus/package-lock.json b/Focus/package-lock.json
diff --git a/Focus/package.json b/Focus/package.json
@@ -0,0 +1,19 @@
+{
+    "name": "website-blocker-chrome-extension",
+    "version": "1.0.0",
+    "description": "Replaces distracting websites with a pretty landing page.",
+    "main": "index.js",
+    "scripts": {
+      "reload": "open http://reload.extensions/",
+      "watch": "watch 'npm run reload' ./index.js",
+      "bundle": "browserify indexDev.js -o index.js"
+    },
+    "author": "Akshar",
+    "devDependencies": {
+      "watch": "^1.0.2"
+    },
+    "dependencies": {
+      "dotenv": "^16.0.3",
+      "whatwg-fetch": "^3.6.2"
+    }
+  }
diff --git a/Focus/style.css b/Focus/style.css
@@ -0,0 +1,63 @@
+main {
+    --main-bg-color: #ffffff;
+    --main-text-color: #000;
+    --main-link-color: #000;
+    --main-link-hover-color: #000;
+    --main-link-visited-color: #000;
+    --main-link-active-color: #000;
+    --main-link-focus-color: #000;
+    --main-btn-text-color: #000;
+    --main-btn-bg-color: #fff;
+    --main-btn-hover-text-color: #000;
+
+    height: 90vh;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    grid-gap: min(5vw, 5vh);
+    grid-template-areas:
+      'btn-1 btn-2 btn-3'
+      'btn-4 btn-5 btn-6'
+      'btn-wide btn-wide btn-wide';
+
+    margin: 5vh 2vw;
+  }
+
+  main {
+    font-family: 'Roboto', sans-serif;
+    font-size: 36px;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #ffffff;
+  }
+
+  .btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: hsla(0, 0%, 100%, 0.209);
+    border: none;
+    color: red;
+    text-decoration: none;
+    font-size: 36px;
+    cursor: pointer;
+  }
+  .btn1 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: hsla(88, 59%, 49%, 0.209);
+    border: none;
+    color: red;
+    text-decoration: none;
+    font-size: 36px;
+    cursor: pointer;
+  }
+
+  .btn-primary {
+    grid-area: auto / auto / auto / auto;
+  }
+  .btn-wide {
+    grid-area: btn-wide;
+    min-height: 10vh;
+  }