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.
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).
3 answers
You are accessing this answer with a direct link, so it's being shown above all other answers regardless of its score. You can return to the normal view.
You don't show enough of the document structure in the question to provide a fully fleshed-out example, but since it appears that you're now able to block based on CSS selectors and simply need help figuring out what CSS selector you should use...
CSS supports both attribute substring matching and positional pseudo-classes, which can help you out here. For example, if I'm not mistaken, you could use a CSS selector along the lines of
div[aria-label="Servers"]:nth-child(4) div[class^="listItem"] div div svg { }
which would find a div with an aria-label attribute value of Servers, locate the fourth child element of that, then go three div elements deep (the first of which must have a class attribute with a value that begins with listItem), then apply the specified style to the svg element therein.
You blacked out the value for class for the div listItem class names; it's possible that those could provide something more reasonable to match on, in which case you might instead try something like
div[aria-label="Servers"] div.listItem-12345 div div svg { }
It's also possible that the data-dnd-name property might be useful for matching, in which case you can try as a starting point
div[aria-label="Servers"] div div div[data-dnd-name="..."] svg { }
or to match something at the beginning of the property value, again
div[aria-label="Servers"] div div div[data-dnd-name^="some-"] svg { }
Complex CSS selectors can be a bit tricky to get right, and something like the above will likely be very heavily dependent on the exact document structure, but they are also extremely powerful when you need to match something that you can't readily match directly (such as something that doesn't have an appropriate id or class attribute to match on). Here's a fairly readable overview of some of the more complex CSS selector mechanisms available; the Attribute Selectors (currently about a third of the way down from the top of the page) and Structural & Position Pseudo-classes (about half way down) sections are likely to be particularly useful in your scenario.
2 comment threads
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).
The selector may be something like:
#<idname> { visibility: hidden; }
This should leave the space allocated but hide the content.
Note: I added this in the comments but putting here as well: It looks like the id is "a20a6299-bf96-4f12-b3bf-fa6597c9eff-blob_mask". The id will be specific to this specific tag. So this might work:
#a20a6299-bf96-4f12-b3bf-fa6597c9eff-blob_mask { visiblity: hidden; }
0 comment threads