chrome扩展中的隐形标签

Pet*_*ete 3 google-chrome-extension

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

我能想到的最简单的方法是使用内容脚本在输入元素中输入文本并单击按钮,就像这样(在这种情况下使用jQuery):

$.ready(function(){
  $("#input").val("foo");
  $("#submit").click();
});
Run Code Online (Sandbox Code Playgroud)

与此问题非常相似:将输入注入Chrome扩展程序打开的标签页,但与该网站的互动不应该是可见的.

那么:我可以从扩展程序打开chrome中的页面,这些页面对用户不可见并使用它们与网站进行交互吗?

Pet*_*ček 9

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

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

示例代码:

的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"]
}
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

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']
);
Run Code Online (Sandbox Code Playgroud)

contentscript.js

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

几个笔记:

  • 删除X-Frame-Options标题不仅限于此处的背景页面.它还允许将相关页面嵌入iframe中的任何其他页面上.很遗憾,Chrome似乎不支持ALLOW-FROM uri可用于限制嵌入到您的扩展程序的价值.
  • 内容脚本正在这里注入所有页面.您可以通过编程方式将其注入后台页面上的iframe,但这会更复杂一些.
  • 我用它www.google.fr作为一个例子,因为它使用X-Frame-Options但不使用任何其他技术来防止嵌入.我使用法语域名,因为它google.com倾向于自动重定向到本地国家/地区域名.