Я работаю над расширением Chrome, которое должно собирать данные формы с веб-страницы, и это iframe. Проблема в том, что не все данные формы сразу доступны в iframe, но они появляются только при запуске скрипта. По какой-то причине я не могу вызвать сценарий и не могу понять, почему. Страницы находятся на одном сайте.
Я попытаюсь продемонстрировать ситуацию с помощью следующих фрагментов кода. Там скрипт на странице iframe просто меняет содержимое поля формы.
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>
Поле формы на этой странице легко доступно из расширения.
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>
Нажатие кнопок изменяет значение поля формы. Однако я не могу запустить скрипт из расширения, и это проблема.
манифест. 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" }
}
всплывающее окно. 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>
Всплывающая страница расширения с полями для заполнения собранными данными.
popup. 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;
});
});
};
Сценарий запускается после открытия всплывающего окна.
content. 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 собрано нормально, как и val2. Но затем сценарий не запускается, и val3 не может быть достигнут, и все это терпит неудачу. Когда я ввожу эти строки в журнал консоли, они работают нормально.
Могу поспорить, что это должно быть возможно, и где-то есть небольшая проблема, которую я просто не знаю, не вижу и не понимаю. Пожалуйста, укажите это для меня. Большое спасибо!