How to match any instance of a given url using the WebRequest API for browser extensions?

I’m trying to specify some urls to be blocked using the WebRequest API for a firefox extension.

It successfully intercepts when I type “instagram.com” in firefox address bar but the same doesn’t occur when I type “instagram.com/”. Instagram loads as it shouldn’t. I actually added "*://instagram.com/" in the urls array as a solution, but it didn’t work.

The same doesn’t occur with “example.com”. It gets blocked with or without the trailing slash.

Here’s the code which is located in a background.js file.

const urls = ["*://instagram.com/*", "*://instagram.com/", "*://example.com/*"]

browser.webRequest.onBeforeRequest.addListener(
    // Listener function
    function(details) {
        console.log("IT WENT HERE")
      // Cancel the request
      return {cancel: true};
    },
    // Filter object
    {
      urls: urls, // URLs to intercept
      types: ["main_frame"] // Type of request to intercept (e.g., main_frame for the main document)
    },
    // Additional options
    ["blocking"] // Specifies that the listener should block the request
  );

I also think I got manifest.json right (this is just a part of the file)

  "permissions": [
    "activeTab",
    "storage",
    "webRequest",
    "webRequestBlocking",
    "<all_urls>"
  ],

  "background": {
    "scripts": ["background.js"],
    "persistent":false
},