Question

当我将CSS添加到其中时，我的清单无法正常工作，而当我这样做时，它可以在Chrome扩展程序中使用。

我的清单看起来如何：

  "css": ["css/jquery-ui.css", "css/font-awesome.css", "css/simplegrid.css", "css/basic.css"],
  "js": ["jquery.js", "jquery-ui.js", "myPeaceFile.js"],

myPeaceFile.js有效，jquery正在运作。但CSS文件不是。

我之前曾问过有关jquery无效的问题。它看起来像这样：

"js": ["peace.js", "jquery.js"] - 没有工作。

然后我被建议了这个并且它有效：

"js": ["jquery.js", "peace.js"]

它有类似之处吗？请帮忙。

谢谢！

Answer 1

您可以使用Style将CSS附加到页面，在main.js中定义样式并将此样式附加到内容脚本。

var { Style }   = require('sdk/stylesheet/style');
var style       = Style({
    uri: './bootstrap.css'
});

tabs.on('ready', function(tab) {
    let worker = tab.attach({
        contentScriptFile: [
            data.url("jquery.min.js"), 
            data.url("jquery-ui/jquery-ui.min.js"),
            data.url("mycontent-script.js"),
        ]
    });
    attach(style, tab);
});

在第二行的Style构造函数中，您可以传递一个字符串或一个字符串数组，表示样式表的本地URI。在这种情况下，./bootstrap.css位于扩展程序的data文件夹中。

Firefox扩展 - 包括manifest.json中的CSS

1 个答案: