奇怪的Chrome扩展程序问题:将iframe注入gmail [英] Strange chrome extension issue: injecting iframes into gmail
问题描述
很长时间以来，我一直想要一个Chrome扩展程序，该扩展程序可以将其他内容放在Gmail的侧边栏中，就像
For a long time, I've wanted a Chrome extension that puts other content in a sidebar within Gmail, much like the Remember the Milk Gmail extension.
似乎我并不孤单 2 ，但是Chrome开发人员使此功能比Firefox extensionizr 和 我的第一个Chrome扩展程序 .
It seems I'm not alone2 but the Chrome devs have made this functionality much more difficult than, say, Firefox3. After failing to make several hacks and workarounds function, I used extensionizr and someone else's code to write my first Chrome extension.
目的是让我在侧边栏上有一个待办事项列表，或者我想在Chrome标签(尤其是Gmail标签)中使用任意的iframe.
The aim is to allow me to have a sidebar with a to-do list or whatever iframe I want available in my Chrome tabs, especially my Gmail tab.
我遇到的问题是以 https://todoist.com/作为我的iframe src，它可以在我尝试过的除Gmail之外的所有标签中使用.注意事项:它在某些Gmail帐户中有效，而在其他Gmail帐户中无效.我找不到会导致这种情况的任何差异.
The issue I'm having is that with https://todoist.com/ as my iframe src, it works in every tab I've tried except Gmail. A caveat: it works in some Gmail accounts but not others. I can't find any differences that would cause this.
我尝试禁用所有其他扩展名，以防万一存在兼容性问题，但没有运气，即使激活了所有功能，它也可以在某些Gmail帐户中使用.我尝试禁用所有实验室并更改所有设置以匹配但仍然没有骰子.
I've tried disabling all other extensions in case there are the compatibility issue but no luck and it works in some Gmail accounts even with everything activated. I've tried disabling all Labs and changing all settings to match but still no dice.
我倾向于认为这是一个SSL问题，因为Gmail不喜欢将iframe与非HTTPS内容一起嵌入，但这没有任何意义，因为它适用于某些Gmail帐户，而不适用于其他帐户.
I'm inclined to think it's an SSL issue as Gmail doesn't like embedding iframes with non HTTPS content but this doesn't make sense because it works with some Gmail accounts, not others.
任何想法，意见和建议都将不胜感激，因为我是一位完全是新手，并且完全停留在这里.
Any thoughts, input, advice would be greatly appreciated as I'm an utter novice and completely stuck here.
更多信息，以帮助您:编辑页面源代码时，我可以从字面上删除Gmail页面中除html和body标记以及注入的iframe之外的所有内容，尽管内容仍然空白最初并没有被iframe src抓住...
More info in case it helps: when I edit the page source, I can literally remove everything in the Gmail page apart from html and body tags and the injected iframe and it still comes up blank as though the content isn't being grabbed by the iframe src in the first place somehow...
附录二:a)记录网络数据，并使用工作帐户通过GET请求从SSL站点成功提取数据.在非工作帐户上，从未提出过任何请求. b)即使我加载了Gmail，也要将DOM剥离为裸露的HTML和正文标签，然后将iframe注入空白.来源如下，但未请求，加载或显示任何内容. wtactualf?！
addendum the second: a) Logging network data, with the working account it pulls the data successfully from the SSL site with a GET request. On the non-working account, no request is ever made. b) Even if I load Gmail, then strip down the DOM to bare HTML and body tags then inject the iframe it comes up blank. The source is as follows but no content is requested, loaded or displayed. wtactualf?!
<html class="aAX" style="position: relative; width: 1187px;">
<body class="aAU fullcontact-minimized GmInitDone">
</body>
<iframe id="someSidebar" src="https://todoist.com/" frameborder="0" allowtransparency="false" style="position: fixed; height: 100%;border:none;z-index: 2147483647;top:0px;right:0px;width: 400px;"></iframe>
</html>
推荐答案
忽略所有低于第一个水平线的规则-简而言之，这是一个CSP问题，但Rob W的解决方案要优越得多:
Ignore all below the first horizontal rule - short story it was a CSP issue but Rob W's solution is far superior:
{
"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>
然后，您可以将所需的内容放入toggleSidebar.js.
Then you can put whatever you want in toggleSidebar.js.
因此，在进一步调查之后，似乎问题出在Gmail中，该问题阻止了某些域中的iframe内容:
So after further investigation it seems the issue is something in Gmail which is blocking iframe content from certain domains:
拒绝使用框架" https://todoist.com/"，因为它违反了以下内容安全政策指令: "frame-src https:// .talkgadget.google.com/'self' https://accounts.google .com/ https://apis.google.com/u/ https://clients6.google.com/static/ https://mail-attachment.googleusercontent.com/ https://www.google.com /calendar/ https://docs.google.com/ https://feedback.googleusercontent.com/resources/ https://www.google.com/tools/feedback/ https://*.googleusercontent. com/gadgets/ifr https://talkgadget.google.com/u/ 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://apis.google.com/additnow/.
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/".
但是，我不知道为什么一个Gmail帐户阻止了该帐户，而另一个帐户却阻止了该帐户.也不是该列表的来源，或者如何为我的扩展程序覆盖/更改它.
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.
这篇关于奇怪的Chrome扩展程序问题:将iframe注入gmail的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
