Created a chrome extension that alters text on that webpage. The toggle on switch activates the code and changes the text.(Perfect)
Content.js:
// Listen for messages from the popup
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.toggle) {
// Toggle the bolding of text on the page
toggleBold();
}
});
// Function to toggle the bolding of text on the page
function toggleBold() {
MY SCRIPT CODE IS HERE
}
Popup.js
const toggleButton = document.getElementById('toggleButton');
// Send a message to the content.js to turn it on or off
if (toggleButton) {
toggleButton.addEventListener('click', () => {
chrome.tabs.query({active: true, currentWindow: true}, tabs => {
const tab = tabs[0];
chrome.tabs.sendMessage(tab.id, {toggle: true});
toggleButton.innerText = toggleButton.innerText === 'Turn On' ? 'Turn Off' : 'Turn On';
});
});
}
Popup.html
<!DOCTYPE html>
<html>
<head>
<title>Turn On/Off</title>
<style>
button {
font-size: 16px;
padding: 10px;
}
</style>
</head>
<body>
<button id="toggleButton">Turn On</button>
<script src="popup.js"></script>
</body>
</html>
When I toggle my extension off it just runs the code again.(Flaw) Just how my code activates immediately on the page. How can I make the code deactivate immediately without user needing to refresh to see those changes? And how can I make my script stay active while the user navigates to other websites and refreshes?
Thanks in advanced
I am researching pushstate to maybe create an option to undo the script when the user toggles off. But i havent checked yet for an option to keep my script activated when the user navigates and refreshes while toggled on.
