Injecting CSS via an extension to override existing CSS

[Bogdan Nazaruk]

Hey, so it seems like I have no issues injecting the CSS file mostly thank to the manifest. It's only that... I think something may be wrong with specificity and stuff. For now I'm just trying to build a POC, so I just inject my css with only one class and a few styles in it. 

And I apply them by manually editing the DOM, adding my class to the elements I need to highlight. Once everything works, I'll do the same class application via an injected JS.

Now the problem. 

When I apply my class to the html, it works fine:

See? everything seems cool.  You can see the border there, and the class in the computed styles correctly indicating that it's an injected stylesheet.

So it seems like the style works. Now I'm trying to apply it to the actual element I want to change. Say, a button:

See? The class is not in the styles, and none of the effects applied. I don't understand why the class is not in the styles. Maybe styles don't display blocks when nothing in a block changed the content? But then... Uh... Specificity? I'm struggling overriding it. You see that even the !importants don't work. I know at this point it becomes quite a CSS question, but I'm not sure if the fact that I'm injecting it has anything to do to influence the specificity...

[woxxom]

Show the actual extension, so we can debug it and see what happens.

[Bogdan Nazaruk]

Sure, here it is: https://github.com/cthae/Adobe-Launch-Debugger/tree/Launch-UI-Improvements-POC

I've started this work on a separate branch. You won't be able to access the particular site I'm doing it for since it's behind authentication, but I presume something like this should react the same to the css changes: https://experienceleague.adobe.com/en/docs/experience-platform/landing/home you just need to add it to the manifest to make the extension load the css there.

[woxxom]

Your scenario works here for me, so I guess you reloaded the extension, but didn't re-inject the css in chrome.runtime.onInstalled, see this example: https://stackoverflow.com/a/11598753.