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 closed
console.log("sidebar initiated");
sidebarOpen = false; //set closed
var 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
} else if (document.getElementsByTagName('html') && document.getElementsByTagName('html')[0]) {
html = $(document.getElementsByTagName('html')[0]);
} else if ($('html').length > -1) {//drop this branch if no jQuery
html = $('html');
} else {
alert('no html tag retrieved...!');
throw 'no html tag retrieved son.';
}
//position
if (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"