Long ago at Atomic Object, we built a custom timekeeping app called Punchit, and not long ago, I shared how we could tweak the design of internal tools using a Chrome extension. In my first blog post, we added custom styles to Rainy Mood as a proof of concept. But what if you want to toggle that styling on and off dynamically? Let’s walk through an iterative approach to do just that.
Step 1: Add the Toggle
First, we need to modify our popup to include a toggle switch. We’ll add this to our hello.html file:
<style>
body {<br /> background-color: #222<br /> color: cornflowerblue;<br /> <yoastmark class="yoast-text-mark">}</yoastmark><br /> h1 {<br /> font-size: 24px;<br /> font-family: 'Papyrus', sans-serif<br /> <yoastmark class="yoast-text-mark">}</yoastmark><br /> label {<br /> font-size: 16px;<br /> <yoastmark class="yoast-text-mark">}</yoastmark><br /> </style>
<h2>My Rainymood Updater</h2>
<label>
<input id="toggle-styling" type="checkbox" />
Enable Custom Styling
</label>
<script src="popup.js"></script>
In this HTML, we’ve added a simple <input type="text" /> element for the checkbox.
Next, we’ll modify our popup.js to listen for changes to the switch:
document.addEventListener("DOMContentLoaded", () => {
const toggleSwitch = document.getElementById("toggle-styling");
// Listen for changes to the toggle switch
toggleSwitch.addEventListener("change", () => {
const isChecked = toggleSwitch.checked;
console.log("In toggleSwitch onChange - isChecked:", isChecked);
});
});
When the page loads, we hook into the toggle switch and listen for any changes, logging the new state to the console. Take a look in your console by right clicking your extension icon and selecting “Inspect Popup”, then toggle your checkbox to see the log message printed in the console.
At this point, the toggle doesn’t do much, but we’ve laid the groundwork for controlling the styling.
Step 2: Save the Toggle State
We want the styling state to persist even after closing the browser. To do this, we’ll use chrome.storage.sync to save the toggle state.
First, ensure your manifest.json includes the following permission:
"permissions": ["storage"],
Then, we can update popup.js to load and save the toggle state:
document.addEventListener("DOMContentLoaded", () => {
const toggleSwitch = document.getElementById("toggle-styling");
// Load the saved toggle state from chrome.storage and set the switch accordingly
chrome.storage.sync.get("isStylingEnabled", (data) => {
toggleSwitch.checked = data.isStylingEnabled ?? true; // Default to true if not set
});
// Listen for changes to the toggle switch
toggleSwitch.addEventListener("change", () => {
const isChecked = toggleSwitch.checked;
console.log("In toggleSwitch onChange - isChecked:", isChecked);
// Save the updated state in chrome.storage
chrome.storage.sync.set({ isStylingEnabled: isChecked });
});
});
This script now does two things: it loads the saved state of the switch when the popup opens and saves the new state whenever the user toggles the switch. This allows us to persist the styling preference across sessions.
Step 3: Add or Remove Styling Based on the Toggle
Now that we have the toggle working and saving its state, it’s time to apply or remove styling based on that state.
We’ll modify content.js to check the saved toggle state and apply custom styles accordingly:
// Function to apply or remove custom styling based on the toggle state
function applyStyling(isEnabled) {
if (isEnabled) {
const customCss = `
.center-block h1 {
color: cornflowerblue !important;
}
`;
const style = document.createElement("style");
style.id = "custom-styles";
style.textContent = customCss;
document.head.appendChild(style);
} else {
const style = document.getElementById("custom-styles");
if (style) {
style.remove();
}
}
}
// Check the saved state when the page is loaded and apply/remove styling accordingly
chrome.storage.sync.get("isStylingEnabled", (data) => {
applyStyling(data.isStylingEnabled ?? true); // Default to true if not set
});
// Listen for changes in chrome.storage and update the styling in real-time
chrome.storage.onChanged.addListener((changes) => {
if (changes.isStylingEnabled) {
applyStyling(changes.isStylingEnabled.newValue);
}
});
This script checks the saved toggle state when the page loads and applies the custom styles if enabled. It also listens for changes to the toggle state and applies or removes the styles in real-time.
Take a look at your results!
Next Steps
So now, we’ve iteratively added a toggle switch to control custom styling on a webpage. We used chrome.storage.sync to save the state of the switch, ensuring that the styling preference persists across sessions, and dynamically applied or removed the styles based on that state.
In a future post, we’ll explore how to take user input directly from the popup to customize even more elements on the page. Stay tuned!