I have an existing theme which I'm updating to manifest v3. Everything is fine with that process but I decided to dig deeper and offer a users a couple of options for the theme. I now have an options.html and did have an options.js but had to embed that in the html file as I couldn't get it to use the external script.
I have 95% of this all working (style, click events all firing correctly and a couple of variables I need to save to some local storage (or ideally using chrome.storage.local.set() and chrome.storage.local.get().
Every time I try to use these I keep getting an error Cannot read properties of undefined (reading 'local') I've tied local sync and session on both get and set but I always end up with this error. I've also tried just storage.local Uncaught ReferenceError: storage is not defined. Not sure if it's my javascript, how I am running my extension locally, the limitations of running it local or something else.
manifest.json
{
"version": "1.0",
"manifest_version": 3,
"name": "name of theme",
"description": "description of theme",
"theme": {
"images": {
"theme_ntp_background": "images/main.png"
},
"colors": {
"bookmark_text": [ 0, 128, 0 ],
"ntp_text": [ 128, 0, 0 ],
"tab_background_text": [ 0, 0, 128 ],
"tab_text": [ 255, 255, 255 ],
"toolbar": [ 210, 212, 202 ]
},
"tints" : {
"buttons" : [0.33, 0.5, 0.47]
},
"properties" : {
"ntp_background_alignment" : "top"
}
},
"permissions": [
"storage"
],
"options_ui": {
"page": "options.html",
"open_in_tab": false
},
"web_accessible_resources":[
"options.js",
"images/option-resolution-1.jpg",
"images/option-resolution-2.jpg",
"images/option-resolution-3.jpg",
"images/option-style-1.jpg",
"images/option-style-2.jpg",
"images/option-style-3.jpg"
]
}
My options.html
<html>
<!--
...
-->
<script>
const tiles = document.getElementsByClassName('tile');
let style = 1;
let res = 3;
//...
const restoreOptions = () => {
console.log('loaded restore');
console.log('style: ' + style);
console.log('res: ' + res);
chrome.storage.sync.get(
{ style: 1, res: 1 },
(items) => {
style = items.style;
res = items.res;
}
);
};
//onload
document.addEventListener('DOMContentLoaded', restoreOptions);
</script>
</html>
I'm even just trying this to try and get it to work.
chrome.storage.local.set({ key: "value" }).then(() => {
console.log("Value was set");
});
console.dir(storage); //Uncaught ReferenceError: storage is not defined
console.dir(storage.local); //Uncaught ReferenceError: storage is not defined
console.dir(chrome); //{csi, loadtimes, Object}
console.dir(chrome.storage); //undefined
console.dir(chrome.storage.local); //options.html:179 Uncaught TypeError: Cannot read properties of undefined (reading 'local')
The way I'm loading my extension is through chrome://extensions/ page with "development mode" on, I'm then selecting "Load unpacked" and choosing my directory where I have my files.
I then have to navigate (annoyingly) to a new tab, select the pencil then click "Edit the current theme you have installed" which sends me to a page which isn't available but it gives me the unique id of the extension. I can then just simply go to chrome-extension://{myfunnylongidthatseemstostaystaticanyway}/options.html