Manifest.json
{
"manifest_version": 3,
"name": "Browser Cache Cleaner",
"version": "1.0",
"description": "Quickly clear browser cache, cookies, and history with Browser Cache Cleaner, enhancing your browsing speed and privacy.",
"action": {
"default_popup": "popup.html"
},
"icons": {
"16": "icons/bcc16.png",
"48": "icons/bcc48.png",
"128": "icons/bcc128.png"
},
"permissions": [
"storage",
"activeTab",
"scripting",
"browsingData",
"tabs"
],
"host_permissions": [
"*://*/*"
],
"background": {
"service_worker": "background.js"
}
}
popup.html
<!DOCTYPE html>
<html>
<head>
<title>Browser Cache Clearer</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<span class="head-ing"> Browser Cache Cleaner. V2 <br></span>
<span class="subhead-ing">for Microsoft Edge Browser</span>
<p></p>
<div id="browserVersionInfo"></div>
<form id="dataOptions">
<div>
<input type="checkbox" id="selectAll"> Select All
</div>
<hr>
<div>
<input type="checkbox" id="cache" checked>
<span class="checkbox-label">1. Cache</span>
<span class="desc">(Clears browser cache)</span>
</div>
<div>
<input type="checkbox" id="cookies">
<span class="checkbox-label">2. Cookies</span>
<span class="desc">(Removes cookies storing user activity and preferences)</span>
</div>
<div>
<input type="checkbox" id="history">
<span class="checkbox-label">3. Browsing History</span>
<span class="desc">(Deletes the record of visited web pages)</span>
</div>
<div>
<input type="checkbox" id="fileSystems">
<span class="checkbox-label">4. File Systems</span>
<span class="desc">(Clears data in file systems API used by some web apps)</span>
</div>
<div>
<input type="checkbox" id="indexedDB">
<span class="checkbox-label">5. IndexedDB</span>
<span class="desc">(Removes data in IndexedDB for structured data storage)</span>
</div>
<div>
<input type="checkbox" id="localStorage">
<span class="checkbox-label">6. Local Storage</span>
<span class="desc">(Clears local storage used for key-value pair data)</span>
</div>
<div>
<input type="checkbox" id="serviceWorkers">
<span class="checkbox-label">7. Service Workers</span>
<span class="desc">(Clears data related to background scripts for web apps)</span>
</div>
<div>
<input type="checkbox" id="downloads">
<span class="checkbox-label">8. Downloads</span>
<span class="desc">(Removes the browser's download history records)</span>
</div>
<div>
<input type="checkbox" id="formdata">
<span class="checkbox-label">9. Form Data</span>
<span class="desc">(Clears saved form information like names and addresses)</span>
</div>
<div>
<input type="checkbox" id="passwords">
<span class="checkbox-label">10. Passwords</span>
<span class="desc">(Removes saved passwords from the browser)</span>
</div>
<div>
<input type="checkbox" id="pluginData">
<span class="checkbox-label">11. Plugin Data</span>
<span class="desc">(Clears data stored by plugins)</span>
</div>
</form>
<div id="statusMessage" style="margin-top: 10px;margin-bottom: 10px;"></div>
<hr>
<button id="clearDataButton">Clear Selected Data</button>
<button id="captureBtn">Capture Screenshot</button>
<script src="popup.js"></script>
<span class="copyright"><br> <br>Edge extension by AdventHealth Infra Admin Team<br>(Copyrights 2023. All rights reserved)</span>
</body>
</html>
style.css
/* Add your styling here */
#clearDataButton {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 10px;
text-align: center;
background-color: #f4f4f4;
color: #333;
width: 550px;
height: 580px;
margin: auto;
overflow-y: auto;
overflow: hidden;
}
h1 {
color: #5a5a5a;
}
#dataOptions {
margin: 20px 0;
text-align: left;
}
#dataOptions div {
margin-bottom: 10px;
}
input[type="checkbox"] {
margin-right: 10px;
}
button {
background-color: #3c2cca;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
margin-right: 20px
}
#captureBtn {
background-color: green;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #3c2cca;
}
.cleared {
position: relative;
padding-left: 25px;
/* Adjust space for check mark */
}
.cleared::before {
content: '\2714';
/* Unicode check mark */
position: absolute;
left: 0;
color: green;
}
.checkbox-label {
font-weight: bold;
color: rgb(11, 31, 212);
}
.head-ing {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 30px;
}
.subhead-ing {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: rgb(11, 31, 212);
}
.copyright {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: rgb(96, 113, 136);
}
popup.js
document.addEventListener("DOMContentLoaded", function () {
var selectAllCheckbox = document.getElementById("selectAll");
var otherCheckboxes = document.querySelectorAll(
'#dataOptions input[type="checkbox"]:not(#selectAll)'
);
var clearDataButton = document.getElementById("clearDataButton");
var statusMessage = document.getElementById("statusMessage");
var checkboxes = document.querySelectorAll(
'#dataOptions input[type="checkbox"]'
);
selectAllCheckbox.addEventListener("change", function () {
checkboxes.forEach((checkbox) => {
checkbox.checked = this.checked;
checkbox.parentElement.classList.remove("cleared"); // Remove cleared class if needed
document.getElementById("statusMessage").innerHTML = "";
});
});
checkboxes.forEach(function (checkbox) {
checkbox.addEventListener("change", function () {
// If any checkbox is unchecked, uncheck the selectAllCheckbox
if (!this.checked) {
selectAllCheckbox.checked = false;
}
});
});
clearDataButton.addEventListener("click", function () {
// Check if any checkbox is selected
var isAnyCheckboxSelected = Array.from(checkboxes).some(
(checkbox) => checkbox.checked
);
if (!isAnyCheckboxSelected) {
// Show 'nothing selected' message
statusMessage.textContent = "No selection(s) found!";
statusMessage.style.color = "red";
checkboxes.forEach((checkbox) => {
checkbox.parentElement.classList.remove("cleared");
});
return; // Exit the function
}
var options = {
cache: document.getElementById("cache").checked,
cookies: document.getElementById("cookies").checked,
history: document.getElementById("history").checked,
fileSystems: document.getElementById("fileSystems").checked,
indexedDB: document.getElementById("indexedDB").checked,
localStorage: document.getElementById("localStorage").checked,
serviceWorkers: document.getElementById("serviceWorkers").checked,
downloads: document.getElementById("downloads").checked,
formData: document.getElementById("formdata").checked,
passwords: document.getElementById("passwords").checked,
pluginData: document.getElementById("pluginData").checked,
};
chrome.runtime.sendMessage({ action: "clearData", options: options });
updateStatusMessage();
document.getElementById("statusMessage").style.color = "red";
var checkedItems = document.querySelectorAll(
'#dataOptions input[type="checkbox"]:checked:not(#selectAll)'
);
checkboxes.forEach((checkbox) => {
checkbox.parentElement.classList.remove("cleared");
});
checkedItems.forEach((item) => {
item.parentElement.classList.add("cleared");
});
});
displayEdgeVersion();
});
function updateStatusMessage() {
var now = new Date();
var options = {
year: "numeric",
month: "numeric",
day: "numeric",
hour: "numeric",
minute: "numeric",
second: "numeric",
timeZoneName: "short",
};
var dateString = new Intl.DateTimeFormat("en-US", options).format(now);
var message = "Selected data cleared from your browser<br>" + dateString;
document.getElementById("statusMessage").innerHTML = message;
}
function displayEdgeVersion() {
var userAgent = navigator.userAgent;
var edgeVersionMatch = userAgent.match(/Edg\/([\d\.]+)/); // Find Edge version
// var edgeVersionMatch = userAgent.split('Edge/')[1];
var edgeVersion = edgeVersionMatch
? "Your Edge Version:" + edgeVersionMatch[1]
: "Edge version not detected";
// Displaying version info
document.getElementById("browserVersionInfo").textContent = edgeVersion;
}
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
if (message.action === "captured") {
downloadImage(message.image);
}
});
function downloadImage(imageData) {
var link = document.createElement("a");
link.href = imageData;
link.download = "screenshot.png";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
document.getElementById("captureBtn").addEventListener("click", function () {
chrome.runtime.sendMessage({ action: "capture" });
});
background.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request.action === "clearData") {
// Call clearBrowserData and then send response
clearBrowserData(request.options)
.then(() => {
sendResponse({ action: "clearDataResponse" });
})
.catch((error) => {
console.error("Error clearing data:", error);
sendResponse({ action: "clearDataResponse", error: error.message });
});
// Return true to keep the messaging channel open for the response
return true;
}
});
function clearBrowserData(options) {
return new Promise((resolve, reject) => {
var dataToRemove = {};
// Existing options
if (options.cache) dataToRemove.cache = true;
if (options.cookies) dataToRemove.cookies = true;
if (options.history) dataToRemove.history = true;
if (options.fileSystems) dataToRemove.fileSystems = true;
if (options.indexedDB) dataToRemove.indexedDB = true;
if (options.localStorage) dataToRemove.localStorage = true;
if (options.serviceWorkers) dataToRemove.serviceWorkers = true;
if (options.downloads) dataToRemove.downloads = true;
if (options.formData) dataToRemove.formData = true;
if (options.passwords) dataToRemove.passwords = true;
if (options.pluginData) dataToRemove.pluginData = true;
chrome.browsingData.remove({ since: 0 }, dataToRemove, () => {
console.log("Selected data cleared.");
resolve();
});
});
}
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request.action === "capture") {
chrome.tabs.captureVisibleTab(null, { format: "png" }, function (image) {
// Send the image data to the popup script
chrome.runtime.sendMessage({ action: "captured", image: image });
});
}
});
