diff --git a/Focus/index.js b/Focus/index.js new file mode 100644 index 00000000..bfbae9be --- /dev/null +++ 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 + 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 = ` +
${site1.name}
+
${site2.name}
+
${site3.name}
+
Continue to Page
+
Continue to Page
` + + // 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]); \ No newline at end of file diff --git a/Focus/indexDev.js b/Focus/indexDev.js new file mode 100644 index 00000000..99cfb55b --- /dev/null +++ b/Focus/indexDev.js @@ -0,0 +1,77 @@ +// Adds style.css to the document +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 = ` +
${site1.name}
+
${site2.name}
+
${site3.name}
+
Continue to Page
+
Continue to Page
` + + // 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 + ) \ No newline at end of file diff --git a/Focus/manifest.json b/Focus/manifest.json new file mode 100644 index 00000000..b70b2072 --- /dev/null +++ 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"] + } + ] + } \ No newline at end of file diff --git a/Focus/package-lock.json b/Focus/package-lock.json new file mode 100644 index 00000000..4a2f5373 --- /dev/null +++ b/Focus/package-lock.json @@ -0,0 +1,115 @@ +{ + "name": "website-blocker-chrome-extension", + "version": "1.0.0", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "website-blocker-extension", + "version": "1.0.0", + "dependencies": { + "dotenv": "^16.0.3", + "whatwg-fetch": "^3.6.2" + }, + "devDependencies": { + "watch": "^1.0.2" + } + }, + "node_modules/dotenv": { + "version": "16.0.3", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz", + "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==", + "engines": { + "node": ">=12" + } + }, + "node_modules/exec-sh": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/exec-sh/-/exec-sh-0.2.2.tgz", + "integrity": "sha512-FIUCJz1RbuS0FKTdaAafAByGS0CPvU3R0MeHxgtl+djzCc//F8HakL8GzmVNZanasTbTAY/3DRFA0KpVqj/eAw==", + "dev": true, + "dependencies": { + "merge": "^1.2.0" + } + }, + "node_modules/merge": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/merge/-/merge-1.2.1.tgz", + "integrity": "sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ==", + "dev": true + }, + "node_modules/minimist": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz", + "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/watch": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/watch/-/watch-1.0.2.tgz", + "integrity": "sha512-1u+Z5n9Jc1E2c7qDO8SinPoZuHj7FgbgU1olSFoyaklduDvvtX7GMMtlE6OC9FTXq4KvNAOfj6Zu4vI1e9bAKA==", + "dev": true, + "dependencies": { + "exec-sh": "^0.2.0", + "minimist": "^1.2.0" + }, + "bin": { + "watch": "cli.js" + }, + "engines": { + "node": ">=0.1.95" + } + }, + "node_modules/whatwg-fetch": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz", + "integrity": "sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==" + } + }, + "dependencies": { + "dotenv": { + "version": "16.0.3", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz", + "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==" + }, + "exec-sh": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/exec-sh/-/exec-sh-0.2.2.tgz", + "integrity": "sha512-FIUCJz1RbuS0FKTdaAafAByGS0CPvU3R0MeHxgtl+djzCc//F8HakL8GzmVNZanasTbTAY/3DRFA0KpVqj/eAw==", + "dev": true, + "requires": { + "merge": "^1.2.0" + } + }, + "merge": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/merge/-/merge-1.2.1.tgz", + "integrity": "sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ==", + "dev": true + }, + "minimist": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz", + "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==", + "dev": true + }, + "watch": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/watch/-/watch-1.0.2.tgz", + "integrity": "sha512-1u+Z5n9Jc1E2c7qDO8SinPoZuHj7FgbgU1olSFoyaklduDvvtX7GMMtlE6OC9FTXq4KvNAOfj6Zu4vI1e9bAKA==", + "dev": true, + "requires": { + "exec-sh": "^0.2.0", + "minimist": "^1.2.0" + } + }, + "whatwg-fetch": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz", + "integrity": "sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==" + } + } + } \ No newline at end of file diff --git a/Focus/package.json b/Focus/package.json new file mode 100644 index 00000000..df8e0cfa --- /dev/null +++ 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" + } + } \ No newline at end of file diff --git a/Focus/style.css b/Focus/style.css new file mode 100644 index 00000000..680bbe4f --- /dev/null +++ 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; + } \ No newline at end of file