Strange Chrome Extension Issue: Injecting Iframes Into Gmail
Solution 1:
Ignore all below the first horizontal rule - short story it was a CSP issue but Rob W's solution is far superior:
manifest.json
{"name":"Todoist Gmail Sidebar","manifest_version":2,"description":"Toggle a Todoist sidebar on the gmail tabs when the page action is clicked","version":"0.9","homepage_url":"http://turkeyphant.org","icons":{"16":"icon16.png","48":"icon48.png","128":"icon128.png"},"permissions":["tabs","https://*/*","http://*/*","activeTab"],"background":{"persistent":true,"scripts":["background.js"]},"browser_action":{"default_icon":"icon128.png","default_title":"Toggle Todoist sidebar"},"content_scripts":[{"js":["jquery.min.js","jquery.easing.1.3.js","contentscript.js"],"matches":["*://mail.google.com/*"],"run_at":"document_end"}],"web_accessible_resources":["frame.html","toggleSidebar.js"]}contentscript.js
if (typeof sidebarOpen == 'undefined') { //if not set yet, it's closedconsole.log("sidebar initiated");
sidebarOpen = false; //set closedvar width = '400';//variables//resolve html tag, which is more dominant than <body>var html;
if (document.documentElement) {
html = $(document.documentElement); //just drop $ wrapper if no jQuery
} elseif (document.getElementsByTagName('html') && document.getElementsByTagName('html')[0]) {
html = $(document.getElementsByTagName('html')[0]);
} elseif ($('html').length > -1) {//drop this branch if no jQuery
html = $('html');
} else {
alert('no html tag retrieved...!');
throw'no html tag retrieved son.';
}
//positionif (html.css('position') === 'static') { //or getComputedStyle(html).position
html.css('position', 'relative');//or use .style or setAttribute
}
// Avoid recursive frame insertion...var extensionOrigin = 'chrome-extension://' + chrome.runtime.id;
if (!location.ancestorOrigins.contains(extensionOrigin)) {
var iframe = document.createElement('iframe');
// Must be declared at web_accessible_resources in manifest.json
iframe.src = chrome.runtime.getURL('frame.html');
iframe.className = 'todo-sidebar';
// Some styles for a fancy sidebar
iframe.style.cssText = 'position:fixed;top:0;right:-'+width+'px;display:block;width:'+width+'px;height:100%;z-index:1000;border-width: 0px 0px 0px 0px;';
document.body.appendChild(iframe);
}
}
frame.html
<iframe id="iframe-sidebar" src="https://todoist.com/"></iframe>
Then you can put whatever you want in toggleSidebar.js.
So after further investigation it seems the issue is something in Gmail which is blocking iframe content from certain domains:
Refused to frame 'https://todoist.com/' because it violates the following Content Security Policy directive: "frame-src https://.talkgadget.google.com/ 'self' https://accounts.google.com/https://apis.google.com/u/https://clients6.google.com/static/https://content.googleapis.com/static/https://mail-attachment.googleusercontent.com/https://www.google.com/calendar/https://docs.google.com/https://drive.google.com https://.googleusercontent.com/docs/securesc/ https://feedback.googleusercontent.com/resources/https://www.google.com/tools/feedback/ https://*.googleusercontent.com/gadgets/ifr https://talkgadget.google.com/u/https://talkgadget.google.com/talkgadget/https://isolated.mail.google.com/mail/https://www-gm-opensocial.googleusercontent.com/gadgets/https://plus.google.com/https://wallet.google.com/gmail/https://www.youtube.com/embed/https://clients5.google.com/pagead/drt/dn/https://clients5.google.com/ads/measurement/jn/https://www.gstatic.com/mail/ww/https://clients5.google.com/webstore/wall/https://ci3.googleusercontent.com/https://apis.google.com/additnow/".
However, I can't figure out why one Gmail account is blocking this but not the other. Nor where this list is coming from or how I can override/change it for my extension.
Post a Comment for "Strange Chrome Extension Issue: Injecting Iframes Into Gmail"