奇怪的chrome扩展程序问题:将iframe注入Gmail

Strange chrome extension issue: injecting iframes into gmail

本文关键字：iframe 注入 Gmail 问题 程序 chrome 扩展      更新时间：2023-09-26

问题：Chrome侧边栏

很长一段时间以来，我一直想要一个Chrome扩展程序，将其他内容放在Gmail的侧边栏中，就像记住牛奶Gmail扩展程序一样。

似乎我并不孤单2，但 Chrome 开发人员使此功能比 Firefox3 困难得多。在几次黑客和变通方法功能失败后，我使用扩展程序和其他人的代码编写了我的第一个Chrome扩展程序。

目的是让我有一个侧边栏，其中包含待办事项列表或我希望在我的 Chrome 标签页（尤其是我的 Gmail 标签页）中提供的任何iframe。

问题：Gmail html 网页中出现iframe

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

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

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

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

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

<小时 />

更多信息，以防万一：当我编辑页面源代码时，我可以从字面上删除 Gmail 页面中的所有内容，除了 html 和 body 标签以及注入的 iframe，它仍然显示为空白，就好像内容没有被 iframe src

以某种方式抓取......<小时 />

附录第二：a）记录网络数据，使用工作帐户，它通过GET请求从SSL站点成功拉取数据。在非工作帐户上，从未提出任何请求。b） 即使我加载 Gmail，然后将 DOM 剥离为裸露的 HTML 和正文标签，然后注入 iframe，它显示为空白。源如下，但不请求、加载或显示任何内容。咋回事？！

<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的解决方案要优越得多：

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"
        ]
    }

内容脚本.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);
      }
    }

框架.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/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帐户阻止了这个帐户，而不是另一个帐户。也没有这个列表来自哪里，或者我如何为我的扩展覆盖/更改它。

相关文章：