How can I get my browser to block a specific SVG (Discord server icon)?

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).

posted over 2 years ago

CC BY-SA 4.0

2y ago

elgonzo‭

241 reputation 0 6 24 31

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.

posted over 2 years ago

CC BY-SA 4.0

Canina‭

1064 reputation 5 20 122 48

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; }

posted over 2 years ago

CC BY-SA 4.0

2y ago

CodeFarmer‭

31 reputation 1 1 4 4