构造样式 - 如何通过 Chrome 扩展 (JS/CSS) 进行更改答案

【问题标题】：Constructed Styles - how to change via Chrome extension (JS/CSS)构造样式 - 如何通过 Chrome 扩展 (JS/CSS) 进行更改
【发布时间】：2021-02-20 05:51:15
【问题描述】：

我有一个网页，它是第三个供应商应用程序。在这个页面中有很多代码可以创建一些构造样式。我想创建一个 chrome 扩展来移动页面中的一个 div。我尝试注入 JS 和 CSS，但它只适用于普通样式，而不是一次构建。我可以做些什么来更改可构造样式表，例如 shadow DOM 中 div 的“宽度”值？

更新：replace 将按照下面的 cmets 完成工作，但如何找到阴影对象现在是一个问题

<!DOCTYPE html>
<html>
<body>
<script>
    body = document.querySelector("body");
    const shadow = body.attachShadow( {mode: 'open'});
    shadow.innerHTML = "<p>New2</p>";

    const bgPurple = new CSSStyleSheet();
    const everythingTomato = new CSSStyleSheet();

    bgPurple.replace(`p {font-weight: bold; }`);
    everythingTomato.replace(`* { color: tomato; }`);
    shadow.adoptedStyleSheets = [everythingTomato, bgPurple];
</script>

<script>
    const everythingTomato2 = new CSSStyleSheet();
    everythingTomato2.replace(`* { color: red; }`);
    shadow.adoptedStyleSheets = [everythingTomato2];
/*How to find "shadow" to use adoptedStyleSheets? The first code is given not clear, I can only change this one. */
</script>
</body>
</html>

【问题讨论】：

“可构造样式表”是什么意思？能否提供部分 html/css 以及您想要实现什么。可能需要在一段时间或事件后对 html 进行修改。
可构造样式表：developers.google.com/web/updates/2019/02/…。我不是 100% 确定（没有对它们做太多事情，它们现在只在 Chrome 中工作）但我认为你只能在它们上使用 replace 和 replaceSync。
是的，你是对的 replace 就是答案。现在的问题是如何找到要在其上使用它的阴影对象。我将尝试在上面的问题中添加一个示例。
您的代码运行良好；您在全局范围内声明了 shadow。如果您没有，那么：document.body.shadowRoot 将为您提供参考（不需要像 body、head 这样的 HTML 元素上的 querySelector），因为 attachShadow 都 设置和返回（这个。）shadowRoot
@Danny'365CSI'Engelman 谢谢！你又是对的，shadowRoot 是我需要的。我不知道代码附加在哪里，所以我发现它只是在控制台中使用 dir(body) ，在我的真实情况下，它是在 body 之后创建的自定义元素。

标签： javascript css google-chrome shadow-dom constructable-stylesheet

【解决方案1】：

可构造样式表：https://developers.google.com/web/updates/2019/02/constructable-stylesheets

我不是 100% 确定（对它们做的不多，它们现在只在 Chrome 中工作）但我认为你只能在它们上使用 replace 和 replaceSync

您的代码运行良好；您在全局范围内声明了 shadow。如果您没有，那么：document.body.shadowRoot 将为您提供参考（对于 HTML 元素（如 body 、 head）不需要 querySelector），因为 attachShadow 两者都设置并返回 (this.)shadowRoot

您可以链接所有内容：

super()
  .attachShadow({mode:"open"})
  .innerHTML="Hello Component"

【讨论】：