i have a problem finding element with javascript

Question

Full Chrome extension code:

manifest.json
{
  "manifest_version": 2,
  "name": "Cookie Tab Viewer",
  "version": "2.0",
  "description": "Get cookies of the current tab.",
  "permissions": ["cookies", "activeTab", "http://*/*", "https://*/*"],
  "icons": {
    "16": "cookie-16.png",
    "48": "cookie-48.png",
    "128": "cookie-128.png"
  },
  "browser_action": {
    "default_icon": {
      "16": "cookie-16.png",
      "48": "cookie-48.png",
      "128": "cookie-128.png"
    },
    "default_popup": "popup.html"
  }
}

manager.js

document.addEventListener('DOMContentLoaded', function () {
  var getCookiesButton = document.getElementById('getCookiesButton');
  var findAudioButton = document.getElementById('FindAudio');

  getCookiesButton.addEventListener('click', function () {
    // ... (Your existing code for the getCookiesButton event listener)
  });

  findAudioButton.addEventListener('click', function () {
    // Find the <div> element with the class 'flex--item truncate'
    var targetDiv = document.querySelector('div.flex--item.truncate');

    // Check if the target <div> element is found
    if (targetDiv) {
      // Element found, perform actions
      var ariaCurrentValue = targetDiv.getAttribute('aria-current');
      
      if (ariaCurrentValue) {
        window.alert('aria-current value: ' + ariaCurrentValue);
      } else {
        window.alert("aria-current attribute not found in the target <div>.");
      }
    } else {
      // Element not found, show alert
      window.alert("Target <div> element with class 'flex--item truncate' not found.");
    }
  });
});

popup.html

<!DOCTYPE html>
<html>

<head>

  <script src="manager.js"></script>
</head>

<body>
  <button id="getCookiesButton">Start Bot</button>
  
 <button id="FindAudio">Find Audio</button>

</body>

</html>

Now the problem, I had previously been searching for an MP3 file in the dom hence "find audio" no matter what I try the element is never found, this one is on the Stack Overflow "Tags" button enter image description here

findAudioButton.addEventListener('click', function () {
    // Find the <li> element with the class 'ps-relative'
    var targetLi = document.querySelector('li.ps-relative');

    // Check if the target <li> element is found
    if (targetLi) {
      // Find the 'aria-current' attribute value
      var ariaCurrentValue = targetLi.getAttribute('aria-current');
      
      if (ariaCurrentValue) {
        window.alert('aria-current value: ' + ariaCurrentValue);
      } else {
        window.alert("aria-current attribute not found in the target <li>.");
      }
    } else {
      window.alert("Target <li> element not found.");
    }
  });
});

The element in question

<li class="ps-relative" aria-current="false">


    <a id="nav-tags" href="/tags" class=" js-gps-track nav-links--link" data-gps-track="top_nav.click({is_current: false, location:10, destination:2})" aria-controls="" data-controller="" data-s-popover-placement="right" aria-current="false" data-s-popover-auto-show="true" data-s-popover-hide-on-outside-click="never">
            <div class="d-flex ai-center">
                <div class="flex--item truncate">
                    Tags
                </div>
            </div>
    </a>
</li>t

I am calling my function from a button click in a Chrome extension so I know the element is loaded into DOM as I can click on it and inspect.

i have a problem finding element with javascript

0 Answers0