Question

在过去一周左右的时间里，我一直在阅读和使用Chrome扩展程序，但我无法实现我想要的目标。我想要创建的是一个扩展，在后台（或默默地）访问网站填写网页上的表单并检索响应。该网站没有API，我无法创建服务器来执行此操作，因为该网站仅允许每小时每IP的X请求，因此我的请求将在少数用户之后用尽。

所以我的想法是创建一个后台页面，使用JS来getElementById填写表单，设置值，提交表单并将响应无缝地返回给用户。

经过测试，似乎同源政策阻止了我。这是我的代码：

_

的manifest.json

{
  "manifest_version": 2,

  "name": "Getting started example",
  "description": "This extension shows a Google Image search result for the current page",
  "version": "1.0",

  "permissions": [
    "activeTab", "webRequest", "webRequestBlocking",
    "https://ajax.googleapis.com/"
  ],
  "background": {
      "page": "Page.html"
    }
}

page.html中：

<html>
    <head>
        <script src="myJS.js"></script>
    </head>
    <body>
        <iframe src="CO-TEST-FRAME.html" width="400" height="400" id="maniframe" class="maniframe"></iframe>
        <iframe src="http://www.myserver.com/iframe/CO-TEST-FRAME.html" width="400" height="400" id="maniframe2" class="maniframe2"></iframe>
        <p id="test">new</div>
    </body>
</html>

CO-TEST-FRAME.HTML：

<html>
    <head>
    </head>
    <body>
        <div id="desired" class="desired" hidden="hidden">some text</div>
    </body>
</html>

myJS.js：

window.onload = function() {
    alert("working");

    var iframe = document.getElementById("maniframe");
    var iframeStuff = iframe.contentDocument || iframe.contentWindow.document;
    var test = iframeStuff.getElementById("desired").innerHTML;

    var iframe2 = document.getElementById("maniframe2");
    var iframeStuff2 = iframe2.contentDocument || iframe.contentWindow.document;
    var test2 = iframeStuff.getElementById("desired").innerHTML;

    console.log(test);
    console.log(test2);
}

当第9,10,11,14行被注释掉时，我按预期得到“Some Text”，即本地帧工作正常。但是，当我取消注释这些行时，第二帧（在服务器上）会引发以下错误

myJS.js:10 Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "chrome-extension://laocffdoafnoeipdndafcdbiaaephcah" from accessing a frame with origin "http://www.myserver.com".  The frame requesting access has a protocol of "chrome-extension", the frame being accessed has a protocol of "http". Protocols must match.

我理解为什么这会被阻止（由于人们能够以恶意的方式运行JS），但AFAIK背景页面是在隔离的环境中运行的，所以所有风险都可以减轻？有没有办法绕过同源政策或以其他方式做我想要实现的目标？可能在用户页面上有内容脚本和1x1 iframe？

Answer 1

似乎没有办法绕过扩展页面的同源策略。请参阅https://bugs.chromium.org/p/chromium/issues/detail?id=344341。

您可以通过在后台页面上的iframe中注入content script并使用内容脚本访问和操作iframe DOM来实现目标。

一个简单的例子：

将以下内容添加到manifest.json：

"content_scripts": [
{
  "matches": ["http://www.myserver.com/iframe/CO-TEST-FRAME.html"],
  "js": ["contentScript.js"],
        "all_frames": true
}

contentScript.js：

console.log("Content script injected.");
var test = document.getElementById("desired").innerHTML;
console.log("Text from " + document.URL + ": " + test);

请注意，内容脚本中没有window.onload。在DOM加载后默认注入内容脚本，因此window.onload事件不会触发。

如果需要在后台页面和内容脚本之间进行某些通信，则需要使用message passing。有关SO的问题很多。

Answer 2

您需要明确列出manifest.js中权限下的所有URL。尝试使用未列出的任何内容会导致Cross origin错误。

你可以列出权限部分下的网址，这应该有用。

"permissions": [
        "webRequest",
        "storage",
        "https://mail.google.com/*",
        "http://myserver.com/*",
        "https://blah.blah.com/*"
    ],

希望有所帮助

Cross Origin Chrome Extension

2 个答案: