Question

我的Chrome扩展程序应该完全用画布覆盖任何网页，这样用户基本上可以在它上面绘制。现在我将画布的div添加到身体的顶部。在某些网站上，这并不完全有效。我能想到的唯一原因是因为正文已经应用了类，可能是提供一些DOM内容（？）或者让我无法构建内容，所以一些DOM内容仍然放在我的div之前。

var lands = document.getElementsByClassName('terrain');
for (var i = 0; i < lands.length; i++) {
  (function (land) {
    land.onclick = function () {
      alert('left: '+land.offsetLeft+' top: '+land.offsetTop);
      y.style.left = land.offsetLeft + 'px';
      y.style.top = land.offsetTop + 'px';
    };
  }) (lands[i]);
}

我遇到问题的一个网站是Youtube。下面，黑色是我的画布，你可以看到我的画布不会覆盖页面顶部和侧面的条形。

这就是Youtube在我的画布控制台中的样子：

div上唯一的东西是长体型，那么创建侧栏和顶栏的其中一个类是什么？如果是，我该如何解决？

我不知道如何在Youtube的主页上获取我的画布，更不用说找到适用于大多数网站的解决方案。我的方法在这里附加到身体顶部有缺陷吗？它显然允许出错的空间。有没有更好的方法来获得整个网页上的画布/任何元素？

例如，假设身体的类与问题有关，我可以将自己的类附加到身体上，这样我就能以某种方式将某些东西添加到其顶部吗？我有点到达这里，因为我不确定问题是什么。

编辑：

我将z-index设置为9999999999，现在它覆盖了整个区域。不确定这个确切的数字是什么，但似乎有效。

Answer 1

考虑将top: 0; left: 0; margin: 0;添加到样式中。

z-index和类似可能存在一些奇怪之处，但这可能会解决它。可能有一种风格故意改变某个元素或类似内容中的所有内容的top,left,margin样式属性

如果这不起作用，请将position更改为fixed。有可能顶部栏和左栏有固定位置。 Afaik，无论z-index是什么，固定定位元素总是呈现在绝对元素之上

Answer 2

您可以使用专门用于隔离HTML和CSS组件的功能：Shadow DOM

let shadow, shadowversion
try {
 shadow = document.body.attachShadow({ mode: "open" })
 shadowversion = 1
} catch(error) {
 shadow = document.body.createShadowRoot()
 shadowversion = 0
}
let canvas = document.createElement("canvas")
canvas.width = window.innerWidth
canvas.height = window.innerHeight
shadow.appendChild(canvas)
let drawing = canvas.getContext("2d")
drawing.fillRect(0, 0, 100, 100)
canvas.addEventListener("click", function() {
 if(shadowversion) {
  shadow.innerHTML = "<slot></slot>"
 } else {
  shadow.innerHTML = "<content></content>"
} })

<body>Example Original Page</body>

https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom

画布未完全覆盖镀铬扩展中的网页

2 个答案: