Find and replace all class names dynamically on website

Question

I am browsing a forum as a guest which has embedded pictures. By default, the website blurs the pictures for non-logged in users.

Looking at the HTML I have found that I can change the following span's class to be empty:

<span class="attachmentPreview">

to

<span class="">

in order to lift the pictures blur.

I have very basic knowledge of JavaScript, but enough to load my first extensions into Firefox and ensure that it only runs on a specific URL (the forum in this case).

My questions:

How do I interact with the specific element (span class="attachmentPreview"?) in order to modify it to update to ?
It needs to happen on the go, as the forum dynamically blurs the picture as the user scrolls down between the posts: How do I ensure my script continuously checks for any new pictures on the website?

Many thanks

I am able to find the elements with document.getElementsByClassName("attachmentPreview")

so loop over and remove the class. Mutation or scroll event listener to get the new elements. Or better yet user style sheet that overrides the class.... — epascarello, Apr 04 '23 at 13:25
You can create a userscript that can execute with Violentmonkey that utilizes `MutationObserver` to see if any `` elements are loaded with the class name "attachmentPreview" and you can simply call `span.classList.remove` — Mr. Polywhirl, Apr 04 '23 at 13:25
find all with `const spans = document.getElementsByClassName("attachmentPreview")` loop over them and then use `ele.classList.remove("attachmentPreview");` — Chris G, Apr 04 '23 at 13:27

score 0 · Answer 1 · answered Apr 04 '23 at 13:33

Just inject a style sheet that overrides the rule or add an extension that allows you to add custom styles to a site.

document.head.insertAdjacentHTML("beforeend", `<style>.attachmentPreview { filter: none !important; }</style>`)

.attachmentPreview { filter: blur(1.5rem); }

<span class="attachmentPreview">
<img src="http://placekitten.com/200/300" />
</span>

score 0 · Answer 2 · answered Apr 04 '23 at 13:50

Here is an example using MutationObserver:

const main = () => {
  // When the page has been scrolled 100%
  // See: https://stackoverflow.com/a/75266945/1762224
  window.addEventListener('scrollend', loadImage);

  // Remove pre-loaded
  document.querySelectorAll('.attachmentPreview').forEach(removeBlur);

  // Remove dynamic
  observe('.attachmentPreview', removeBlur, document.body);
};

// Source: https://stackoverflow.com/a/65585776/1762224
const observe = (selector, callback, targetNode = document.body) =>
  new MutationObserver(mutations => [...mutations]
    .flatMap((mutation) => [...mutation.addedNodes])
    .filter((node) => node.matches && node.matches(selector))
    .forEach(callback))
  .observe(targetNode, { childList: true, subtree: true });

const loadImage = () => {
  const span = document.createElement('span');
  const img = document.createElement('img');
  img.src = 'http://placekitten.com/260/120';
  span.classList.add('attachmentPreview');
  span.append(img);
  document.body.append(span);
};

// Timeout is just for demonstration.
const removeBlur = (span) => {
  console.log('Removing blur in 1 second...');
  setTimeout(() => {
    span.classList.remove('attachmentPreview');
  }, 1000);
};

main();

body {
  text-align: center;
}

body>span {
  display: block;
}

.attachmentPreview {
  filter: blur(0.667rem);
}

<script src="https://cdn.jsdelivr.net/gh/argyleink/scrollyfills/dist/scrollyfills.umd.js"></script>
<span class="attachmentPreview">
  <img src="http://placekitten.com/260/120" />
</span>
<span class="attachmentPreview">
  <img src="http://placekitten.com/260/120" />
</span>
<span class="attachmentPreview">
  <img src="http://placekitten.com/260/120" />
</span>
<span class="attachmentPreview">
  <img src="http://placekitten.com/260/120" />
</span>

Find and replace all class names dynamically on website

2 Answers2