我正在开发Chrome扩展的设计。我希望能够更改标签中显示的标题,而不会改变真实的<title />
标签。在后台脚本中,您可以将标题作为只读值访问。通常,您使用内容脚本并更改实际的<title />
标记。可能使用ShadowDOM更改窗口/标签标题
我正在试验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>
我得到如下:
为什么你不在原始的'document'中设置标题? – guest271314
由于这将是一个扩展,我想避免页面原始脚本使用标题的情况。我们的想法是只保留原始页面,但只更改浏览器中标签标题中显示的标题。原始网页中的脚本也可以修改标题,这意味着您需要始终监视更改并与页面上的其他javascript进行竞争。 –
不符合要求。原始文档中只有一个'