why is scripting object not present in chrome object

Question

I'm working on a chrome extension, and in my main script, I want to execute another script on click. But when I use chrome.scripting.executeScript, it gives me an error saying Uncaught TypeError: Cannot read properties of undefined (reading 'executeScript').

I'm using manifest V3 and I have the required permissions, so why is it giving me this error? On logging the output the chrome object, this is what it showed:

csi: ƒ ()
dom: Object
extension: Object
i18n: (...)
loadTimes: ƒ ()
runtime: (...)

Clearly, scripting is not present there. What can be the issue here?

I also referred to this question, but none of the answers mentioned there worked for me.

Manifest.json:

{
  "name": "Border",
  "version": "0.1",
  "description": "Outline DOM elements",
  "permissions": [
    "scripting"
  ],
   "content_scripts": [
      {
          "matches": [
              "http://*/*",
              "https://*/*"
          ],
          "css": ["styles.css"],
          "js": ["script.js", "editor.js"]
      }
  ],
 "manifest_version": 3
}

script.js:

var isEnabled = false;

document.addEventListener("click", function (e) {
  isEnabled = !isEnabled;
  console.log("clicked", isEnabled);

  console.log(chrome);

  chrome.scripting.executeScript({
    target: { tabId: "qpoqieoipaqbbldiphfuafjdhmdemenm" },
    files: ["editor.js"],
  });
});