奇怪的 chrome 扩展问题：将 iframe 注入 gmail [重复]答案

【问题标题】：Strange chrome extension issue: injecting iframes into gmail [duplicate]奇怪的 chrome 扩展问题：将 iframe 注入 gmail [重复]
【发布时间】：2015-03-02 15:41:09
【问题描述】：

问题：Chrome 侧边栏

很长一段时间以来，我一直想要一个 Chrome 扩展程序，它可以将其他内容放在 Gmail 的侧边栏中，就像 Remember the Milk Gmail extension 一样。

看来我并不孤单²，但 Chrome 开发人员已经使这个功能比 Firefox³ 更困难。在未能进行多次黑客攻击和变通方法后，我使用extensionizr 和someone else's code 编写my first Chrome extension。

目的是让我在我的 Chrome 标签中，尤其是我的 Gmail 标签中，有一个带有待办事项列表或任何我想要的 iframe 的侧边栏。

问题：`iframe`s in Gmail html 页面

我遇到的问题是https://todoist.com/ 作为我的iframe src，它适用于我尝试过的每个标签，除了Gmail。一个警告：它适用于某些 Gmail 帐户，但不适用于其他帐户。我找不到任何会导致这种情况的差异。

我已尝试禁用所有其他扩展，以防出现兼容性问题但没有运气，即使所有功能都已激活，它也适用于某些 Gmail 帐户。我尝试禁用所有实验室并更改所有设置以匹配，但仍然没有骰子。

SSL 干扰的另一个角度（但有非常奇怪的症状）？

我倾向于认为这是 SSL 问题，因为 Gmail 不喜欢将 iframes 嵌入非 HTTPS 内容，但这没有意义，因为它适用于某些 Gmail 帐户，而不适用于其他帐户。

任何想法、意见、建议将不胜感激，因为我是一个完全的新手，完全被困在这里。

如果有帮助，请提供更多信息：当我编辑页面源代码时，我可以从字面上删除 Gmail 页面中的所有内容，除了 html 和 body 标记以及注入的 iframe，它仍然显示为空白，就好像内容一样并没有被iframe src 首先以某种方式抓住......

附录第二个：a) 记录网络数据，使用工作帐户通过 GET 请求从 SSL 站点成功提取数据。在非工作帐户上，从未提出任何请求。 b）即使我加载了 Gmail，然后将 DOM 剥离为裸 HTML 和 body 标签，然后注入 iframe，它就会出现空白。源如下，但没有请求、加载或显示内容。 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>

【问题讨论】：

在以 chrome:// 作为基本 url 的内容中使用 iframe 并再次在此页面内加载 iframe。正如罗伯所说。几天前，我们已经发布了我们的扩展程序 chrome.google.com/webstore/detail/typeless-chrome-extension/…，它也是如此。

标签： javascript jquery google-chrome iframe google-chrome-extension

【解决方案1】：

忽略第一个水平规则以下的所有内容 - 短篇小说这是一个 CSP 问题，但 Rob W 的解决方案要好得多：

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>

然后你可以在toggleSidebar.js中放任何你想要的东西。

因此，经过进一步调查，问题似乎出在 Gmail 中，它阻止了来自某些域的 iframe 内容：

拒绝框架“https://todoist.com/”，因为它违反了以下内容安全政策指令：“frame-src https://.talkgadget.google.com/ 'self' https://accounts.google.com/ https://apis.google.com/u/ @987654324 @ @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/ 987654333 https://isolated.mail.google.com/mail/ 987654335 https://plus.google.com/ 987654337 https://www.youtube.com/embed/ 987654339 https://clients5.google.com/ads/measurement/jn/ 987654341 https://clients5.google.com/webstore/wall/ 987654343 https://apis.google.com/additnow/”。

但是，我无法弄清楚为什么一个 Gmail 帐户会阻止这个，而另一个却没有。也不是这个列表来自哪里，或者我如何为我的扩展覆盖/更改它。

【讨论】：