页面加载完成后,在Google Chrome扩展程序中运行javascript

时间:2017-10-16 08:13:35

标签: javascript google-chrome-extension

我定位的网站几乎是一个Javascript应用程序。所以我需要在所有内容完成加载后添加HTML。我尝试使用MutationObserver,但它仍然试图过早执行javascript并且我得到以下错误代码`Uncaught TypeError:无法读取属性' appendChild'未定义的

我的代码

的manifest.json

{
  "manifest_version": 2,

  "name": "Test",
  "version": "1.0",
  "description": "Test Description",

  "content_scripts": [{
    "js": ["content.js"],
    "run_at" : "document_idle",
    "matches": ["https://pastvu.com/p/*"]
  }]

}

content.js

new MutationObserver(function(mutations, observer) {
    addHtml();
    observer.disconnect();
}).observe(document.querySelector('body'), {childList: true});


function addHtml(){

    var newDiv = document.createElement("div");
    newDiv.setAttribute("class","tltp-wrap");

    var newLink = document.createElement('a');
    newLink.setAttribute('href','http://www.google.com');

    var linkButton = document.createElement('span');
    linkButton.setAttribute('class','glyphicon glyphicon-map-marker');

    newLink.appendChild(linkButton);
    newDiv.appendChild(newLink);

    document.getElementsByClassName("toolsBtm")[0].appendChild(newDiv);
}

Here is the页面我定位。正如您所看到的,<body>看起来像这样

<body>
    <script type="text/javascript" src="/js/module/appMain.js?__=wfDkO"></script>
</body>

我的目标是等到正文html加载或至少存在unitil .toolsBtm div。

我将content.js更改为此,仍然没有运气

new MutationObserver(function(mutations, observer) {
    var bodyLoaded = document.getElementsByClassName('toolsBtm');
    if (bodyLoaded.length > 0) {
        alert('a');
        addHtml();
    }
}).observe(document.querySelector('body'), {childList: true});


function addHtml(){

    var newDiv = document.createElement("div");
    newDiv.setAttribute("class","tltp-wrap");

    var newLink = document.createElement('a');
    newLink.setAttribute('href','http://www.google.com');

    var linkButton = document.createElement('span');
    linkButton.setAttribute('class','glyphicon glyphicon-map-marker');

    newLink.appendChild(linkButton);
    newDiv.appendChild(newLink);

    document.getElementsByClassName("toolsBtm")[0].appendChild(newDiv);
}

1 个答案:

答案 0 :(得分:1)

在我们的插件中,我们有类似

的内容
if((index+1) % 10 === 1){
  console.log(`my ${index+1}st choice is ${array[index]}`
}

这是在使用Selenium测试期间通常使用的东西。