diff --git a/package-lock.json b/package-lock.json index a154a1b..44c8b57 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,9 @@ "": { "name": "ecoloader", "version": "0.1.0", + "dependencies": { + "@tgwf/co2": "^0.13.9" + }, "devDependencies": { "@types/chrome": "^0.0.253", "@types/firefox-webext-browser": "^120.0.0", @@ -126,6 +129,14 @@ "node": ">= 8" } }, + "node_modules/@tgwf/co2": { + "version": "0.13.9", + "resolved": "https://registry.npmjs.org/@tgwf/co2/-/co2-0.13.9.tgz", + "integrity": "sha512-7PuJkzfLFJgKauoz5u5GM21rniOMQCqOcPVcebZURCk5nhvn9R1LdVc9nCWAc9ybUClDn8QtNlkSyXcX5f8z+Q==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@types/chrome": { "version": "0.0.253", "resolved": "https://registry.npmjs.org/@types/chrome/-/chrome-0.0.253.tgz", diff --git a/package.json b/package.json index d54acf3..343fda9 100644 --- a/package.json +++ b/package.json @@ -25,5 +25,8 @@ "webpack": "^5.89.0", "webpack-cli": "^4.10.0", "webpack-merge": "^5.10.0" + }, + "dependencies": { + "@tgwf/co2": "^0.13.9" } } diff --git a/public/manifest.json b/public/manifest.json index 034f38c..786006d 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -11,14 +11,15 @@ "256": "icons/icon-256.png", "512": "icons/icon-512.png" }, - "background": {}, + "background": { + "service_worker": "background.js" + }, "action": { "default_title": "Ecoloader", "default_popup": "popup.html" }, - "permissions": [ - "storage" - ], + "permissions": ["storage", "activeTab", "scripting", "webRequest"], + "host_permissions": [""], "content_scripts": [ { "matches": [ diff --git a/public/popup.html b/public/popup.html index 13e672f..b4233c2 100644 --- a/public/popup.html +++ b/public/popup.html @@ -7,17 +7,15 @@
-

Counter

-
-
- - -
+ + + + + + -
- -

Browser Extension is Ready!

-

Start by updating popup.html

+ +
Calculating...
diff --git a/src/background.ts b/src/background.ts index de11625..3d56185 100644 --- a/src/background.ts +++ b/src/background.ts @@ -1,19 +1,18 @@ 'use strict'; -// With background scripts you can communicate with popup -// and contentScript files. -// For more information on background script, -// See https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts +browser.webRequest.onCompleted.addListener( + function(details) { -browser.runtime.onMessage.addListener((request, sender) => { - if (request.type === 'GREETINGS') { - const message: string = `Hi ${ - sender.tab ? 'Con' : 'Pop' - }, my name is Bac. I am from Background. It's great to hear from you.`; + const contentLengthHeader = details.responseHeaders?.find(header => header.name.toLowerCase() === 'content-length'); - // Log message coming from the `request` parameter - console.log(request.payload.message); - // Send a response message - return Promise.resolve({ message }); - } -}); + const responseSize = contentLengthHeader?.value ? parseInt(contentLengthHeader.value, 10) : 0; + browser.storage.local.get({ totalSize: 0 }).then(function(result) { + + const newTotalSize = parseInt(result.totalSize,10) + responseSize; + + browser.storage.local.set({ totalSize: newTotalSize }); + }); + }, + { urls: [""] }, + ["responseHeaders"] +); diff --git a/src/contentScript.ts b/src/contentScript.ts index 8ebc125..9efdcc1 100644 --- a/src/contentScript.ts +++ b/src/contentScript.ts @@ -1,44 +1,20 @@ 'use strict'; -// Content script file will run in the context of web page. -// With content script you can manipulate the web pages using -// Document Object Model (DOM). -// You can also pass information to the parent extension. - -// We execute this script by making an entry in manifest.json file -// under `content_scripts` property - -// For more information on Content Scripts, -// See https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts - -// Log `title` of current active web page const pageTitle: string = document.head.getElementsByTagName('title')[0].innerHTML; console.log( `Page title is: '${pageTitle}' - evaluated by the extension's 'contentScript.js' file` ); -// Communicate with background file by sending a message -browser.runtime.sendMessage( - { - type: 'GREETINGS', - payload: { - message: 'Hello, my name is Con. I am from ContentScript.', - }, - } -).then((response) => { - console.log(response.message); -}); - // Listen for message -browser.runtime.onMessage.addListener((request, sender) => { - console.log({ request, sender }) - - if (request.type === 'COUNT') { - console.log(`Current count is ${request.payload.count}`); - } - - // Send an empty response - // See: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage - return Promise.resolve(); -}); +// browser.runtime.onMessage.addListener((request, sender) => { +// console.log({ request, sender }) +// +// if (request.type === 'COUNT') { +// console.log(`Current count is ${request.payload.count}`); +// } +// +// // Send an empty response +// // See: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage +// return Promise.resolve(); +// }); diff --git a/src/popup.ts b/src/popup.ts index 6273c6e..7851d8e 100644 --- a/src/popup.ts +++ b/src/popup.ts @@ -3,103 +3,113 @@ import './popup.css'; (function () { - // We will make use of Storage API to get and store `count` value - // More information on Storage API can we found at - // https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage + browser.storage.local.get({ totalSize: 0 }).then( (result) => { + const totalSize = result.totalSize; + document.getElementById("totalSize")!.innerText = totalSize/1000 + " KB"; + }); - // To get storage access, we have to mention it in `permissions` property of manifest.json file - // More information on Permissions can we found at - // https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions - const counterStorage = { - get: (cb: (count: number) => void) => { - browser.storage.sync.get(['count']).then((result) => { - cb(result.count); - }); - }, - set: (value: number, cb: () => void) => { - browser.storage.sync.set({ - count: value, - }).then(cb); - }, - }; + function formatBytes(bytes: number, decimals = 2): string { + if (bytes === 0) return "0 Bytes"; - function setupCounter(initialValue = 0) { - document.getElementById('counter')!.innerHTML = initialValue.toString(); + const k = 1024; + const dm = decimals < 0 ? 0 : decimals; + const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]; - document.getElementById('incrementBtn')!.addEventListener('click', () => { - updateCounter({ - type: 'INCREMENT', - }); - }); + const i = Math.floor(Math.log(bytes) / Math.log(k)); - document.getElementById('decrementBtn')!.addEventListener('click', () => { - updateCounter({ - type: 'DECREMENT', - }); - }); + return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i]; } - function updateCounter({ type }: { type: string }) { - counterStorage.get((count: number) => { - let newCount: number; + // const counterStorage = { + // get: (cb: (count: number) => void) => { + // browser.storage.sync.get(['count']).then((result) => { + // cb(result.count); + // }); + // }, + // set: (value: number, cb: () => void) => { + // browser.storage.sync.set({ + // count: value, + // }).then(cb); + // }, + // }; - if (type === 'INCREMENT') { - newCount = count + 1; - } else if (type === 'DECREMENT') { - newCount = count - 1; - } else { - newCount = count; - } - - counterStorage.set(newCount, () => { - document.getElementById('counter')!.innerHTML = newCount.toString(); - - // Communicate with content script of - // active tab by sending a message - browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => { - const tab = tabs[0]; - - browser.tabs.sendMessage( - tab.id!, - { - type: 'COUNT', - payload: { - count: newCount, - }, - }).then((response) => { - console.log('Current count value passed to contentScript file'); - } - ).catch(console.error); - }); - }); - }); - } - - function restoreCounter() { - // Restore count value - counterStorage.get((count: number) => { - if (typeof count === 'undefined') { - // Set counter value as 0 - counterStorage.set(0, () => { - setupCounter(0); - }); - } else { - setupCounter(count); - } - }); - } - - document.addEventListener('DOMContentLoaded', restoreCounter); - - // Communicate with background file by sending a message - browser.runtime.sendMessage( - { - type: 'GREETINGS', - payload: { - message: 'Hello, my name is Pop. I am from Popup.', - }, - }).then((response) => { - console.log(response.message); - } - ); + // function setupCounter(initialValue = 0) { + // document.getElementById('counter')!.innerHTML = initialValue.toString(); + // + // document.getElementById('incrementBtn')!.addEventListener('click', () => { + // updateCounter({ + // type: 'INCREMENT', + // }); + // }); + // + // document.getElementById('decrementBtn')!.addEventListener('click', () => { + // updateCounter({ + // type: 'DECREMENT', + // }); + // }); + // } +// +// function updateCounter({ type }: { type: string }) { +// counterStorage.get((count: number) => { +// let newCount: number; +// +// if (type === 'INCREMENT') { +// newCount = count + 1; +// } else if (type === 'DECREMENT') { +// newCount = count - 1; +// } else { +// newCount = count; +// } +// +// counterStorage.set(newCount, () => { +// document.getElementById('counter')!.innerHTML = newCount.toString(); +// +// // Communicate with content script of +// // active tab by sending a message +// browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => { +// const tab = tabs[0]; +// +// browser.tabs.sendMessage( +// tab.id!, +// { +// type: 'COUNT', +// payload: { +// count: newCount, +// }, +// }).then((response) => { +// console.log('Current count value passed to contentScript file'); +// } +// ).catch(console.error); +// }); +// }); +// }); +// } +// +// function restoreCounter() { +// // Restore count value +// counterStorage.get((count: number) => { +// if (typeof count === 'undefined') { +// // Set counter value as 0 +// counterStorage.set(0, () => { +// setupCounter(0); +// }); +// } else { +// setupCounter(count); +// } +// }); +// } +// +// document.addEventListener('DOMContentLoaded', restoreCounter); +// +// // Communicate with background file by sending a message +// browser.runtime.sendMessage( +// { +// type: 'GREETINGS', +// payload: { +// message: 'Hello, my name is Pop. I am from Popup.', +// }, +// }).then((response) => { +// console.log(response.message); +// } +// ); })();