Question

我目前正在开发一个firefox Web扩展，我正在努力将jquery ui的css文件包含在内容脚本中使用它们。

奇怪的是，javascript工作正常。

我在这里查看了文档：

我的尝试是这样的：

backgroundscript：

await browser.tabs.insertCSS(tab.id, {
    file: "lib/jquery-ui-1.12.1.custom/jquery-ui.min.css"
});
await browser.tabs.insertCSS(tab.id, {
    file: "lib/jquery-ui-1.12.1.custom/jquery-ui.structure.min.css"
});
await browser.tabs.insertCSS(tab.id, {
    file: "lib/jquery-ui-1.12.1.custom/jquery-ui.min.theme.min.css"
});

内容中的

：

let $body = $("body");

    var css = [
        "lib/jquery-ui-1.12.1.custom/jquery-ui.min.css",
        "lib/jquery-ui-1.12.1.custom/jquery-ui.structure.min.css",
        "lib/jquery-ui-1.12.1.custom/jquery-ui.min.theme.min.css"
    ];

    console.log(`css lib count ${css.length}`);
    for (let i = 0; i < css.length; i++) {
        console.log("add style css");
        $body.append(`<style type="text/css" src="moz-extension://893f7924-49a9-47c7-b998-4f2a13433f34/${css[i]}"></script>`);
    }

清单文件：

{
    "background": {
        "scripts": [
            "lib/jquery-3.2.1.min.js",
            "lib/jquery.hotkeys.js",
            "background.js"
        ]
    },
    "page_action": {
        "browser_style": true,
        "default_title": "TabGroups"
    },
    "content_scripts": [
        {
            "matches": [ "*://*/*" ],
            "js": [
                "lib/jquery-3.2.1.min.js",
                "lib/jquery.hotkeys.js",
                "lib/jquery-ui-1.12.1.custom/jquery-ui.min.js",
                "contentscript.js"
            ],
            "css": [
                "lib/jquery-ui-1.12.1.custom/jquery-ui.min.css",
                "lib/jquery-ui-1.12.1.custom/jquery-ui.structure.min.css",
                "lib/jquery-ui-1.12.1.custom/jquery-ui.theme.min.css"
            ]
        }
    ],
    "description": "type 'tg' to use tab group commands.",
    "icons": {
        "24": "content/ic_tab_black_24px.svg"
    },
    "omnibox": { "keyword": "tg" },
    "manifest_version": 2,
    "name": "TabGroups",
    "permissions": [
        "activeTab",
        "<all_urls>",
        "tabs",
        "storage"
    ],
    "version": "0.9"
}

两种尝试均无效。有没有人知道我在这里做错了什么？

Answer 1

清单文件条目是所有需要的 - 问题归结为我指定的自定义css命名空间不在正文中。

如何在firefox Web扩展中嵌入css文件？

backgroundscript：

：

清单文件：

1 个答案: