【问题标题】:Invisible tabs in chrome extensionchrome 扩展中的不可见标签
【发布时间】:2016-05-31 17:24:17
【问题描述】:

我基本上想通过使用 Chrome 扩展程序来自动化网站。但是这个网站有非常多的客户端代码,所以很难找出我需要发出哪个请求才能获得所需的信息。

我能想到的最简单的方法是使用内容脚本在输入元素中输入文本并单击按钮,如下所示(在本例中使用 jQuery):

$.ready(function(){
  $("#input").val("foo");
  $("#submit").click();
});

与这个问题非常相似:Injecting input into a tab opened by a Chrome Extension,但与该网站的交互不应该是可见的。

那么:我可以从扩展程序中打开用户看不到的 chrome 页面并使用它们与网站交互吗?

【问题讨论】:

标签: google-chrome-extension


【解决方案1】:

如果您希望页面完全不可见,我认为唯一的选择是将其加载到背景页面上的 iframe 中。然后,您可以使用内容脚本访问 iframe 中的页面,就像访问任何正常的可见页面一样。

由于许多网站限制使用 X-Frame-Options 标头进行嵌入,因此您可能必须使用 webRequest API 删除该标头,然后才能将页面加载到 iframe 中。一些页面还使用其他技术来防止嵌入,这可能会使这进一步复杂化。

示例代码:

manifest.json

{
  "manifest_version": 2,
  "name": "Hidden page in background",
  "description": "Interact with a hidden page in background",
  "version": "1.0",

  "background": {
    "page": "background.html",
    "persistent": true
  },
  "content_scripts": [
    {
      "matches": ["*://*.google.fr/*"],
      "js": ["contentscript.js"],
      "all_frames": true
    }
  ],
  "permissions": ["*://*.google.fr/*", "webRequest", "webRequestBlocking"]
}

background.html

<!DOCTYPE html>
<html>
  <head>
    <script src="background.js"></script>
  </head>
  <body>
    <iframe id="iframe1" width="1000 px" height="600 px" src="http://www.google.fr"></iframe>
  </body>
</html>

background.js

// This is to remove X-Frame-Options header, if present
chrome.webRequest.onHeadersReceived.addListener(
    function(info) {
      var headers = info.responseHeaders;
      var index = headers.findIndex(x=>x.name.toLowerCase() == "x-frame-options");
      if (index !=-1) {
        headers.splice(index, 1);
      }
      return {responseHeaders: headers};
    },
    {
        urls: ['*://*.google.fr/*'], //
        types: ['sub_frame']
    },
    ['blocking', 'responseHeaders']
);

contentscript.js

var elementToInsert = document.createElement("h1");
elementToInsert.textContent = "This text comes from my content script.";
document.body.insertBefore(elementToInsert, document.body.firstChild);

几点说明:

  • X-Frame-Options header 的去除不限于这里的背景页面。它也允许将相关页面嵌入到任何其他页面的 iframe 中。不幸的是,Chrome 似乎不支持 ALLOW-FROM uri 值,该值可用于限制仅嵌入到您的扩展程序中。
  • 内容脚本被注入到这里的所有页面。您可以仅以编程方式将其注入到背景页面上的 iframe,但这会变得有点复杂。
  • 我以www.google.fr 为例,因为它使用X-Frame-Options,但没有使用任何其他技术来防止嵌入。我使用法语域是因为google.com 倾向于自动重定向到本地国家级域。

【讨论】:

  • 这正是我想要的。就我而言,令人惊讶的是,我什至不需要删除 X-Frame-Options 标头。
【解决方案2】:

请参阅tabs.create,您可以调用以下代码创建一个不可见的选项卡(未激活)。

chrome.tabs.create({ url: 'https://www.google.com', active: false, });

【讨论】:

  • 这仍然是一个可见的标签。
  • 我想做的通常可以用无头浏览器完成,但不能用 chrome 扩展。
  • 将 chrome.windows.create 与“popup”一起使用,您将拥有一个无头浏览器。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2016-03-25
  • 2015-08-03
  • 2022-01-19
  • 2015-03-07
  • 2017-03-20
  • 2021-09-16
  • 2012-06-19
相关资源
最近更新 更多