Question

我的Chrome扩展程序包含以下文件：

manifest.json
background.js
content.js

单击浏览器操作后，

background.js将消息发送到content.js。那是我要显示模态的时候，它将显示消息中的数据。

我在哪里存储HTML（隐藏的模式）以及如何访问它？

更新

我像这样在content.js中创建一个iframe：

var iframe = document.body.appendChild(document.createElement('iframe'));
iframe.src = chrome.extension.getURL('modal.html');

modal.html

<!DOCTYPE html>
     <html>
     <head>
         <link rel="stylesheet" href="bootstrap.min.css">
     </head>

     <body>

         <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
             <div class="modal-dialog" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                         </button>
                     </div>
                     <div class="modal-body">
                         ...
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                         <button type="button" class="btn btn-primary">Save changes</button>
                     </div>
                 </div>
             </div>
         </div>

         <script src="jquery-3.3.1.slim.min.js"></script>
         <script src="popper.min.js"></script>
         <script src="bootstrap.min.js"></script>

    </body>

</html>

manifest.json

{
    "manifest_version": 2,
    "name": "Anslutningsstatus Webbtidbokning",
    "description": "Visar vilka webbtidbokningsflöden i 1177 Vårdguidens e-tjänster som en vårdenhet har stöd för baserat på vilka tjänstekontrakt den är ansluten till.",
    "version": "0.1",
    "icons": {
        "16": "icon16.png",
        "48": "icon48.png",
        "128": "icon128.png"
    },
    "background": {
        "scripts": ["browser-polyfill.min.js", "background.js", "axios.min.js"]
    },
    "permissions": [
        "tabs",
        "<all_urls>"
    ],
    "browser_action": {
        "default_icon": "icon16.png"
    },
    "web_accessible_resources": ["content.js", "styles.css", "modal.html"]

}

发生的情况是将300像素宽，完全空白的iframe注入页面。我在做什么错了？

Chrome扩展程序中的Bootrstrap 4模态

0 个答案: