Расширение Chrome для изменения innerText с помощью Content Script

Question

Я хочу изменить текст h2 на странице, используя расширение Chrome, используя скрипт контента. У меня настроено расширение, и у меня есть файл script.js, который загружается для моего скрипта контента.

script.js

document.getElementById('texttochange').innerText = "CHANGED !";

Однако я всегда получаю сообщение об ошибке:

Uncaught TypeError: Cannot set property 'innerText' of null

Есть ли что-то еще, что нужно сделать для расширений Chrome, это прекрасно работает, если загружено как user.js usercript и позволяет установить его Chrome, это заставляет меня думать, что это самая маленькая проблема, однако я не знаю, что я ' м отсутствует?

manifest.json
{
  "name": "Test",
  "version": "0.1",
  "description": "Test",
  "icons": { "16": "icon16.png",
             "48": "icon48.png",
             "128": "icon128.png" },
  "content_scripts": [
    {
      "matches": ["http://example.com"],
      "all_frames": true
    }
  ]
}

---

Я не могу добавить комментарий, так как кеш браузера очищен.

Структура:

<frameset>
    <frame>
    ...
        <h2 id="texttochange">This should change</h2>
    ...
    </frame>
</frameset>

Вот ссылка на расширение, оно очень простое, и в этом случае оно пытается изменить h2 на сайте omegle.com, который использует frameset, фрейм сверху.

Answer 1

Вы получаете эту ошибку, потому что ваш скрипт внедряется до загрузки DOM.Итак, элемент h2, который вы пытаетесь изменить, еще не существует.Просто добавьте «run_at»: «document_end» в ваш раздел content_script, тогда он должен работать.

manifest.json

{
  "name": "Test",
  "version": "0.1",
  "description": "Test",
  "icons": { "16": "icon16.png",
             "48": "icon48.png",
             "128": "icon128.png" },
  "content_scripts": [
    {
      "matches": ["http://site.com"],
      "run_at": "document_end",
      "js": ["script.js"]
    }
  ]
}

script.js

document.getElementById('h2Id').innerText = "CHANGED !";

Answer 2

попробуйте это-

document.body.innerHTML = document.body.innerHTML.replace(new RegExp("texttochange", "g"),"CHANGED !");
document.head.innerHTML = document.head.innerHTML.replace(new RegExp("texttochange", "g"),"CHANGED !");

и

{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"background_page": "background.html",
"browser_action": {
  "default_icon": "icon.png",
  "default_popup": "popup.html" 
},
"permissions": [
  "tabs", "http://*/" ]
}  

это мой манифест. Код, который я разместил, был в background.html и работал на chrome.tabs.onUpdated только на тот случай, если часть скрипта может заставить его не работать по какой-то причине