可变范围的网页

时间:2018-02-06 22:35:45

标签: javascript google-chrome-extension

我做了一个chrome扩展。它会在YouTube视频上添加叠加层并为其提供一个数字。

manifest.josn

{
"manifest_version": 2,
"name": "overlay",
"version": "1.0",
"description": "Place overlay on Youtube Videos",

"icons": { "16": "icon16.png",
       "48": "icon48.png",
      "128": "icon128.png" },

"content_scripts": [
{
  "matches": ["https://www.youtube.com/*"],
  "js": ["content.js"]
}


]

}

content.js:

    function assign() {
var x = [];
        x = document.getElementsByClassName("yt-simple-endpoint style-scope");
        for (var i = 0; i < x.length; i++) {
            if(x[i].lastChild.className != "overlay"){
                overlay = document.createElement("div");
            overlay.className = "overlay";
            overlay.style.opacity = 0.9;
            overlay.style.background = "red";
            overlay.style.top =0;
            overlay.style.bottom =0;
            overlay.style.left =0;
            overlay.style.right =0;
            overlay.style.position = "absolute";
            overlay.innerText = i;
            x[i].appendChild(overlay);
            x[i].style.position = "relative";
            }
        }
    console.log(x[3]);
    console.log('Standby!');
    }

    function toggle() {
        overlays = document.getElementsByClassName("overlay"); 
        for (overlay in overlays) {
            if(overlays[overlay].style.opacity == 0.9){
                overlays[overlay].style.opacity = 0;
            }else{overlays[overlay].style.opacity = 0.9;}
        }
    }

            window.addEventListener('keypress', function (e) {
        if (e.keyCode == 116){toggle();
                        }else if (e.keyCode == 114){
                        assign();
                        }
    });

(那里有很多无关紧要的东西,但我不希望别人责怪我发布部分代码)

问题是,每次调用assign()函数时,x []数组都会正确更新。

因此,即使您单击网页上的链接然后再次调用assign(),控制台上的x [3]也始终是相同的元素。但我不认为这应该发生,因为每次调用assign()函数时,x []数组都应该在第一行代码中清除。

x []数组正确清除的唯一方法是击中F5。如何在没有F5的情况下正确清除x []数组?

1 个答案:

答案 0 :(得分:0)

  

因此,即使您点击网页上的链接然后再次调用assign(),控制台上的x [3]也始终是相同的元素

@epascarello所说的是,当您调用assign时,代码中的逻辑将始终填充元素x [3]。那么在你打电话给分配后它怎么会变空?

如果要在调用assign()之后清除数组,那么可以在for循环结束后执行此操作。