how to inject an iframe panel to a Google Chrome extension and add click event inside the iframe?

问题

I did an extension that inject iframe to the current webpage, using Content-scripts:

$('body').append('<iframe src="' + chrome.extension.getURL('panel.html') + '" frameborder="0" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; z-index: 2147483647; position: fixed; width: 100%; left: 0px; bottom: 0px; height: 100px; display: block; visibility: visible; outline-style: none; outline-width: 0px; outline-color: rgb(0, 0, 0); " id="GE_Panel"></iframe>');

I can view the iframe in the webpage, but I don't know how to add click event for an element, that inside the iframe...

回答1:

You have to wait until the iframe has loaded and then access the elements inside of it:

E.g.

$('<iframe ... />').load(function() {
    var doc = $(this).contents();
    doc.find('#yourLink').click(...);
}).appendTo('body');

Reference: .contents

Not sure how Chrome handles this for extensions, but it could be that you will have a same-origin policy problem.

回答2:

If you can control panel.html, just put the js that handles click event in panel.html.

来源：https://stackoverflow.com/questions/4669089/how-to-inject-an-iframe-panel-to-a-google-chrome-extension-and-add-click-event-i