0

What I am trying to do: I want to hide the newsfeed on the Facebook home page if the checkbox is checked and show if the checkbox is unchecked.

Below is all the code. I have replaced private things with ' // '.

Manifest file:

"permissions": [
        "storage", "activeTab", "scripting"
      ],
    
    "icons": {
        "128": "icon-128.png"
    },

    "content_scripts": [{
        "js": ["jquery-3.6.0.min.js", "content.js"],
        "css": ["block.css"],
        "matches": ["https://www.tiktok.com/*", "https://www.linkedin.com/*", "https://www.youtube.com/*", "https://www.instagram.com/*", "https://www.facebook.com/*", "https://twitter.com/*", "https://www.reddit.com/"]
    }],
    
    "options_page": "settings.html",
    
    "background": {
        "service_worker": "background.js"
      },

      "action": {
        "default_title": "//",
        "default_icon": "icon-128.png",
        "default_popup": "popup.html"
    }
}

HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Settings</title>
    <link rel="stylesheet" href="settings.css">
    <script src="jquery-3.6.0.min.js"></script>
    <script src="content.js"></script>
    <script src="settings.js"></script>
</head>
<body>
    
    <div class="container-main">
        <h1>// Settings</h1>
        <h2>Please use the checkboxes below to turn all or individual feeds on or off. Your settings will be saved.</h2>
        <!--Facebook--><input id="checkbox" type="checkbox" onclick="myFunction()">
        <!--<br><br>
        Instagram<input id="checkbox" type="checkbox">
        <br><br>
        Twitter<input id="checkbox" type="checkbox">
        <br><br>
        Reddit<input id="checkbox" type="checkbox">
        <br><br>
        Tiktok<input id="checkbox" type="checkbox">
        <br><br>
        LinkedIn<input id="checkbox" type="checkbox">
        <br><br>
        YouTube<input id="checkbox" type="checkbox">-->
        <!--<p class="hello">Hello World</p>-->
    </div>

</body>
</html>

content.js:

window.onload = function() {
    document.getElementById('checkbox').onclick = function() {
        var value = document.getElementById("checkbox").checked
        var stored = chrome.storage.sync.set({chk: value}, function() {
            alert('Value is set to ' + value);
          });
    }
    chrome.storage.sync.get(['chk'], function(result){
      document.getElementById("checkbox").checked = result.chk
      if (document.getElementById("checkbox").checked == true) {
        myFunction()
      }
    });
}

function myFunction () {
  $(function () {
      if ($("#checkbox").is(':checked')) {
          $(".tn0ko95a").hide();
      } else {
          $(".tn0ko95a").show();
      }
  });
}

By the way, the newsfeed gets hidden with the following code:

$(function () { 
$(".tn0ko95a").hide(); 
});

But when I wrap it inside of a function, it does not work.

So, do I need to make use of some chrome API perhaps?

Please note: The chrome storage API is working fine.

wOxxOm
  • 65,848
  • 11
  • 132
  • 136
abc_13
  • 11
  • 1

1 Answers1

0

There are several issues.

  • onclick in html is using inline js functions

    To see the error, right-click inside your page to show the context menu, then click "inspect" to open devtools for this page. Every page/frame has its own devtools.

    The solution is to add a listener inside your js file.

  • extension UI html loads content.js

    Content scripts should only run in a web page, which is an entirely separate page, not related to your extension UI.

    The solution is to remove content.js from the html and split its logic according to the context of the respective element e.g. checkbox is inside your html so its listener should be in settings.js, but tn0ko95a is inside the web page so it should be handled in content.js

    To apply the changes made by the user in the UI of your extension automatically, the content script should have a listener chrome.storage.onChanged.

settings.html:

<div class="container-main">
  <h1>Settings</h1>
  <div class="sites">
    <label data-key="facebook"><input type="checkbox"> Facebook</label>
    <label data-key="instagram"><input type="checkbox"> Instagram</label>
  </div>
</div>

settings.js:

chrome.storage.sync.get(data => {
  const sitesElem = document.querySelector('.sites');
  for (const el of sitesElem.querySelectorAll('[data-key]')) {
    el.querySelector('input').checked = data[el.dataset.key];
  }
  sitesElem.onchange = e => {
    const el = e.target;
    const key = el.closest('[data-key]').dataset.key;
    chrome.storage.sync.set({ [key]: el.checked });
  };
});

content.js:

const togglers = {
  facebook(val) {
    document.querySelector('.tn0ko95a').hidden = val; 
  },
};
const dataKey = location.hostname.replace('www.', '').replace('.com', '');
chrome.storage.sync.get(dataKey, data => {
  togglers[dataKey](data[dataKey]);
});
chrome.storage.onChanged.addListener(changes => {
  const ch = changes[dataKey];
  if (ch) {
    togglers[dataKey](ch.newValue);
  }
});

Note there's no need for jquery.

wOxxOm
  • 65,848
  • 11
  • 132
  • 136