我正在编写一个chrome扩展程序,我想在某些页面中插入一个可见的标题(即导航栏样式标题,而不是http-sense中的标题)。
对于大多数网页,代码都有效。我正在使用this (wicked cool) project,它使用react / redux代码来启用简单的扩展/网页通信。
插入代码的位置由此行决定,如编写的那样,插入包含我的标题的div
作为DOM body
中的第一个子项:
document.body.insertBefore(injectDiv, document.body.firstChild);
到目前为止,当网站具有a)固定标头或b)悬浮在注入标头上的浮动弹出窗口时,问题就出现了。
是否可以插入我的DOM节点,以便将DOM的整个内容推送下来?几乎就像Yahoo等人有时潜入IE的浏览器栏一样。
我不太了解jQuery,所以我想也许在这个工具箱中有一个技巧,但是vanilla javascript会很理想。
ETA:我还没有完全设计标题,所以它唯一的CSS道具是与定位相关的:
let injectDiv = document.createElement('div');
injectDiv.style.border = '1px solid #ccc';
injectDiv.style.background='white';
injectDiv.style.textAlign = 'center';
injectDiv.style.width = '100%';
injectDiv.style.zIndex = 10011;
injectDiv.style.top = 0;
injectDiv.style.left = 0;
injectDiv.style.display = 'block';
injectDiv.style.position = 'fixed';
其中z-index = (target site's highest z-index) + 1