我做了一个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 []数组?
答案 0 :(得分:0)
因此,即使您点击网页上的链接然后再次调用assign(),控制台上的x [3]也始终是相同的元素
@epascarello所说的是,当您调用assign时,代码中的逻辑将始终填充元素x [3]。那么在你打电话给分配后它怎么会变空?
如果要在调用assign()之后清除数组,那么可以在for循环结束后执行此操作。