Welcome to the Power Users community on Codidact!
Power Users is a Q&A site for questions about the usage of computer software and hardware. We are still a small site and would like to grow, so please consider joining our community. We are looking forward to your questions and answers; they are the building blocks of a repository of knowledge we are building together.
Comments on How can I get my browser to block a specific SVG (Discord server icon)?
Parent
How can I get my browser to block a specific SVG (Discord server icon)?
I am on several Discord servers. One of them has, as its server logo, an image I would rather not see every time I use Discord. I had previously used AdBlock to suppress it, but it came back recently and it now appears that Discord is embedding an SVG rather than referencing an image URL, so I don't know how to block that. I tried using AdBlock again, but it disabled all access to the server -- I couldn't click on it. I only want to block the image; I still want to be able to click on the space where the image would have been to get to the server.
I thought to use a CSS override (using the Stylus browser extension), but I can't figure out how to do it. (I don't know if CSS is the right tool for this job. Also, I'm not very good at figuring out CSS selectors.) Here's what I see in developer tools:
The structure shows a div containing an svg containing a defs containing a path with an id attribute. I want to find that ID (but not any others) and replace or obscure its d (definition?) attribute. I don't want to affect any other server icons (or other graphics for that matter).
Is CSS the right tool for this job? If so, how do I express what I want to do? I'm looking for the selector to use and a way to express "if id=(that) then d = (black box or null or something)". If CSS isn't the right tool for the job, then what is -- how should I go about blocking the image?
In case it matters: Chrome on MacOS 11.6 (priority), Firefox on Windows 10 (nice to have).
Post
One possibility is to use an ad-blocker that can hide HTML elements based on a filter expression. I haven't used AdBlock for many years, so i can't say whether AdBlock can do it. However, uBlock Origin (also an ad-blocker) can do this.
uBlock Origin can filter out unwanted HTML elements based on CSS selectors, as long as such elements are part of the HTML document as transmitted by the web server (this excludes elements dynamically created by JS, for example).
Define the filter in the "My filters" tab pane in the add-on's settings.
I am not sure whether the class name "svg-1X37T1" for the <svg> element is static, or whether the server will generate another class name for every page load, but you might try a filter like this:
discord.com##^.svg-1X37T1
The leading ^ in the expression ^.svg-1X37T1 indicates that what follows ^ is a CSS selector. .svg-1X37T1 is an ordinary class selector. (Documentation reference: https://github.com/gorhill/uBlock/wiki/Static-filter-syntax#html-filters)
Such HTML element filters are of course not constrained to class selectors. Any CSS selector could be used, whether it's a type selector, a class selector, an attribute selector, or some other CSS selector or combination thereof. (An overview of CSS selectors: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)
An example of an attribute selector filter that is also constrained to <svg> elements (using the :is() pseudo-class):
discord.com##^:is(svg)[width="48"]
As a side note with respect to Chrome being the priority: With the coming extension API change affecting Chrome extensions, it is to be seen whether such element filtering would still be possible once Google is making the Manifest v3 API mandatory and removing the previous API for Chrome extensions (removal of the Manifest v2 API has been announced to happen beginning of 2023).
0 comment threads