├── icons ├── icon.png ├── icon16.png ├── icon24.png ├── icon32.png ├── icon48.png ├── icon64.png ├── icon72.png ├── icon80.png ├── icon96.png ├── off128.png ├── on128.png ├── icon128.png └── icon256.png ├── background └── background.js ├── pages └── popup.html ├── todo.txt ├── chatroom └── demo │ ├── static │ ├── dateTime.js │ ├── client.js │ └── style.css │ ├── sendIcon.svg │ ├── index.js │ └── client.html ├── content_scripts └── content.js ├── js └── popup.js ├── .github └── workflows │ ├── node.js.yml │ └── npm-publish-github-packages.yml ├── manifest.json ├── LICENSE └── README.md /icons/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Madhav-MKNC/who-is-online/HEAD/icons/icon.png -------------------------------------------------------------------------------- /icons/icon16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Madhav-MKNC/who-is-online/HEAD/icons/icon16.png -------------------------------------------------------------------------------- /icons/icon24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Madhav-MKNC/who-is-online/HEAD/icons/icon24.png -------------------------------------------------------------------------------- /icons/icon32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Madhav-MKNC/who-is-online/HEAD/icons/icon32.png -------------------------------------------------------------------------------- /icons/icon48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Madhav-MKNC/who-is-online/HEAD/icons/icon48.png -------------------------------------------------------------------------------- /icons/icon64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Madhav-MKNC/who-is-online/HEAD/icons/icon64.png -------------------------------------------------------------------------------- /icons/icon72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Madhav-MKNC/who-is-online/HEAD/icons/icon72.png -------------------------------------------------------------------------------- /icons/icon80.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Madhav-MKNC/who-is-online/HEAD/icons/icon80.png -------------------------------------------------------------------------------- /icons/icon96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Madhav-MKNC/who-is-online/HEAD/icons/icon96.png -------------------------------------------------------------------------------- /icons/off128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Madhav-MKNC/who-is-online/HEAD/icons/off128.png -------------------------------------------------------------------------------- /icons/on128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Madhav-MKNC/who-is-online/HEAD/icons/on128.png -------------------------------------------------------------------------------- /icons/icon128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Madhav-MKNC/who-is-online/HEAD/icons/icon128.png -------------------------------------------------------------------------------- /icons/icon256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Madhav-MKNC/who-is-online/HEAD/icons/icon256.png -------------------------------------------------------------------------------- /background/background.js: -------------------------------------------------------------------------------- 1 | // testing 2 | 3 | 4 | chrome.runtime.onMessage.addListener((msg, sender) => { 5 | // First, validate the message's structure. 6 | if ((msg.from === 'content') && (msg.subject === 'showPageAction')) { 7 | // Enable the page-action for the requesting tab. 8 | chrome.pageAction.show(sender.tab.id); 9 | } 10 | }); -------------------------------------------------------------------------------- /pages/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | 13 | 14 | 15 |

16 |
Loading...
17 | 18 | 19 | -------------------------------------------------------------------------------- /todo.txt: -------------------------------------------------------------------------------- 1 | [IGNORE THIS] 2 | 3 | active tab url detecion [√] 4 | 5 | ON/OFF like dark mode extension 6 | 7 | badge counter 8 | 9 | backend 10 | - js <=> python 11 | - dsa 12 | - optimized use of networks 13 | 14 | features 15 | - default public chatroom 16 | - friends 17 | 18 | Chatroom 19 | - friends 20 | - Private/public 21 | 22 | Scaling 23 | 24 | [online traffic] 25 | 26 | chatroom (demo: https://chat-room.adarshkumar35.repl.co/?) 27 | 28 | (local and remote synced) -------------------------------------------------------------------------------- /chatroom/demo/static/dateTime.js: -------------------------------------------------------------------------------- 1 | let month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 2 | 3 | function getTime() { 4 | let d = new Date(); 5 | 6 | let time = { 7 | date: d.getDate(), 8 | month: month[d.getMonth() - 1], 9 | year: d.getFullYear(), 10 | hours: d.getHours(), 11 | minutes: d.getMinutes(), 12 | seconds: d.getSeconds(), 13 | meridiem: (d.getHours() < 13) ? 'AM' : 'PM' 14 | } 15 | 16 | return time; 17 | } 18 | -------------------------------------------------------------------------------- /chatroom/demo/sendIcon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /content_scripts/content.js: -------------------------------------------------------------------------------- 1 | // testing 2 | 3 | // // Inform the background page that 4 | // // this tab should have a page-action. 5 | // chrome.runtime.sendMessage({ 6 | // from: 'content', 7 | // subject: 'showPageAction' 8 | // }); 9 | 10 | 11 | // Listen for messages from the popup. 12 | chrome.runtime.onMessage.addListener((msg, sender, response) => { 13 | // First, validate the message's structure. 14 | if (msg.from === 'popup') { 15 | // Collect the necessary data. 16 | // (For your specific requirements `document.querySelectorAll(...)` 17 | // should be equivalent to jquery's `$(...)`.) 18 | 19 | // Directly respond to the sender (popup), 20 | // through the specified callback. 21 | response(window.location.href); 22 | } 23 | }); 24 | -------------------------------------------------------------------------------- /js/popup.js: -------------------------------------------------------------------------------- 1 | // testing 2 | 3 | // Once the DOM is ready... 4 | window.addEventListener('DOMContentLoaded', () => { 5 | let res = document.getElementById("res"); 6 | // res.innerHTML = 'this is res'; 7 | 8 | // ...query for the active tab... 9 | chrome.tabs.query({ 10 | active: true, 11 | currentWindow: true 12 | }, tabs => { 13 | // ...and send a request for the DOM info... 14 | chrome.tabs.sendMessage( 15 | tabs[0].id, 16 | {from: 'popup', subject: 'DOMInfo'}, 17 | // ...also specifying a callback to be called 18 | // from the receiving end (content script). 19 | (url)=>{ 20 | if(url==undefined){ 21 | res.innerText = `can't connect at the moment!\nplease try again after some time or reload the page and try again`; 22 | } 23 | else{ 24 | res.innerHTML = url 25 | } 26 | }); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /.github/workflows/node.js.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node 2 | # For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs 3 | 4 | name: Node.js CI 5 | 6 | on: 7 | push: 8 | branches: [ "main" ] 9 | pull_request: 10 | branches: [ "main" ] 11 | 12 | jobs: 13 | build: 14 | 15 | runs-on: ubuntu-latest 16 | 17 | strategy: 18 | matrix: 19 | node-version: [14.x, 16.x, 18.x] 20 | # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ 21 | 22 | steps: 23 | - uses: actions/checkout@v3 24 | - name: Use Node.js ${{ matrix.node-version }} 25 | uses: actions/setup-node@v3 26 | with: 27 | node-version: ${{ matrix.node-version }} 28 | cache: 'npm' 29 | - run: npm ci 30 | - run: npm run build --if-present 31 | - run: npm test 32 | -------------------------------------------------------------------------------- /.github/workflows/npm-publish-github-packages.yml: -------------------------------------------------------------------------------- 1 | # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created 2 | # For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages 3 | 4 | name: Node.js Package 5 | 6 | on: 7 | release: 8 | types: [created] 9 | 10 | jobs: 11 | build: 12 | runs-on: ubuntu-latest 13 | steps: 14 | - uses: actions/checkout@v3 15 | - uses: actions/setup-node@v3 16 | with: 17 | node-version: 16 18 | - run: npm ci 19 | - run: npm test 20 | 21 | publish-gpr: 22 | needs: build 23 | runs-on: ubuntu-latest 24 | permissions: 25 | contents: read 26 | packages: write 27 | steps: 28 | - uses: actions/checkout@v3 29 | - uses: actions/setup-node@v3 30 | with: 31 | node-version: 16 32 | registry-url: https://npm.pkg.github.com/ 33 | - run: npm ci 34 | - run: npm publish 35 | env: 36 | NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} 37 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 3, 3 | "name": "Who is Online", 4 | "version": "1.0", 5 | "description": "Detects the site the user is on.", 6 | "permissions": [ 7 | "tabs", 8 | "activeTab" 9 | ], 10 | "action": { 11 | "default_icon": "icons/icon.png", 12 | "default_popup": "pages/popup.html" 13 | }, 14 | "icons": { 15 | "24": "icons/icon24.png", 16 | "16": "icons/icon16.png", 17 | "32": "icons/icon32.png", 18 | "48": "icons/icon48.png", 19 | "64": "icons/icon64.png", 20 | "72": "icons/icon72.png", 21 | "80": "icons/icon80.png", 22 | "96": "icons/icon96.png", 23 | "128": "icons/icon128.png", 24 | "256": "icons/icon256.png" 25 | }, 26 | "content_scripts": [ 27 | { 28 | "matches": [ 29 | "" 30 | ], 31 | "js": [ 32 | "content_scripts/content.js" 33 | ] 34 | } 35 | ], 36 | "background": { 37 | "service_worker": "background/background.js" 38 | } 39 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Madhav Kumar 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /chatroom/demo/index.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const app = express(); 3 | 4 | const path = require('path'); 5 | 6 | app.use('/static', express.static(path.join(__dirname, 'static'))); 7 | app.use(express.urlencoded()); 8 | 9 | const http = require('http'); 10 | const server = http.createServer(app); 11 | 12 | let users = {} 13 | 14 | const io = require('socket.io')(server); 15 | console.log('server started'); 16 | // socket server 17 | io.on('connection', (socket) => { 18 | socket.on('disconnect', () => { 19 | if (users[socket.id] != undefined) { 20 | console.log(`${users[socket.id]} leaved`); 21 | socket.broadcast.emit('user leaved', `${users[socket.id]} leaved`); 22 | } 23 | else { 24 | console.log(`${users[socket.id]} leaved`); 25 | } 26 | }); 27 | 28 | socket.on('user message', (sender, msg) => { 29 | socket.broadcast.emit('um', sender, msg); 30 | }); 31 | 32 | socket.on('user name', (name) => { 33 | users[socket.id] = name; 34 | console.log(name, ' connected'); 35 | console.log(`${users[socket.id]}'s id :`, socket.id); 36 | socket.broadcast.emit('un', name); 37 | }); 38 | }); 39 | 40 | app.get('/', (req, res) => { 41 | res.sendFile(__dirname + '/client.html'); 42 | }); 43 | 44 | // app.get('./send icon.svg', (req, res) => { 45 | // res.sendFile(__dirname + '/sendIcon.svg'); 46 | // }) 47 | 48 | server.listen(8000, () => { 49 | console.log('server running on port 8000'); 50 | }); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # who-is-online 2 | 3 | [UNDER-DEVELOPMENT] 4 | 5 | 6 | Introducing a revolutionary new Chrome extension that brings the power of online collaboration to your fingertips! Currently under development. 7 | This extension will allow you to access real-time information about all users who are accessing the same webpage as you, from any location around the world. 8 | With the built-in chatroom feature, you'll be able to interact with these users and exchange ideas, thoughts, and collaborate on projects in real-time. 9 | 10 | Whether you're a student, professional, or simply an avid internet user, this extension has the potential to revolutionize the way you browse the web. 11 | With the ability to connect with others and share experiences, you'll never feel isolated in your online browsing experience again. 12 | 13 | Stay tuned for the release of this innovative new Chrome extension. Get ready to take your online experience to the next level and start connecting with others across the world! 14 | 15 | 16 | 17 | ## how to use? 18 | * step 1: clone the repository to your local pc 19 | ``` 20 | git clone git@github.com:Madhav-MKNC/who-is-online.git 21 | ``` 22 | or you can download the zip file. 23 | * step 2: open chrome and in the url tab type : 24 | ``` 25 | chrome://extensions 26 | ``` 27 | * step 3: turn on the developer mode in top right corner 28 | * step 4: click the "load package" button and select the folder in which you cloned the project 29 | * step 5: after that "Who is Online" extension will be loaded in your chrome 30 | * step 6: pin the extension.
31 | * Now you are ready to go... 32 | 33 | -------------------------------------------------------------------------------- /chatroom/demo/client.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Chat Room 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |
19 | 20 | 21 | 42 | 43 | 44 |
45 |
46 |
47 | 48 | 49 |
50 |
51 |
52 |
53 | 54 | 55 | 56 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /chatroom/demo/static/client.js: -------------------------------------------------------------------------------- 1 | // messageContainer.children[messageContainer.childElementCount - 1] 2 | 3 | messageContainer = document.querySelector('.messageContainer'); 4 | 5 | function displayMsg(sender, senderName, msg) { 6 | let newMsg = document.createElement('div'); 7 | newMsg.setAttribute('class', `msg ${sender}`); 8 | // if (senderName == lastMsgSender) { 9 | // if (sender == 'mm') { 10 | // newMsg.innerHTML = ` 11 | //
${msg}
`; 12 | // } 13 | // else { 14 | // newMsg.innerHTML = ` 15 | //
${msg}
`; 16 | // } 17 | // console.log('same'); 18 | // } 19 | // else { 20 | // newMsg.setAttribute('style', 'margin : 8px 0px 0px 0px'); 21 | // if (sender == 'mm') { 22 | newMsg.innerHTML = ` 23 |
24 |
@${senderName}
25 |
${getTime().date} ${getTime().month} ${getTime().year} ${getTime().hours}:${getTime().minutes}:${getTime().seconds} ${getTime().meridiem}
26 |
27 | 28 |
${msg}
`; 29 | // } 30 | // else { 31 | // newMsg.innerHTML = ` 32 | //
@${senderName}
33 | //
${msg}
`; 34 | // } 35 | console.log(getTime()); 36 | // console.log('not same'); 37 | // } 38 | // newMsgLine.appendChild(newMsg); 39 | messageContainer.appendChild(newMsg); 40 | messageContainer.scroll(0, messageContainer.scrollHeight); 41 | lastMsgSender = senderName; 42 | } 43 | 44 | function notify(notification) { 45 | let notifier = document.createElement('div'); 46 | notifier.innerText = notification; 47 | notifier.setAttribute('class', 'notifier'); 48 | messageContainer.appendChild(notifier); 49 | messageContainer.scroll(0, messageContainer.scrollHeight); 50 | } 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | name = getName('enter your name :'); 59 | function getName(str) { 60 | let userName = prompt(str); 61 | if (userName == '' || userName == null) { 62 | getName('please specify your name to join the chat room :'); 63 | } 64 | if (userName.length > 26) { 65 | getName( 66 | `sorry! can't set username.\nusername should contain less than 26 characters.`); 67 | } 68 | else { 69 | socket.emit('user name', userName); 70 | notify(`you joined the chat as ${userName}`); 71 | return userName; 72 | } 73 | } 74 | 75 | socket.on('un', (name) => { 76 | notify(`${name} joined the chat`); 77 | }); 78 | socket.on('user leaved', (wholeaved) => { 79 | notify(wholeaved); 80 | }); 81 | 82 | let form = document.querySelector('form'); 83 | let message = document.querySelector('input'); 84 | form.addEventListener('submit', (e) => { 85 | e.preventDefault(); 86 | if (message.value != 0) { 87 | socket.emit('user message', name, message.value); 88 | displayMsg('mm', name, message.value); 89 | message.value = ''; 90 | } 91 | }); 92 | 93 | socket.on('um', (sender, msg) => { 94 | displayMsg('om', sender, msg); 95 | }); -------------------------------------------------------------------------------- /chatroom/demo/static/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --themebg: #1e2b2b; 3 | --themebgdark : #121a1a; 4 | --themeclr: #d7d28a; 5 | --hoverclr: #374c4c; 6 | } 7 | * { 8 | margin: 0; 9 | padding: 0; 10 | } 11 | html{ 12 | overflow: auto; 13 | } 14 | .container { 15 | height: calc(100vh - 2px); 16 | background: #4c4c4c; 17 | display: flex; 18 | flex-direction: column; 19 | align-items: center; 20 | padding-top: 2px; 21 | } 22 | 23 | .chatContainer { 24 | /* background: #1c2333; */ 25 | background-color: var(--themebg); 26 | height: 100%; 27 | width: 100%; 28 | display: flex; 29 | flex-direction: column; 30 | align-items: center; 31 | padding: 0px 0px 2px 0px; 32 | } 33 | 34 | .messageContainer { 35 | width: 96%; 36 | height: -webkit-fill-available; 37 | border-radius: 10px 10px 0px 0px; 38 | overflow: auto; 39 | padding: 0px 7px; 40 | } 41 | 42 | .msg { 43 | color: lightgrey; 44 | min-height: 52px; 45 | height: 52px; 46 | /* border-bottom: 1px solid #3c3c3c; */ 47 | display: flex; 48 | align-items: center; 49 | padding-left: 10px; 50 | } 51 | .msg:hover{ 52 | background: var(--hoverclr); 53 | } 54 | .msg.mm{ 55 | background-color: transparent; 56 | } 57 | .msg.om{ 58 | background-color: transparent; 59 | } 60 | .at{ 61 | color: gray; 62 | } 63 | .sender { 64 | color: var(--themeclr); 65 | border-right: 1px solid gray; 66 | padding-right: 10px; 67 | padding-left: 10px; 68 | height: 80%; 69 | width: 10%; 70 | display: flex; 71 | flex-direction: column; 72 | justify-content: center; 73 | align-items: end; 74 | gap: 2px; 75 | } 76 | .s{ 77 | font-size: 17px; 78 | } 79 | .time { 80 | font-size: 12px; 81 | color: #808080bd; 82 | } 83 | .mm, .om{ 84 | min-width: 86%; 85 | } 86 | .mm { 87 | /* background: #47598b; */ 88 | padding-left: 10px; 89 | } 90 | .om { 91 | /* background: #47598b; */ 92 | padding-left: 10px; 93 | } 94 | .notifier { 95 | color: #808080a6; 96 | border: 1px solid #80808087; 97 | background: transparent; 98 | height: 30px; 99 | display: flex; 100 | justify-content: center; 101 | align-items: center; 102 | border: none; 103 | border-bottom: 1px solid #3c3c3c87; 104 | border-top: 1px solid #3c3c3c87; 105 | } 106 | 107 | .sendMsg { 108 | width: 100%; 109 | height: 66px; 110 | position: sticky; 111 | bottom: 0; 112 | } 113 | 114 | 115 | 116 | 117 | /* new form style */ 118 | form{ 119 | border-top: 1px solid #3c445c; 120 | position: sticky; 121 | bottom: 0; 122 | padding: 0px 0px 0px 0px; 123 | background: #1c2333; 124 | } 125 | button{ 126 | font-size: 26px !important; 127 | height: 94% !important; 128 | width: 10% !important; 129 | background: transparent !important; 130 | display: flex !important; 131 | justify-content: center !important; 132 | align-items: center !important; 133 | } 134 | i{ 135 | color: #374058; 136 | } 137 | 138 | /* */ 139 | 140 | 141 | 142 | 143 | form { 144 | width: 100%; 145 | height: 100%; 146 | display: flex; 147 | justify-content: center; 148 | align-items: center; 149 | } 150 | 151 | input { 152 | color: white; 153 | width: 85%; 154 | height: 51%; 155 | background: transparent; 156 | border: none; 157 | outline: none; 158 | padding-left: 20px; 159 | font-size: 18px; 160 | background: #2b3245; 161 | border-radius: 7px; 162 | margin-right: 30px; 163 | height: 57%; 164 | } 165 | 166 | button { 167 | height: 100%; 168 | width: 5%; 169 | font-size: 20px; 170 | font-family: system-ui; 171 | background: #e0e3ff; 172 | color: white; 173 | border: none; 174 | cursor: pointer; 175 | } 176 | 177 | .messageContainer::-webkit-scrollbar { 178 | background: transparent; 179 | width: 5px; 180 | } 181 | 182 | .messageContainer::-webkit-scrollbar-thumb { 183 | background: #ffffff26; 184 | border-radius: 4px; 185 | } 186 | 187 | @media (max-width: 600px) { 188 | .container { 189 | height: 100vh; 190 | } 191 | 192 | .container>h1 { 193 | font-size: 20px; 194 | } 195 | 196 | .chatContainer{ 197 | background-size: cover; 198 | } 199 | 200 | .messageContainer { 201 | height: calc(100% - 30px); 202 | width: 96%; 203 | } 204 | 205 | .sender{ 206 | width: 32%; 207 | } 208 | 209 | .notifier { 210 | height: 14px; 211 | font-size: 12px; 212 | /* min-width: auto; 213 | width: fit-content; */ 214 | } 215 | 216 | 217 | input{ 218 | margin: 10px 5px 10px 5px; 219 | width: 70%; 220 | } 221 | 222 | button { 223 | font-size: 16px; 224 | width: 12%; 225 | height: 90%; 226 | margin-right: 1px; 227 | } 228 | } --------------------------------------------------------------------------------