Расширение Chrome: IFrame и прослушивание кликов внутри него - PullRequest
2 голосов
/ 15 декабря 2011

Я хотел бы вставить iframe (frame.html, который является частью моего расширения) в тело веб-сайта, а затем иметь возможность получать события нажатия для двух кнопок внутри него.

Проблемы с той же политикой происхождения и т. Д.

Я уверен, что для этого есть относительно изящный обходной путь, но мне не очень повезло найти его.

1 Ответ

7 голосов
/ 16 декабря 2011

Вы можете использовать события сообщения , чтобы позволить внедренному окну iframe связываться со скриптом содержимого (позаботьтесь о security ).

Вот простой пример. Расширение внедряет элемент IFRAME во все просматриваемые страницы с помощью скрипта содержимого. Рамка содержит страницу с кнопкой. Кнопка имеет обработчик щелчка, который отправляет сообщение в верхнее окно. Сценарий содержимого имеет прослушиватель сообщений, поступающих из iframe, который открывает предупреждение, отображающее данные сообщения.

manifest.json:

{
  "name": "Test",
  "version": "0.0.1",
  "content_scripts": [ {
    "matches": [ "http://*/*", "https://*/*" ],
    "js": [ "content.js" ],
    "run_at" : "document_end"
  } ]
}

content.js:

var iframe = document.createElement("iframe");    
iframe.src = chrome.extension.getURL("iframe.html");
document.body.appendChild(iframe);

addEventListener("message", function(event) {
  if (event.origin + "/" == chrome.extension.getURL(""))
    alert(event.data);
}, false);

iframe.html:

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
</head>
<body>
  <button id="button">Click me!</button>
  <script>
    document.getElementById("button").addEventListener("click", function() {
      top.postMessage("clicked!", "*");
    }, false);
  </script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...