Q: Chrome extension: How to perform the function as soon as open the tab

Question

I'm currently developing an extension that blocks specific users on community sites.

When I enter the community site and click the button in the pop-up window, the specific user's post disappears.

But I want to make this disappear as soon as I enter the community site without pressing a button.

popup.js

    let blockUser = document.getElementById("userBlock");

    blockUser.addEventListener("click", async () => {
        let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

        chrome.scripting.executeScript({
            target: { tabId: tab.id },
            function: setPageUserBlock,
        });
    });

    function setPageUserBlock() {
        chrome.storage.sync.get("blacklist", ({ blacklist }) => {

            var lists = document.querySelectorAll("a.vrow");
            var users = document.querySelectorAll("span.user-info");
            var name;
            var m = 6;
            for (var i = 5; i < users.length; i++) {
                name = users[i].innerText;
                if (name == blacklist) {
                    lists[m].parentNode.removeChild(lists[m]);
                }
                m += 1;
            }

        });
    }

background.js

    let blacklist = 'FTB';

    chrome.runtime.onInstalled.addListener(() => {
      chrome.storage.sync.set({ blacklist });
    });

Answer 1

For this you can use Content Scripts: https://developer.chrome.com/docs/extensions/mv3/content_scripts/

These allow you to put code in a separate file, for example content_script.js, and then in your manifest use

 "content_scripts": [
   {
     "matches": ["http://site-to-block-on.com/*"],
     "js": ["content_script.js"]
   }
 ],

And it will load the file as soon as you open that page! Read through the documentation page, it's a really nice resource to get started. Content Scripts have some quirks, but those are well documented.