(Simple) Chrome Extension blocking the LinkedIn Newsfeed not working

Replit Help
1

Question:
Hi everyone,

I built a Chrome extension that should show a picture instead of the (very annoying) Newsfeed in LinkedIn. The background idea is that I still want to be able to use LinkedIn functionalities like messaging, connecting to people etc. but don’t want to see the “news”. The chrome extension should just show a picture where the Newsfeed used to be. The Extension is doing its job so far in blocking the feed, y problem is: The picture isn’t loading. Instead I see this:

image

I am running out of ideas how to solve this problem. The folder consist of 3 files. Contentscript.js, manifest.json and cover.png (the actual image that’s supposed to be shown).

Here is the code:

Contentscript.js:

window.onload = function() {
  const hideElements = function() {
    // Check if the current page is the LinkedIn homepage.
    if (window.location.href === 'https://www.linkedin.com/feed/') {
      let newsfeed = document.querySelector('.scaffold-finite-scroll__content');
      if (newsfeed) {
        newsfeed.style.display = 'none';
      }
    }

    let additionalClass = document.querySelector('.display-flex.p5');
    if (additionalClass) {
      additionalClass.style.display = 'none';

      let div = document.createElement('div');
      div.style.display = 'flex';
      div.style.justifyContent = 'center';

      // Create a new image element
      let coverImage = document.createElement('img');

      // Set the source of the image
      coverImage.src = chrome.runtime.getURL("cover.png");

      // Set the position and size of the image
      coverImage.style.width = '200px';
      coverImage.style.height = '400px';

      div.appendChild(coverImage);

      // Add the image to the page in place of the element you want to hide
      additionalClass.parentElement.replaceChild(div, additionalClass);
    }

    let sidebar = document.querySelector('.scaffold-layout__sidebar');
    if (sidebar) {
      sidebar.style.display = 'none';
    }

    let aside = document.querySelector('.scaffold-layout__aside');
    if (aside) {
      aside.style.display = 'none';
    }

    let shareBox = document.querySelector('.share-box-feed-entry__closed-share-box.artdeco-card');
    if (shareBox) {
      shareBox.style.display = 'none';
    }

    let dropdown = document.querySelector('.mb2.artdeco-dropdown.artdeco-dropdown--placement-bottom.artdeco-dropdown--justification-right.ember-view');
    if (dropdown) {
      dropdown.style.display = 'none';
    }
  };

  // Run once on page load
  hideElements();

  // Create a MutationObserver instance
  let observer = new MutationObserver(hideElements);

  // Start observing the document with the configured parameters
  observer.observe(document, { childList: true, subtree: true });
};

manifest.json:

{
  "manifest_version": 3,
  "name": "LinkedIn Newsfeed Hider",
  "version": "1.0",
  "description": "This extension hides the LinkedIn newsfeed",
  "permissions": [],
  "web_accessible_resources": [
    {
      "resources": [ "cover.png" ],
      "matches": [ "https://www.linkedin.com/*" ]
    }
  ],
  "content_scripts": [
    {
      "matches": ["https://www.linkedin.com/*"],
      "js": ["contentScript.js"]
    }
  ]
}

Can anybody spot what I am missing here? Thanks for your help in advance :slight_smile:

Replit Profile: https://replit.com/@TilmanDietrich