Using Custom CSS

Add-ons Development
#1

I apologize in advance if this has been answered before, but I have not been able to find one anywhere. I’m working on a project and I am wanting to make a Firefox Extension to display a tooltip when a user is entering information into a Username and Password input field. I have only been able to do this by creating a custom Web App separate from the extension project files and putting my css in the web app.

I tried making a css file inside the extension project with the same css code from the web app and then referencing that file in the content scripts inside the manifest.json but that didn’t work. I tried googling how to apply custom css inside a Firefox extension project and all I could ever find was people referencing current extensions that do it for you, but I don’t want that.

Any insight would be greatly appreciated and again, apologies if this has been answered before.

#2

To access CSS file from content script, you need to list it in the “web_accessible_resources” field in the manifest:
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources

Then dynamically load it from javascript, something like this:

Or you can load dynamic CSS without file:

async function loadCSS(style) {
  const link = document.createElement('link');
  link.href = `data:text/css;base64,${btoa(style)}`;
  link.type = 'text/css';
  link.rel = 'stylesheet';
  return new Promise((resolve, reject) => {
    link.onload = resolve;
    link.onerror = reject;
    document.head.appendChild(link);
  });
}
#3

The style sheet wasn’t available in the content? What did your manifest key look like?

Alternately, maybe try:

https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS

#5

Thanks for your response. For your first answer, where does web_accessible go? Inside content_scripts? For your second answer, is this code supposed to be in the main js file I’m using? Thank you

#6

Thank you for your response. This is what my content script looks like:
“content_scripts”: [
{
“matches”: ["<all_urls>"],
“js”: [“jquery-3.5.1.min.js”, “tracklogin.js”],
“css”: [“tooltip.css”]
}
]

In the link you provided, is that code supposed to be in the main js file I’m using?
Thank you.

#7

The web_accessible_resources goes to the manifest file, see example here:
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json

The code I’ve pasted must be running in your content script script - because it will modify current DOM by injecting “link” node with style.

#10

The insertCSS method provides a way to inject style sheets – either files or ad hoc rules – from your background script. This is more relevant to situations in which you might not always want to inject the same style sheet, or you have a permission model that injects on click (using activeTab permission).