Question

我无法正常工作。

我想使用内容脚本使用Chrome扩展程序更改页面上的h2文本我已设置扩展名，并且我有一个正在为我的内容脚本加载的script.js文件。

script.js

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

然而我总是得到错误：

Uncaught TypeError: Cannot set property 'innerText' of null

Chrome扩展程序需要做些额外的工作，如果以user.js用户身份加载并让chrome安装它，这可以正常工作，这让我认为这是一个最小的问题，但我不知道我是什么我不见了？

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"],
      "all_frames": true
    }
  ]
}

我的浏览器缓存被清除后无法添加评论。

结构是：

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

这是扩展名的链接，它很简单，在这种情况下，它试图改变网站omegle.com上的h2，它正在使用上面的框架集框架。

http://www.megaupload.com/?d=UO7L9W2X

感谢。

Answer 1

试试这个 -

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上运行，以防脚本部分因某种原因导致其无法正常工作

Answer 2

您是否收到此错误，因为您的脚本是在DOM加载之前注入的。因此，您尝试更改的h2元素尚不存在。只需在content_script部分添加“run_at”：“document_end”，然后就可以了。

<强>的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 !";

Chrome扩展程序可使用内容脚本更改innerText

2 个答案: