Custom styles in webextension

[Emile Indik]

Thanks for your work on this great package.
How can I go about providing custom styles to the ad divs? For example, instead of removing/hiding the ad div, I'd like to make bakground-color red. Further, is it possible to get access to each ad DOM object so I can customize the innerHTML of the div?

I noticed injectCosmetics() takes an optional getCosmeticsFilters() method as its third arg. However, the default getCosmeticsFilters() uses chrome.runtime.sendMessage() to send a getCosmeticsFilters for which the package already registers a handler inside handleRuntimeMessage().

Do you have any advice on how to achieve the above using the webextension example package?

[Rémi]

Hi @emileindik,

Thanks for reaching out.

How can I go about providing custom styles to the ad divs?

For this you could modify this: https://github.com/ghostery/adblocker/blob/master/packages/adblocker/src/filters/cosmetic.ts#L42
Then bundle a custom version of the library to use in your project.

If you do not want to change the source code, it would be possible to update all the cosmetic in use in your adblocker engine and add a custom style element to them. I think the other way is easier, though.

Further, is it possible to get access to each ad DOM object so I can customize the innerHTML of the div?

Unfortunately no. Even the adblocker does not identify all the DOM objects to hide, instead it delegates the hiding to the browser engine for performance reasons (i.e. we inject a custom stylesheet with all the selectors and a custom hiding style and browser takes care of the rest).

I hope that helps,