Background: Hello everyone, I’m a high school student building an addon to modify font-size
and color
properties of our school’s website.
Structure of files:
-
/popup
├──
options.html
with 2 checkboxes (Font-Size, Change Color)├──
options.js
to save state and retrieve value of checkboxes from localStorage.├──
options.css
to style the popup. -
manifest.json
-
content_script.js
which targets elements on DOM withDocument.getElementsByClassName()
and toggles custom classnamescustomSize
andcustomColor
. -
custom.css
gives rules to the custom classnames. -
icon128.png
-
icon256.png
Problem: I am able to store and retrieve boolean values of checkboxes inside the popup, but can’t send them across to content_script.js
. Even using browser.tabs.executeScript()
.
Manually appending custom classnames from the browser console works like a charm.
Relevant code:
-
options.js
function restoreOptions() { document.getElementById("font-size").checked=JSON.parse(localStorage.getItem("size")); //assigning retrieved value to checkbox const executing = browser.tabs.executeScript({ file: "/content-script.js", allFrames: true }); executing.then(onExecuted, onError); } function onExecuted(result) { console.log(`Color changed`); } function onError(error) { console.log(`Error: ${error}`); }
-
content_script.js
let bigger = JSON.parse(localStorage.getItem("size")); if (bigger) { document.getElementsByClassName("paragraph")[0].classList.add("customSize"); } else { document.getElementsByClassName("paragraph")[0].classList.remove("customSize"); }
-
custom.css
.customSize { font-size: 24pt; color: #3c8ce0; }
How can I fix this?