Javascript 使用chrome扩展内容脚本在网页上触发引导模式（不会弄乱页面CSS）

从内容脚本打开引导模式的推荐方法是什么？我知道CSS和JS文件可以通过清单以声明方式和编程方式注入页面。但是，我担心注入的CSS文件（在本例中为

bootstrap.min.CSS

）可能与网页的CSS冲突

---

解决这个问题的最佳方法是什么

您可以使用。ShadowDOM基本上允许您在现有网页的上下文中创建一个独立的DOM。所有CSS的作用域都是局部的，DOM根被认为是影子DOM的根元素，而不是页面的真正根元素。您可以插入执行以下操作的内容脚本：

创建阴影根

添加引用引导CSS的链接标记

创建模态所需的HTML并将其附加到阴影根

打开模式对话框

如果您需要从页面获取信息，您的内容脚本仍然可以定期访问完整的窗口上下文

下面是一些（完全未经测试的）内容脚本示例代码，以说明：

const shadowWrapper = document.createElement('div');
shadowWrapper.setAttribute('style', `
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
`);
const shadowRoot = shadowWrapper.attachShadow({ mode: 'open' });
const bootstrapStyle = document.createElement('link');
bootstrapStyle.setAttribute('rel', 'stylesheet');
bootstrapStyle.setAttribute('src', 'bootstrap.min.css');
shadowRoot.appendChild(bootstrapStyle);

const modal = document.createElement('div');
modal.id = "myModal";
shadowRoot.appendChild(modal);
// Whatever you need to do to create your modal...
$("#myModal").modal();

请注意，只有当您只想在Chrome上发布此扩展时，这才是一个可行的解决方案-ShadowDOM在其他浏览器上还没有很好的支持（）