Расширение Chrome: IFrame и прослушивание кликов внутри него

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

Запуск проблем с той же политики происхождения и т.д.

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

источник

2011-12-14 NoPyGod

Вы уверены, что вам нужно использовать IFRAME? Если это не совсем необходимо, вы можете избежать таких головных болей, просто вставив свой html прямо на веб-сайт. – lakenen

На веб-сайте есть много пользовательских CSS, которые заворачивают тонкий макет контента, который я пытаюсь вставить. И даже если я смогу заставить его выглядеть нормально сейчас, нет никакой гарантии, что css веб-сайта не изменится и снова испортит его. Не увлекаться игрой в кошки-мышки. – NoPyGod

Честно говоря, я уверен, что это невозможно. Вы можете подумать о том, чтобы использовать css «catch-all», который в основном удаляет все возможные стили из всех ваших элементов. Я знаю, это кажется взломанным (и утомительным), но это может быть ваш единственный вариант в этом случае. – lakenen

Вы можете использовать message events, чтобы проинформированное окно 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>

источник

2011-12-15 20:22:27

Выглядит отлично, скоро это попробует. – NoPyGod

Расширение Chrome: IFrame и прослушивание кликов внутри него

ответ

Смежные вопросы