Hide elements on twitter by add-on on Firefox

Question

I've been trying to make a Firefox add-on that hides elements(e.g. number of followers, likes, etc.) on twitter. However, it doesn't work as I expected.

Here are the issues:

Doesn't properly hide elements I load the add-on by "load temporary add-on" on Firefox developer edition. After loading, it successfully hides most of the elements I targeted. However, some elements aren't hidden and when I reload the page, the add-on doesn't hide anything at all(though, when I reload the add-on it works again).

Can't hide some elements As mentioned above, while some elements are successfully hidden, some are not.

Newly loaded elements aren't hidden I want to hide elements whenever new ones are loaded(e.g. when scrolling a page) but the add-on doesn't do it.

What I tried: In content.js, I used 'idle' instead of 'DOMContentLoaded' in document.addEventListener('DOMContentLoaded', onDOMContentLoaded);(only the former one).

In manifest.json, I added "run_at": "document_end" inside content_scripts.

Here are some code snippets of my add-on (some parts are simplified):

content.js

function hideElements() {
  hide_by_class_name("css-175oi2r r-1867qdf r-1phboty r-rs99b7 r-1ifxtd0 r-1udh08x r-g2wdr4 r-14wv3jr", 0);
  // there are more hide_by_class() calls(?) in this hideElements() function in my original code but I deleted most of them for simplicity to ask.
}

function hide_by_class_name(class_name, index) {
  var elements = document.getElementsByClassName(class_name);
  var elements_to_hide = elements[index];
  elements_to_hide.style.display = "none";
}

function onDOMContentLoaded() {
  hideElements();

  // Set up a MutationObserver to hide elements when new ones are added
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
        hideElements();
      }
    });
  });

  // Start observing the body for changes
  observer.observe(document.body, { childList: true, subtree: true });
}

// Wait for the DOM content to be fully loaded before executing the rest of the script
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', onDOMContentLoaded);
} else {
  onDOMContentLoaded();
}

manifest.json

{
    "manifest_version": 2,
    "name": "Element Hider",
    "version": "1.0",
    "description": "Hide elements on twitter.",
    "permissions": ["activeTab", "storage"],
    "browser_action": {
      "default_icon": {
        "48": "icons/icon48.png"
      },
      "default_popup": "popup.html"
    },
    "icons": {
      "48": "icons/icon48.png"
    },
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["content.js"]
      }
    ]
  }