0

Google リーダーで Chrome 拡張機能を作成したいのですが、問題が見つかりました。コンテンツ スクリプトは iframe にアクセスできません。すべての n について、window.frames[n] = 未定義。そして、私はこの "all_frames": true を manifest.json に持っています。または、各記事の下にボタンを追加する方法を誰かが教えてくれます。ありがとうございました！

4

1 に答える 1

1

Google リーダーのレンダリングされた HTML をざっと見てみると、IFRAME にある唯一のボタンは Google Plus +1 ボタンのように見えます。他のすべてのボタンは IFRAME にありません。したがって、IFRAME について心配する必要はありません。

既存のボタンは、各記事の下に表示されるボタン (+1、共有、電子メール、未読のままにする、タグを追加) であると想定しています。

既存の記事ボタンに新しいボタンを追加する場合は、DOM を列挙するだけです。具体的には、「エントリ アクション」DIV クラスを列挙し、要素/ボタンを含む新しい SPAN を各記事に追加します。

Reader が新しい記事で DOM を動的に更新する可能性があるのではないかと思います (確かではありません)。この場合、ボタンを再度追加できるように、DOM に追加される新しい記事を追跡する必要がある場合があります。これを行うには、DOMNodeInserted のイベント リスナーを追加します。

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

アップデート：

「.entry-actions」クラスが表示されないのは、動的に追加されるためです。

これは非常に基本的な動作例です。これは DOM を監視し、".myclass" SPAN ボタンを持たない entry-actions DIV を検出すると、それを追加します。

これを機能させるには、拡張機能に jquery を含める必要があります。この例では jquery-1.7.1.min.js を使用しました。例をカット アンド ペーストする場合は、foo.png というアイコン ファイルも必要になります。

マニフェスト.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>');
}
于 2012-03-10T10:42:33.737 に答える