How to embed css files in a firefox web extension?

2
votes

I'm currently developing a firefox Web Extension and i am struggeling with including the css files for jquery ui to use them in the content script.

Oddly enough the javascript works just fine.

I've looked into documentation here:

My attempts were this:

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

from within contentscript:

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>`);
    }

manifest file:

{
    "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"
}

Neither attempt worked. Does anyone have a clue what i might be doing wrong here?

1
firefoxfirefox-addon-webextensions

1 Answers

2
votes

The manifest file entry was all that was needed - the issue was down to the custom css namespace i specified was not within the body.