javascript - 消息 : SyntaxError: missing : after property id

Question

我正在尝试学习如何为 Firefox 制作简单的插件。我基于 this tutorial .

这是我的代码:

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

数据/编辑页面.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 之后”。正如所见:在“id”之后有一个“:”(main.js 中的第四行)。那么，这是怎么回事？

顺便说一句:有没有比阅读 Windows CMD 中那些无用的语句更好的调试 firefox 插件的方法？

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 将消息记录到 Browser Concole。执行 console.log(objectName) 并在浏览器控制台中单击该对象，它会显示其中的内容。