.click() on document.getElementsByClassName()[i] does not click button in chrome extension-CodePudding

New to frontend and extension itself here. I tried searching and trying different things at this point. I have been to many questions like these: click function not working on document.getElementsByClassName But unlike these, I am iterating through an array and not calling .click() on the array itself. This is a piece of content.ts from my extension app

content.ts

window.onload = function () {
  let buttons = Array.from(document.getElementsByClassName("listof-buttons"));
  buttons.forEach((button) => {
    if (button.textContent === "Click Here") {
      (button as HTMLElement).click();
    }
  });
};

The reason I am using textContent is cause there are multiple buttons with the same classname. The button does not get clicked when the window loads. (I am not waiting on an input and hence .click() and not .onClick())Any idea what I am missing here?

EDIT

Used logging everywhere, it goes inside the if() condition
By "not working" I mean its not clicking on the button
I tried .innerHtml instead of .textContent but the results are the same

manifest.json

{
"name": "Chrome Extension",
"version": "0.0.1",
"manifest_version": 2,
"description": "Practicing Chrome extension with TypeScript, React, and Webpack.",
"homepage_url": "https://www.example.com/",
"icons": {
  "16": "icons/icon16.png"
},
"browser_action": {
  "default_title": "Open the popup",
  "default_popup": "popup.html"
},
"default_locale": "en",
"background": {
  "scripts": [
    "js/background.js"
  ],
  "persistent": true
},
"permissions": [
  "https://*/*"
],
"optional_permissions": [
  "<all_urls>"
],
"content_security_policy": "default-src 'self';",
"content_scripts": [
  {
    "matches": [
      "<all_urls>"
    ],
    "js": [
      "js/content.js"
    ]
  }
]

}

CodePudding user response：

A potential issue is that button.textContent might not be the best way to determine if a button has the text "Click Here". The textContent property returns the text content of all elements in the element, including descendant elements. This means that if the button has any child elements, such as other buttons or span elements, the textContent property will include the text from those elements.

Instead of using the textContent property, you can use the innerText property, which only returns the text content of the element itself, without the text content of any child elements. You can use the innerText property like this:

if (button.innerText === 'Click Here') {
    (button as HTMLElement).click();
}

Another potential issue is that you're trying to simulate a click on the button using the click() method. This method only works if the button is visible and enabled. If the button is hidden or disabled, calling the click() method will not have any effect.

To check if the button is visible and enabled, you can use the offsetParent property and the disabled attribute. You can use the offsetParent property like this:

if (button.offsetParent !== null && !button.disabled) {
    (button as HTMLElement).click();
}

CodePudding user response：

My test results contradicted your claims. clock() clicked the button. I compiled content.ts and embedded it in html.

<html>

<body>
  <button  type="button" onclick="alert('hogehoge')">Click Here</button>
  <script>
    window.onload = function () {
      var buttons = Array.from(document.getElementsByClassName("listof-buttons"));
      buttons.forEach(function (button) {
        if (button.textContent === "Click Here") {
          button.click();
        }
      });
    };
  </script>
</body>

</html>

CodePudding user response：

Remove window.onload. Please check with the following configuration.

Install the extension.
Double click index.html to open it in chrome.
A button is clicked.

manifest.json

{
  "name": "Chrome Extension",
  "version": "0.0.1",
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "js/content.js"
      ]
    }
  ]
}

js/content.js"

var buttons = Array.from(document.getElementsByClassName("listof-buttons"));
buttons.forEach(function (button) {
  if (button.textContent === "Click Here") {
    button.click();
  }
});

index.html

<html>

<body>
  <button  type="button" onclick="alert('hogehoge')">Click Here</button>
</body>

</html>