Question

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

Answer 1

快速查看Google阅读器呈现的HTML，IFRAME中唯一的按钮似乎是Google Plus +1按钮 - 所有其他按钮都不在IFRAME中。所以你不必担心IFRAME。

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

如果你想在现有文章按钮上添加一个新按钮，你需要做的就是枚举DOM - 特别是“entry-actions”DIV类，并附加说明每个文章的元素/按钮的新SPAN。

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

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

更新：

您无法看到“.entry-actions”类的原因是因为它是动态添加的。

这是一个非常基本的工作示例。这将监视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>');
}

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

1 个答案: