Question

I wrote this extension that basically changes the look of a website using CSS and JS. But now I want to add some checkbox settings to the extension so users can toggle features of the website.

I tried reading the documentation, and searched all over the web. Even tried to look for demo extensions that I could reverse engineer, but to no avail.

Let’s say I want to add a “Check Box”, title it “sidebar” and given it a “key” value of “tg_sidebar”. Can someone explain how I would add an event listener for this, and then trigger some jquery code?

[I think this StackOverflow query [http://stackoverflow.com/questions/3032945/safari-extension-how-to-respond-to-settings-changes] makes things clear, but it still doesn’t explain much.]

Here’s one thing that worked.

function numberChanged(event) 
{
         if(event.key == "tg_sidebar")
             alert("Number has changed!");
    }

    safari.extension.settings.addEventListener("change",numberChanged,false);

[Screenshot of the Extension Settings window: http://dznr.org/56wi%5D

Now whenever I toggle the setting, I get an error. But replacing that alert function with say adding or removing a CSS class doesn’t work.

I also tried using the code by the answerer below, but that doesn’t do anything. Would have been perfect to be able to look at the code of some extension…

One more thing, in case it wasn’t clear, is that the setting should make the change permanent. That is, when the setting is ticked, it should do that action every time the page loads.

Answer 1

Assuming you have it setup in your extensions.
It’s pretty simple. Every time your function is called in your global.html call this:

    var type = safari.extension.settings.yourSettingsCall;

example:

var type;
        function performCommand(event)
    {
        if (event.command === "start-event") {
            type = safari.extension.settings.tg_sidebar;
}
    safari.application.activeBrowserWindow.activeTab.page.dispatchMessage("type", type);
        }

then your inject.js add these:

safari.self.addEventListener("message", handleMessage, false);

and

function handleMessage(event){
    if (event.name === "type") {
//run code
    }
}