I’m trying to write a script that saves a url and a custom message for said url, and when I visit the url, it will redirect me to a new page with the custom message and a button to proceed to the page if I want. So far this is what I have-
// Open the IndexedDB database
var request = window.indexedDB.open("myDatabase", 1);
var db;
request.onerror = function(event) {
console.log("Error opening database.");
};
request.onsuccess = function(event) {
db = event.target.result;
// Retrieve the saved URLs and messages from the database
var transaction = db.transaction(["customMessages"], "readonly");
var objectStore = transaction.objectStore("customMessages");
var savedData = {};
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
savedData[cursor.key] = cursor.value;
cursor.continue();
}
};
// Function to add a new custom message and URL to the database
function addCustomMessage() {
var url = prompt("Enter the URL to customize:");
var message = prompt("Enter the custom message for this URL:");
var transaction = db.transaction(["customMessages"], "readwrite");
var objectStore = transaction.objectStore("customMessages");
objectStore.put(message, url);
savedData[url] = message;
};
// Listen for changes to the database and update saved data
var observer = new MutationObserver(function(mutationsList, observer) {
for (var mutation of mutationsList) {
if (mutation.type === 'attributes' && mutation.attributeName === 'data-custom-messages') {
// Retrieve the updated saved data from the database
var transaction = db.transaction(["customMessages"], "readonly");
var objectStore = transaction.objectStore("customMessages");
savedData = {};
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
savedData[cursor.key] = cursor.value;
cursor.continue();
}
};
}
}
});
observer.observe(document.body, { attributes: true, attributeFilter: ['data-custom-messages'] });
// Loop through the saved URLs and redirect if there is a match
function checkSavedData() {
for (var url in savedData) {
if (window.location.href.indexOf(url) !== -1) {
var message = savedData[url];
// Display the custom message with a link to the original URL
var confirmation = confirm(message + "nnDo you want to proceed to the original URL?");
if (!confirmation) {
window.location.href = "about:blank";
}
}
}
}
checkSavedData();
// Add a button to the custom message page to load the original URL
var customMessagePage = document.createElement("div");
customMessagePage.innerHTML = "<h1>Custom Message</h1><p>This is a custom message for this URL.</p><button id="load-original-url">Load original URL</button>";
customMessagePage.querySelector("#load-original-url").addEventListener("click", function() {
window.location.href = url;
});
document.body.appendChild(customMessagePage);
// Add a button to the page to add a new custom message
var addCustomMessageButton = document.createElement("button");
addCustomMessageButton.innerHTML = "Add Custom Message";
addCustomMessageButton.addEventListener("click", addCustomMessage);
document.body.appendChild(addCustomMessageButton);
// Listen for clicks on links and check saved data before redirecting
document.addEventListener("click", function(event) {
if (event.target.tagName.toLowerCase() === "a") {
var url = event.target.href;
if (savedData[url]) {
event.preventDefault();
window.history.pushState({}, "", "custom-message.html");
document.body.setAttribute("data-custom-messages", JSON.stringify(savedData));
}
checkSavedData();
}
});
};
// Create the object store in the database
request.onupgradeneeded = function(event) {
db = event.target.result;
var objectStore = db.createObjectStore("customMessages", { keyPath: "url" });
};
When I load any page, it doesn’t seem to display the “Add Custom Message” button, and when I load a separate script to do so, it never redirects me. How should I go about fixing this script?