Cross Origin Chrome扩展程序 [英] Cross Origin Chrome Extension
问题描述
在过去一周左右的时间里，我一直在阅读和使用Chrome扩展程序，但我无法实现我想要的目标。我想要创建的是一个扩展，在后台（或默默地）访问网站填写网页上的表单并检索响应。该网站没有API，我无法创建服务器来执行此操作，因为该网站仅允许每小时每个IP的X请求，因此我的请求将在少数用户之后用尽。
I have been reading and playing around with Chrome Extensions for the last week or so but I'm having trouble trying to achieve what I want. What I am trying to create is an Extension that in the background (or silently) visits a website fills out a form on the web page and retrieves the response. The website doesn't have an API and I can't create a server to do this as the website only allows X requests per IP per hour so my requests would be exhausted after a few users.
所以我的想法是创建一个后台页面，使用JS来getElementById填写表单，设置值，提交表单并将响应无缝地返回给用户。
So my idea was to create a background page that would have some javascript to fill out the form using JS to getElementById, set the values, submit the form and return the response to the user seamlessly.
经过测试，似乎同源政策阻止了我。这是我的代码：
After testing it seems the Same Origin policy is blocking me. Here's my code:
_
manifest.json
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：
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：
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行被注释掉时，我得到有些文本按预期，即本地框架工作正常。但是当我取消注释这些行时，第二帧（在服务器上）抛出以下错误
When line 9, 10, 11, 14 is commented out I get "Some Text" as expected i.e. the local frame works fine. However when I uncomment those lines the second frame (on a server) throws the following error
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吗？
I understand why this is blocked (due to people being able to run JS with malicious intent) but AFAIK background pages are run in an isolated environment so all risk is mitigated anyway? Is there any way to circumvent the Same-Origin policy or do what I am trying to achieve in another way? Possibly with a content script and a 1x1 iframe on the user page?
推荐答案
似乎没有办法绕过同一个 - 扩展页面的原始政策。请参见 https://bugs.chromium.org/p/chromium/issues/详细信息？id = 344341 。
There seems to be no way to circumvent the Same-origin policy for extension pages. See https://bugs.chromium.org/p/chromium/issues/detail?id=344341.
您可以通过注入内容脚本放入您的背景页面上的iframe，并使用内容脚本访问和操作iframe DOM。
You can achieve your objective by injecting a content script into the iframe on your background page and accessing and manipulating the iframe DOM using the content script.
一个简单的例子：
将以下内容添加到 manifest.json ：
"content_scripts": [
{
"matches": ["http://www.myserver.com/iframe/CO-TEST-FRAME.html"],
"js": ["contentScript.js"],
"all_frames": true
}
contentScript.js：
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 事件。
Note that there is no window.onload in the content script. Content scripts are injected after the DOM has loaded be default, so the window.onload event would not trigger.
如果需要在后台页面和内容脚本之间进行一些通信，则需要使用消息传递。在SO上有很多与此相关的问题。
In case some communcation between the background page and the content script is needed, you will need to employ message passing. There are many questions related to that on SO.
这篇关于Cross Origin Chrome扩展程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
