使用chrome扩展内容脚本在网页上触发引导模式(而不破坏页面CSS)

Question

从内容脚本打开引导模式的推荐方法是什么？我知道CSS和JS文件可以通过清单以声明方式并以编程方式注入页面。但是，我担心注入的CSS文件(在本例中是bootstrap.min.css)可能与网页的CSS冲突。

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

Answer 1

您可以使用阴影DOM实现所需的隔离。影子DOM基本上允许您在现有网页的上下文中创建一个孤立的DOM。所有CSS都是本地范围的，DOM根被认为是Shadow DOM的根元素，而不是页面的真正根。您可以注入执行以下操作的内容脚本：

1. 创建阴影根。
2. 添加引用引导CSS的链接标记。
3. 创建模式所需的HTML并将其附加到阴影根目录中。
4. 打开通道。

如果需要从页面获取信息，内容脚本仍然可以正常访问整个窗口上下文。

下面是一些(完全未经测试的)内容脚本示例代码来说明：

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上发布这个扩展- Shadow DOM在其他浏览器(https://caniuse.com/#search=shadow%20dom)上还没有很好的支持。