Message: SyntaxError: missing: after id property

Question

I am trying to learn how to make a simple add-on for firefox. I am based on this tutorial .

This is my code:

Library / 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);

An error was introduced in the title of this question: "Message: SyntaxError: missing: after property id". As you can see: there is a ":" after "id" (the fourth line in main.js). So what is going on?

BTW: Is there a better way to debug Firefox add-ons than reading these non-useful statements in Windows CMD?

Answer 1

data/edit-page.js , background-color. . :

$("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);

- . ( : DevPrefs), Ctrl+Shift+J . console.log console.info console.warn console.error Concole. console.log(objectName) , , .