Message: SyntaxError: missing : after property id

Question

I'm trying to learn how to make simple add on for firefox. I base on this tutorial.

This is my code:

lib/main.js

var self = require("sdk/self");

var button = require("sdk/ui/button/action").ActionButton({
  id: "style-tab",
  label: "Style Tab",
  icon: "./icon-16.png",
  onClick: function() {
    require("sdk/tabs").activeTab.attach({
        contentScriptFile: [self.data.url("jquery.js"), self.data.url("edit-page.js")]
    });
  }
});

data/edit-page.js

$("body div").css("visibility", "hidden");
$("body").append( $("#addon_hide_page") );

var styles = {
    width: "100%",
    height: "100%",
    backgroud-color: "gray"
}

$("body #addon_hide_page").css(styles);

The error was typed in the title of this question: "Message: SyntaxError: missing : after property id". As is see: there IS a ":" after "id" (fourth line in main.js). So, what's going on?

BTW: Is there a better way for debugging firefox addons than reading those not-helpful-statements in Windows CMD?

Answer 1

In data/edit-page.js You can't have a property called background-color the dash messes it up. You have to put it in quotes. So:

$("body div").css("visibility", "hidden");
$("body").append( $("#addon_hide_page") );

var styles = {
    width: "100%",
    height: "100%",
    "backgroud-color": "gray" ////////////////fix here
}

$("body #addon_hide_page").css(styles);

The best way to debug is to use browser console. Set the developement preferences (install this addon: DevPrefs) then press Ctrl+Shift+J and watch the error messages. Use console.log console.info console.warn and console.error to log messages into Browser Concole. Do console.log(objectName) and in browser console you can click on that object and it will show you whats inside it.