Question

我正在创建一个Google Chrome扩展程序，用户可以选择一个上下文菜单项，该菜单项已启用所有网页并打开侧栏。对于侧边栏，我通过内容脚本（contentscript.js）将iframe注入到页面中，并通过（contentscript.js）在其中加载html标记（content.html）。

我的问题是扩展程序弄乱了一些页面UI，在某些情况下它根本没有显示侧边栏。问题似乎出现在HTTPS页面上。看看下面截图中的灰色内容。仅在启用扩展时才会发生。

iframe中的内容是将数据发送到我的后端。所以不确定，如果这导致了问题。

的manifest.json

{
  "update_url": "https://clients2.google.com/service/update2/crx",
  "name": "My App",
  "version": "3.0",
  "manifest_version": 2,
  "content_security_policy": "script-src 'self' 'unsafe-eval' https://maps.googleapis.com; object-src 'self'",
  "content_scripts": [{
    "matches": [
      "http://*/*",
      "https://*/*"
    ],
    "css": [
      "css/global.css"
    ],

    "js": [
      "js/jquery.js",
      "js/bootstrap.min.js",
      "js/libs/angular.min.js",
      "js/libs/angular-cookies.js",
      "js/app.js",
      "js/contentscript.js"
    ],
    "all_frames": true
  }],

  "web_accessible_resources": [
    "content.html",
    "popup.html"
  ],

  "default_locale": "en",
  "background": {
    "scripts": [
      "js/events.js"
    ],
    "persistent": false
  },
  "permissions": [
    "<all_urls>",
    "storage",
    "tabs",
    "contextMenus",
    "cookies"
  ]
}

contentscript.js

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {

    var iframe = document.createElement('iframe');
    iframe.id = 'iframe';
    iframe.src = chrome.runtime.getURL('content.html');
    document.body.insertBefore(iframe, document.body.firstChild);

    var xmlHttp = null;
    xmlHttp = new XMLHttpRequest();
    xmlHttp.open("GET", chrome.extension.getURL("popup.html"), false);
    xmlHttp.send(null);
    var popupWindow = document.createElement("div");
    popupWindow.innerHTML = xmlHttp.responseText;
    document.body.insertBefore(popupWindow, document.body.firstChild);

    document.getElementById("popup").appendChild(iframe);

    document.getElementsByClassName('head-p44')[0].addEventListener('click', function() {
      popupWindow.style.display = 'none';
    });

  });

popup.html

    <html>
     <body>
      <div id="popup">
         <div class="head-p44">
          <div class="close-p44">x</div>
        </div>
     </div>
    </body>
  </html>

content.html

<!DOCTYPE html>
<html lang="en" ng-app="MyApp" ng-csp>

<head>


    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <!-- Need this file for ng-hide and ng-show to work in CSP in Chrome Extensions -->
    <link href="css/angular-csp.css" rel="stylesheet">
    <link href="css/global.css" rel="stylesheet">

    <!-- jQuery -->
    <script src="js/jquery.js" type="text/javascript" ></script>


    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/libs/angular.min.js"></script>
    <script src="js/libs/angular-cookies.js"></script>


    <!-- Angular Script to manager content.html -->
    <script src="js/app.js"></script>


</head>

<body ng-controller="mainController">

<div>

  <!-- My sidebar markup here -->

</div>

</body>

</html>

为什么我的内容脚本没有将基于iframe的侧面板添加到某些网站，尤其是HTTPS网站？

0 个答案: