如何将iframe面板注入Google Chrome扩展程序并在iframe中添加click事件？

Question

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...

Answer 1

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

Eg

$('<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.

Answer 2

如果您可以控制panel.html，只需将处理click事件的js放在panel.html中。