奇怪的chrome扩展问题：将iframe注入gmail

时间：2015-01-05 05:19:29

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

问题：Chrome侧边栏

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

似乎我并不孤单2，但Chrome开发人员使这项功能比Firefox 3要困难得多。在未能使用几个hacks和变通办法后，我使用extensionizr和someone else's code来编写my first Chrome extension。

我的目标是让我有一个带有待办事项列表的侧边栏或我想要的iframe Chrome浏览器标签，特别是我的Gmail标签页。

问题： Gmail html页面中的iframe

我遇到的问题是https://todoist.com/作为我的iframe src，它可以在我尝试过的除Gmail之外的每个标签中使用。需要注意的是：适用于某些Gmail帐户但不适用于其他帐户。我无法找到导致这种情况的任何差异。

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

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

我倾向于认为这是一个SSL问题，因为Gmail并不喜欢使用非HTTPS内容嵌入iframe，但这并不合理，因为它有效使用某些Gmail帐户，而不是其他帐户。

任何想法，意见，建议都会非常感激，因为我是一个完全没有新手，完全陷入困境。

如果有帮助的详细信息：当我编辑网页来源时，除了html和body标记以及注入的iframe之外，我还可以删除Gmail页面中的所有内容，但它仍会显示为空白好像内容不是被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>

1 个答案:

答案 0 :(得分：-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内容：

  

拒绝框架＆＃39; https://todoist.com/＆＃39;因为它违反了以下内容安全政策指令：＆＃34; frame-src https：// .talkgadget.google.com /＆＃39; self＆＃39; 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/＆＃34;。

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

相关问题
最新问题