Hi,

I was wondering, what would be the best way to create a simple
settings system in a Chrome extension?

All I want is there to be a "Options" page with a list of checkboxes
and then for a content script to check the value of each box (checked
or null) and then include or not include a bit of CSS based off that
response.

I'm a complete newbie when it comes to this stuff but have managed to
make it so when I click a checkbox the value "checked" is saved in
localStorage, and I retrieve it on the Options page, but can't seem to
make it work with other parts of the extension. :-)

You can't access the localStorage of your extension from a Content Script. You will likely have to make a Background Page that will retrieve the values and tell the Content Script what's stored with communication.
You can read this over for an idea of how communication works.
The model I'd suggest is to make your Content Script send out a message when it runs, that the Background Page will pick up and respond with the saved data.

Originally Posted by Waha

You can't access the localStorage of your extension from a Content Script. You will likely have to make a Background Page that will retrieve the values and tell the Content Script what's stored with communication.
You can read this over for an idea of how communication works.
The model I'd suggest is to make your Content Script send out a message when it runs, that the Background Page will pick up and respond with the saved data.

Thanks for the quick and simple response. I think I've got that under control, but now I seem to have another problem.

I'm trying to change the look of Gmail with my extension, and by using a CSS file in the manifest under content scripts that's easy enough to do and works fine. The problem arises when I try to make certain elements toggable (such as being able to disable Gmail's logo).

For this I'm using a javascript file, also as a content script, and I have tested this code:

document.write("<link href='../css/minimalist.css' rel='stylesheet' type='text/css' />");

...but although it's the same stylesheet it doesn't change the look of Gmail. at all. Any thoughts?

I'd first of all suggest using absolute paths in your links.
Secondly I'd suggest to never use document.write as it's REALLY wonky.

The best way is to just use the injectable css if that's what you want. If you want variable includes, I'd suggest using DOM commands instead.
The equivalent would be:

Code:

var link = document.createElement("link");
link.setAttribute("href",chrome.extension.getURL("css/minimalist.css"));
link.setAttribute("rel","stylesheet");
link.setAttribute("type","text/css");
document.head.appendChild(link);

It works a bit more cleanly, even if it takes more code, and it's more assured to update the browser with everything it's meaning to do.

I think I'm in love with you. Worked absolutely perfectly. I still have a bit to do before this version of my extension goes live but I'll definitely give you credit on the options page (could be significant if the extension's a hit). :-)

And thanks for the other tips too.

lol thanks. Good luck with making a hit.