I am creating a Google Chrome extension where a user selects a context menu item, which is enabled for all webpages and that opens a side bar. For the side bar I am injecting an iframe into the page through a content script(contentscript.js) and loading an html markup(content.html) in it also through (contentscript.js).
My problem is that the extension is messing up some pages UI and in some cases it does not show the sidebar at all. Problem seems to be on HTTPS pages. Look at the grey stuff in the screenshot below. Only happens when extension is enabled.
The content in the iframe is sending data to my backend. So not sure, if that is causing the problem.
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>
