Расширение Chrome не внедряет Javascript в iframe

У меня есть contentscript, который, по сути, делает console.log, чтобы указать, что он был внедрен на страницу, а в моем manifest.json для all_frames установлено значение true.

В результате, если я перехожу на http://www.reddit.com/r/videos Я вижу сообщение для каждого кадра, и если я нажму на видео, я также увижу сообщение, исходящее от скрипта, внедренного в iframe видео. Это указывает мне на то, что если страница будет динамически изменена для включения iframe, в нее будет внедрен контент-скрипт.

Когда я перехожу на http://www.html5video.org, я получаю сообщение только из одного кадра, но если Я смотрю на DOM и вижу, что для видео есть iframe, поэтому я ожидаю, что мой контент будет внедрен в него, но это не так.

Моя конечная цель - получить селектор для видео на странице, и я ожидаю, что смогу сделать это, внедрив код, который ищет его, в iframe.

Помощь приветствуется.


person Jared Sohn    schedule 26.02.2012    source источник


Ответы (1)


Я подозреваю, что Chrome вставит ваши сценарии контента в IFRAME, который является частью исходного источника страницы, как в случае с примером reddit.com — IFRAME являются частью исходной страницы, поэтому Chrome может и будет внедрять в них. Для ссылки html5video IFRAME не является частью исходного кода. Однако, если вы проверите элементы, вы увидите IFRAME, который подсказывает мне, что IFRAME был динамически загружен в DOM. Я вижу такое же поведение с расширением, которое я написал, поэтому оно кажется последовательным.

Если вам нужно внедрить в IFRAME, возможно, вы можете перехватить событие создания DOM и выполнить требуемое действие:

document.addEventListener('DOMNodeInserted', onNodeInserted, false);

ОБНОВИТЬ:

Как насчет этого для http://html5video.org/ — используя следующий код content_script, я могу получить IFRAME, а затем тег ВИДЕО. Примечание. Этот подход/концепция также должен хорошо работать и для Reddit.

content_script.js

console.log("content script for: " + document.title);

var timer;

document.addEventListener('DOMNodeInserted', onNodeInserted, false);

function onNodeInserted(e)
{
    if(timer) clearTimeout(timer);
    timer = setTimeout("doSomething()", 250);
}

function doSomething()
{
    $media = $(".mwEmbedKalturaIframe");
    console.log($media);
    $video = $media.contents().find("video");
    console.log($video);
}

manifest.json

{
  // Required
  "name": "Foo Extension",
  "version": "0.0.1",

  // Recommended
  "description": "A plain text description",
  "icons": { "48": "foo.png" },
  //"default_locale": "en",

  // Pick one (or none)
  "browser_action": {
    "default_icon": "Foo.png", // optional
    "default_title": "Foo Extension"      // optional; shown in tooltip
    },

  "permissions": [ "http://*/", "https://*/", "tabs" ],

  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["jquery-1.7.1.min.js", "content_script.js" ],
      "run_at": "document_idle",
      "all_frames": true
    }
    ]
}

См. также: jQuery/JavaScript: доступ к содержимому iframe

person RidingTheRails    schedule 27.02.2012
comment
Единственный IFRAME, присутствующий в примере Reddit до нажатия, предназначен для рекламы. IFRAME для каждого элемента мультимедиа создается динамически, когда вы нажимаете кнопку «воспроизвести видео»; Я не вижу разницы. Я не думаю, что добавление прослушивателя событий сработает, потому что мне нужно получить доступ к содержимому внутри IFRAME, что, я думаю, я могу сделать, только внедрив внутри него contentscript. (Я полагаю, что видел отчет об ошибке на crbug, в котором говорится, что вы не можете видеть содержимое IFRAMES на странице от родителя в сценарии содержимого.) - person Jared Sohn; 27.02.2012
comment
Кроме того, мой контент-скрипт открывает соединение порта с фоновой страницей, поэтому у меня есть возможность повторно запустить свой контент-скрипт с помощью команды во всплывающем меню. Простой поиск JQuery для ‹VIDEO› ничего не находит. - person Jared Sohn; 27.02.2012
comment
Извините за задержку; был в отпуске. Ваш код сработал для меня, что убеждает меня в том, что я смогу преобразовать ваш код в общее решение для моего приложения. Также выясните, почему код, который я написал ранее, не работает, а ваш код работает. - person Jared Sohn; 07.04.2012
comment
Обновление: если вы посмотрите на содержимое события мутации DOM, оно на самом деле вызвано виджетом Twitter, а не загрузкой iframe. По сути, причина, по которой мой код работает нормально для reddit.com/r/videos, заключается в том, что iframes предназначены для разных сайтов, поэтому мой контентный скрипт вставляется в него, но на html5video.org он находится на том же сайте, поэтому контентный скрипт не инъецированный. Настоящая проблема заключалась в том, что я искал видео на странице с помощью такого кода: $(document).find(video).each( function(i) { actOnVideo(this); }); когда (продолжение...) - person Jared Sohn; 25.04.2012
comment
когда мне нужно включить вот так: $(document).find(iframe).each(function(i){ $(this).contents().find(video).each( function(j) { actOnVideo(this) });});}); чтобы селектор мог найти экземпляры, в которых тег видео отображается в iframe. Кроме того, мне нужно сделать это рекурсивно, если есть сложенные фреймы. - person Jared Sohn; 25.04.2012
comment
Интересно знать, что событие мутации произошло из виджета твиттера. Похоже, у вас есть хорошее решение, и то, что вы сказали в последнем комментарии, выглядит хорошо. Спасибо, что поделились обновлением. - person RidingTheRails; 25.04.2012
comment
Обновление: я думаю, что мои более ранние рассуждения о том, в какие фреймы вводится контентскрипт, были неверными. Если вы перейдете на gmail.com, вы увидите, что есть три встраивания (загрузчик, звук чата и что-то, связанное с мультимедиа), и каждое из них существует в другом iframe того же домена. На данный момент я замечаю, что мой контент-скрипт вводится в загрузчик и медиа, но не в звук чата. (Хотя, если я перезапускаю расширение после загрузки страницы, оно также вставляет звук в чат.) - person Jared Sohn; 01.06.2012
comment
Я где-то читал, что сценарии содержимого внедряются во все фреймы, кроме тех, у которых нет источника или для которых установлено значение about:blank. Это объясняет, почему он не будет внедряться на html5video.org, но не объясняет, почему у меня возникают проблемы со звуком чата в gmail. В настоящее время я думаю, что проблема может заключаться в том, что iframe звука чата создается динамически (в то время как другие нет), хотя я понимаю, что он по-прежнему будет вставлять сценарии содержимого в эти вкладки (как это происходит на reddit/r/videos .) - person Jared Sohn; 01.06.2012