Question

伙计我正在bootstrap modal注入mail.google.com。为此，我需要bootstrap.css，但它包含style的{{1}}属性，这些属性与gmail UI冲突并对其进行更改。所以我决定使用html,body,a,img但Chrome不支持它。我搜索并找到了一个<style scoped> polyfill插件，可以模拟Jquery所期望的功能：

https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin

我在JSFiddle上对其进行了测试，但它在我的扩展程序中无效。这是我的代码：

的manifest.json

<style scoped>

content.js

{
  "name": "Extension",
  "version": "0.1",
  "description": "Gmail Modal",
  "icons": { "16": "icons/icon16.png",
             "48": "icons/icon48.png",
            "128": "icons/icon128.png" },

  "content_scripts": [
    {
      "matches": ["https://mail.google.com/*"],
      "css":["css/modal.css"],

      "js": [ "lib/jquery/jquery.min.js",
              "lib/jquery-scoped/jquery.scoped.js",
              "lib/bootstrap/dist/js/bootstrap.min.js",
               "content/content.js"
             ],
    "run_at":"document_end"
    }
  ],
   "web_accessible_resources": [
    "modal.html",
    "lib/bootstrap/dist/css/bootstrap.css",
    "lib/bootstrap/dist/fonts/glyphicons-halflings-regular.eot",
    "lib/bootstrap/dist/fonts/glyphicons-halflings-regular.svg",
    "lib/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf",
    "lib/bootstrap/dist/fonts/glyphicons-halflings-regular.woff",
    "lib/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2"

  ],


    "manifest_version": 2
}

modal.html

    $.scoped();        
    $.get(chrome.extension.getURL('modal.html'), function(data) {
      $(data).appendTo('body');
     });

它应该有效，但Gmail元素的元素仍然从<div> <style scoped> @import url('chrome-extension://__MSG_@@<extension_id_here>/lib/bootstrap/dist/css/bootstrap.css'); </style>  <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog">  <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div>加载styles。

修改

我遵循了wOxxOm的建议。我没有使用bootstrap.css，而是在@import内添加了bootstrap内容。在注入<style scoped>之后我也打电话给$.scoped()

content.js

html

现在$.get(chrome.extension.getURL('lib/bootstrap/dist/css/bootstrap.css'), function(css) { $.get(chrome.extension.getURL('modal.html'), function(modal) { $("<div>" + "<style scoped>" + css + "</style>" + modal + "</div>").appendTo('body'); $.scoped(); }); });没有改变，但我注入的gmail UI所有元素都加载了html的每个可能的样式属性（有很多样式属性，每个元素都有相同的属性）

Jquery polyfill插件将bootstrap.css应用于bootstrap模式？

0 个答案: