Расширение chrome не получает доступ к элементам в реакт-приложении

Нужно создать расширение для браузера (chrome). Оно должно получить некоторые кнопки на страницы и навешивать на них слушатели событий. Работать оно должно только на трех определенных веб-страницах. Две из них написаны на реакт, одна на нативном js (+ jQuery). На странице с нативным js вот таким способом

const allI = document.querySelectorAll('i');

я получаю все элементы i на странице и они нормально выводятся в консоль и на них можно повестить слушатели событий и прочее, но на страницах где используется реакт так не работает, просто выдается пустой массив. Пробовала делать вот таким образом

const reactAppRef = document.getElementById('root'); // выводит в консоль div#root
const allI = reactAppRef.getElementsByTagName('i'); // выводит все элементы i
const outboundBtns = reactAppRef.getElementsByClassName('icon-outbound'); // выводит все иконки с классом icon-outbound
[...outboundBtns].forEach(btn => {
    console.log('btn', btn)
}) // а здесь уже ничего не выводит

Есть предположение, что дело в virtual DOM, которое использует реакт. Но как тогда достучаться до элементов на странице в реакт-приложении через расширение?

вот manifest.json

{
  "manifest_version": 3,
  "name": "__MSG_name__",
  "version": "1.0.0",
  "description": "__MSG_description__",
  "default_locale": "ru",
  "icons": {
    "32": "./icons/phone32.png",
    "64": "./icons/phone64.png",
    "128": "./icons/phone128.png"
  },
  "content_scripts": [
    {
      "matches": [
        "*://example.com/*",
        "*://example.local/*",
        "*://example.io/*"
      ],
      "run_at": "document_idle",
      "all_frames": false,
      "js": [
        "content.js"
      ]
    }
  ],
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "activeTab",
    "background",
    "nativeMessaging",
    "tabs"   
  ],
  "host_permissions": [
    "http://*/*",
    "https://*/*"
  ]
}