Customizing plugins appearance

[BoomerangAide]

Hi,

Adblock Plus and Noscript, 2 well-known plugin, have a popup appearing when you click their button.
At first, it may seems it's impossible to modify the appearance of those popup, as they are out of range of the element selector of both the page tool and browser tool.
And yet, for now at least (Firefox 104.0.1 and lower, at least including Firefox ESR 91.13.0), there's an approach available for the users of CustomCSSforFx 😉

If you open these popup and do a right click in them in the right place, you may get access to the "view source of the page" option.
This would lead to a page like "view-source:moz-extension://adec64a4-3a2e-4eeb-a06a-462f658e982d/popup.html" for the Adblock Plus I'm using as an example to write this.

From there, you may find the structure of the page, and even if it is not populated with data, you could try loading the .js and .css files to see how it work and how it is presented.
Sometimes you will have to type the url because clicking won't work; in my test now, I could not access "skin/popup.css" by clicking on it, and had to type "moz-extension://adec64a4-3a2e-4eeb-a06a-462f658e982d/skin/popup.css" directly (in this case, the "view-source" wasn't necessary, it may not always be the case).

Once you've found the files with .css code with interesting content that you want to override, the file you need to edit (and maybe create) is "my_userContent.css".
In it, use a code like this:

@-moz-document url(moz-extension://adec64a4-3a2e-4eeb-a06a-462f658e982d/popup.html) {
	/* Insert style changes here */
}

As you can see, in the parenthesis of "url", you put the url you got with "view source", minus the "view-source:" part.
The inside work as usual. Use the code you've seen in the .css files for the plugin as a base to know how to interact with the elements.
It may be less convenient that if you could use the Web Development tools to know exactly which element got which id/class/properties and perform live changes, but at least there's a minimum available.

This could help with plugins other than the 2 named previously. Of course some plugins may have popup that cannot be interacted with that way, but there may be another approach for those.

edit:

Oh right, here's my experimental tweak for the NoScript popup to bring it back closer to the 11.2.11 appearance:

@-moz-document url(moz-extension://1482a500-3e68-4cf7-aeb5-5398f7040da0/ui/popup.html) {
	
	html:not(.mobile) .sites > tr.site:hover {
		background-color: #bdf !important;
	}
	
	html:not(.mobile) .sites > tr.site:not(.customizing):is(:focus-within):not(:hover) {
		background-color: #ccc !important;
		border: 0 !important;
	}
	
	.sites > tr.site:nth-of-type(even) {
		background-color: #fff !important;
	}
	
	.sites > tr.site:nth-of-type(odd) {
		background-color: #eee !important;
	}
	
}

If it doesn't have any effect, you may have to update the url part maybe?