如何从扩展程序在 iframe 中运行脚本？
[英]How to run a script in an iframe from an extension?
问题描述
I'm working on a Chrome extension which is supposed to gather some form data from a webpage and it's iframe.
我正在开发一个 Chrome 扩展程序，它应该从网页和 iframe 收集一些表单数据。 The challenge is that not all form data is immediately available in the iframe, but it appears only when a script is run.挑战在于并非所有表单数据都可以立即在 iframe 中使用，而只有在运行脚本时才会出现。 For some reason I'm not able to call for the script, and I cannot figure out why.出于某种原因，我无法调用脚本，也无法弄清楚原因。 The pages are on the same site.这些页面位于同一站点上。
I'll try to demonstrate the situation with the following pieces of code.我将尝试使用以下代码段来演示这种情况。 There, the script in the iframe page just changes the content of the form field.在那里，iframe 页面中的脚本只是更改表单字段的内容。
index.html (the webpage) index.html（网页）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>INDEX1.HTML</h1>
<iframe id="iframe1" src="index2.html" style="width: 800px; height: 600px; border: 1px solid #aaa"></iframe>
<p><input id="input1" type="text" value="XYZ" /></p>
</body>
</html>
The form field on this page is easily accessed from the extension.此页面上的表单字段可通过扩展轻松访问。
index2.html (the iframe page) index2.html（iframe 页面）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<script>
function changeInput (n) {
if (n == 1) document.getElementById('input2').value = 'ABC';
else document.getElementById('input2').value = '123';
}
</script>
<body>
<h1>INDEX2.HTML</h1>
<p><button onclick="changeInput(1)">ABC</button>
<button onclick="changeInput(2)">123</button></p>
<p><input id="input2" type="text" value="ABC" /></p>
</body>
</html>
Clicking the buttons change the value of the form field.单击按钮可更改表单字段的值。 I cannot start the script from the extension, though, and that's the problem.但是，我无法从扩展程序启动脚本，这就是问题所在。
manifest.json清单文件
{
"name": "Iframe-test",
"version": "1.0",
"manifest_version": 2,
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"],
"all_frames": true
}
],
"browser_action": {
"default_title": "Iframe-test",
"default_popup": "popup.html"
},
"permissions": [ "tabs", "activeTab" ],
"icons": { "16": "icon16.png",
"32": "icon32.png",
"48": "icon48.png",
"128": "icon128.png" }
}
popup.html弹出窗口.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="popup.js"></script>
</head>
<body>
<p><input type="text" id="first" /></p>
<p><input type="text" id="second" /></p>
<p><input type="text" id="third" /></p>
</body>
</html>
The extension popup page with the fields to be filled with the gathered data.扩展弹出页面，其中包含要填充收集到的数据的字段。
popup.js弹出窗口.js
window.onload = function () {
chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id, null, function (response) {
document.getElementById('first').value = response.value1;
document.getElementById('second').value = response.value2;
document.getElementById('third').value = response.value3;
});
});
};
The script ran once the popup is opened.一旦弹出窗口打开，脚本就会运行。
content.js内容.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
val1 = document.getElementById('input1').value;
val2 = document.getElementById('iframe1').contentWindow.document.getElementById('input2').value;
document.getElementById('iframe1').contentWindow.changeInput(2);
val3 = document.getElementById('iframe1').contentWindow.document.getElementById('input2').value;
sendResponse({ value1: val1, value2: val2, value3: val3 });
});
Val1 is gathered fine, as is val2 . Val1收集得很好， val2 。 But then, the script doesn't run, and val3 cannot be reached, and the whole thing fails.但是，脚本没有运行，并且无法访问val3 ，整个过程失败了。 When I enter these lines in the console log, they work OK.当我在控制台日志中输入这些行时，它们工作正常。
I bet this must be possible, and there's just a tiny issue somewhere, which I just don't know, see, or understand.我敢打赌这一定是可能的，只是某处有一个小问题，我只是不知道、看到或理解。 Please point it out for me.请帮我指出来。 Thanks a lot!非常感谢！
1 个解决方案
解决方案1
-1 2020-03-24 14:48:09
CORS stands for Cross-Origin Resource Sharing CORS-- 跨域资源共享
CORS prevents code from access to something of a different origin An origin is the source from where code is running from. CORS 可防止代码访问不同origin的内容origin是运行代码的来源。 For example, the origin of this page is https://stackoverflow.com/questions/60831083/how-to-run-a-script-in-an-iframe-from-an-extension and if I make a request to https://github.com CORS would block it.例如，此页面的来源是https://stackoverflow.com/questions/60831083/how-to-run-a-script-in-an-iframe-from-an-extension并且如果我向https://github.com发出请求https://github.com CORS 会阻止它。
As a solution you can run a version of chrome without CORS and all should run smoothly.作为解决方案，您可以运行一个没有 CORS 的 chrome 版本，并且一切都应该顺利运行。
To run such a version, go into Command Prompt and type "location\\for\\chrome" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp要运行这样的版本，请进入命令提示符并输入"location\\for\\chrome" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.