Хром расширение содержимого сценарий не может получить доступ к iframes

Question

Я хочу сделать chrome расширение на Google Reader, и я нашел проблему. сценарий содержимого не может получить доступ к iframes. Для всех n, window.frames [n] = undefined. И у меня есть это «all_frames»: true в manifest.json. Или кто-то может сказать мне, как добавить кнопку под каждую статью. Спасибо!

Answer 1

С помощью быстрого просмотра HTML-рендеринга Google Reader единственной кнопкой, которая находится в IFRAME, является кнопка Google Plus +1 - все остальные кнопки не находятся в IFRAME. Поэтому вам не нужно беспокоиться о IFRAME.

Я предполагаю, что существующие кнопки - это кнопки, которые появляются под каждой статьей: +1, Share, Email, Keep Unread, Добавить теги.

Если вы хотите добавить новую кнопку к существующим кнопкам, все, что вам нужно сделать, это перечислить DOM - в частности, классы DIV «вход-действия» и добавить новый SPAN с помощью элемента/кнопки для каждой статьи ,

Я подозреваю (но не уверен), что Reader может динамически обновлять DOM новыми статьями. Если это так, вам может потребоваться отслеживать новые статьи, добавляемые в DOM, чтобы вы могли снова добавить свою кнопку. Для этого добавьте прослушиватель событий для DOMNodeInserted - например.

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

UPDATE:

Причина вы не можете увидеть ".entry-акции" класс, потому что он будет добавлен динамически.

Настоящий рабочий пример очень простой. Это будет контролировать DOM, и когда он увидит DIV-действия для входа, у которого нет нашей кнопки «.myclass» SPAN, добавит ее.

Для этого вам необходимо включить jQuery в расширение. Я использовал jquery-1.7.1.min.js в этом примере. Вам также понадобится файл значков с именем foo.png, если вы вырезаете и вставляете пример.

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" 
    } 
    ] 
} 

content_script.js

var timer; 

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

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

function addButtons() 
{ 
    console.log('add buttons'); 
    var $actions = $(".entry-actions").filter(function() { 
     return $(this).find('.myclass').length === 0; 
    }); 
    $actions.append('<span class="myclass"><a href="javascript:alert(\'hey! Im a foo extension injected button!\');return false;">My button</a></span>'); 
}