Javascript 注入bootsrap'；css会影响页面

我正在开发一个chrome扩展

我需要在双击单词时显示弹出框。因此，我注入了bootstrap popover：

"content_scripts": [
    {
        "matches": ["*://*/*"],
        "js": ["3rdparty/jquery-3.2.1.min.js",
               "3rdparty/bootstrap-3.3.7.min.js", ...],
        "css": ["3rdparty/bootstrap-3.3.7.min.css"],
        "run_at": "document_end"
    }
  ]

但是css的注入会影响一些页面。可能会出现一些工件。

---

如何正确注入弹出窗口？

您需要隔离引导类

检查以下链接：

---

除非您需要，否则请不要将jQuery加载到每个页面（

content\u scripts

和您的

匹配项

）。jQuery是85kiB的最小化代码。这是一个沉重的负担，每一页都要负担。我们这些打开100个标签的人怎么办？只注入允许用户开始与扩展交互所需的最小值。然后在用户做出选择后再次注入。最小部分应该只能是一个最小的普通JavaScript事件处理程序和一两个UI元素。@Makyen，谢谢您的评论！这不是一个优化阶段，但我会考虑到这一点。虽然对于100个标签，开销将为8.5miB（对于我的扩展，精确地说是12miB）。与所有选项卡占用的内存相比，这有这么多吗？好吧，我曾经有过这样的经历：在20多个窗口中（目前还没有）有700多个选项卡，27个扩展当前处于活动状态（另外40多个扩展当前处于禁用状态）。因此，如果所有这些活动扩展都不加区别地加载代码，那么它将是1.5GiB（只包含最小化的代码）。85kiB仅仅是所需总体资源的一个指标，包括内存和在每个URL中加载所需的额外计算资源。通常，所有这些库都必须在显示页面之前加载，这会影响用户对浏览器响应速度的感知。通常，一个或两个库不会破坏内容，但可能会让用户感到沮丧。即使只有一个库也没那么糟糕，但是注释主要是为了让您和其他人思考在开发代码时所做的选择所占用的资源。希望它能减少扩展，将78个不同的脚本/库加载到每个HTTPS URL中。