Сообщение: ошибка синтаксиса: отсутствует: после идентификатора свойства

Question

Я пытаюсь узнать, как сделать простое дополнение для Firefox. Я основываюсь на этом уроке.

Это мой код:

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")]
    });
  }
});

данные / редактировать-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);

Ошибка была напечатана в заголовке этого вопроса: "Сообщение: ошибка синтаксиса: отсутствует: после идентификатора свойства". Как видите: после "id" стоит ":" (четвертая строка в main.js). Так, что происходит?

Кстати: есть ли лучший способ для отладки аддонов Firefox, чем читать эти бесполезные заявления в 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) и в консоли браузера вы можете нажать на этот объект, и он покажет вам, что внутри него.