CODEWITHSUNDEEP
iframegoogle-chrome-extensioncontent-script
user1070827
user1070827

Reputation: 123

chrome extension content script can not access to iframes

i want to make a chrome extension on google reader and i found a problem. content script can not access to iframes. For all n, window.frames[n] = undefined. And i have this "all_frames": true in manifest.json. Or someone could tell me how to add a button under each article. Thank you!

Upvotes: 0

Views: 744

Answers (1)

RidingTheRails
RidingTheRails

Reputation: 1105

From taking a quick look at Google Reader's rendered HTML, the only button that is in an IFRAME appears to be the Google Plus +1 button - all the other buttons are not in an IFRAME. So you don't need to worry about the IFRAME.

I'm assuming that the existing buttons are the buttons that appear underneath each article: +1, Share, Email, Keep Unread, Add Tags.

If you want to add a new button to the existing article buttons all you need to do is enumerate the DOM - specifically the "entry-actions" DIV classes and append say a new SPAN with your element/button to each article.

I suspect (but not sure) that Reader may dynamically update the DOM with new articles. If this is the case you may need to track new articles being added to the DOM so you can add your button again. To do this add an event listener for DOMNodeInserted - e.g.

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

UPDATE:

The reason you can't see ".entry-actions" class is because it is added dynamically.

Here is a working very basic example. This will monitor the DOM and when it sees an entry-actions DIV that doesn't have our ".myclass" SPAN button, will add it.

You need to have jquery included in your extension for this to work. I've used jquery-1.7.1.min.js in this example. You will also need an icon file called foo.png too if you cut and paste the example.

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>');
}

Upvotes: 1

Related Questions