铬扩展内容脚本无法访问iframe

Question

我想在google reader上做一个chrome扩展，我发现一个问题。内容脚本无法访问iframe。对于所有n，window.frames [n] =未定义。我有这个“all_frames”：在manifest.json中是true。或者有人可以告诉我如何在每篇文章下添加一个按钮。谢谢！

Answer 1

通过快速浏览Google Reader的呈现HTML，IFRAME中唯一的按钮看起来就是Google Plus +1按钮 - 所有其他按钮都不在IFRAME中。所以你不需要担心IFRAME。

我假设现有的按钮是出现在每篇文章下面的按钮：+1，共享，电子邮件，保持未读，添加标签。

如果你想添加一个新的按钮到现有的文章按钮，所有你需要做的就是枚举DOM - 特别是“入门动作”DIV类，并附加说一个新的SPAN元素/按钮到每篇文章。

我怀疑（但不确定）Reader是否可以用新文章动态更新DOM。如果是这种情况，您可能需要跟踪添加到DOM中的新文章，以便您可以再次添加按钮。为此，请为DOMNodeInserted添加一个事件侦听器 - 例如

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

UPDATE：

你看不到 “.entry-行动” 级，是因为它是动态增加的原因。

这是一个非常基本的例子。这将监视DOM，并且当它看到没有我们的“.myclass”SPAN按钮的输入操作DIV时，将添加它。

您需要在您的扩展中包含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>'); 
}