我正在开发Chrome扩展程序的设计。我希望能够更改选项卡中显示的标题,而无需更改真实的<title />
标记。在后台脚本中,您可以将标题作为只读值访问。通常,您使用内容脚本并更改实际的<title />
标记。
我正在尝试使用ShadowDOM来查看这是否是一个选项。想法是ShadowDOM以可视方式显示,但不是真实DOM的一部分,不会影响真实页面。
但是,在我的测试中,我可以添加阴影<head />
和<title />
元素,但它们不会更改页面标题中显示的内容。我猜这是设计,因为浏览器可能从真正的dom获得这些值,但我想检查以确定是否有办法显示“阴影标题”?
假设:
<html lang="en">
<head>
<title>Shadow DOM Example</title>
<meta charset="UTF-8" />
<script>
window.addEventListener("load", function() {
/** Sanity check, change the content of a part of th body **/
let realHost = document.getElementById("shadowHost");
let hostShadow = realHost.createShadowRoot();
hostShadow.textContent = "Shadow overlay on the body";
/** Try Creating a Shadow in the Title **/
let realTitle = document.getElementsByTagName("head")[0].getElementsByTagName("title")[0];
let titleShadow = realTitle.createShadowRoot();
titleShadow.textContent = "Created in titleShadow";
/** Try Creating a Shadow in the Head, then add title **/
let realHead = document.getElementsByTagName("head")[0];
let headShadow = realHead.createShadowRoot();
shadowTitle = document.createElement("title");
shadowTitle.textContent = "Created in headShadow";
headShadow.appendChild(shadowTitle);
}, false);
</script>
</head>
<body>
<div id="shadowHost">
Original Text
</div>
</body>
我得到以下内容:
答案 0 :(得分:0)
使用新的标准版Shadow DOM,您现在应该使用attachShadow()
而不是createShadowRoot()
。很遗憾,您无法将Shadow DOM附加到<title>
元素any more。
因此不推荐使用它,因为它会在Chrome中引发错误。
此外,在<title>
规范中,只有文本内容在UI中用作文档标题,因此即使使用旧版本的Shadow DOM也无法正常工作。