Problem with jQuery when using chrome extensions popup

Question

There is a website and there is a button that has the disabled tag. I'm trying to write a popup extension where there is a button, by clicking on which this tag should be removed.

//manifest.json
{
  "name": "Remove",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": ["activeTab", "scripting"],
  "action": {
    "default_popup": "popup/popup.html",
    "default_icon": {
      "128": "/images/logo_128.png"
    }
  },
  "icons": {
    "128": "/images/logo_128.png"
  }
}

When I click button in popup I get this and no more:

What can I do?

I try changing $ to JQuery. Load different versions.

Answer 1

The injected function can't reference any code or function or variable or library outside of it. The reason is that executeScript simply takes the source code of the function as a text string and internally injects this string into the web page as a content script, so the only things it has access to are the things in the content script context.

Solutions:

1. inject jquery first in another executeScript using files instead of function - use only when injecting complex code.
2. switch to native DOM methods - preferred for simple cases like this one.