Question

我目前正在使用Google Chrome开发工具栏。基本上它是一个工具栏，我通过使用Content-Script注入每个网页。从技术上讲，工具栏由iframe构成，其中包含所有组件，如button，dropMenu，...这是您制作此脚本的脚本：

// Take down the webPage

document.getElementsByTagName('body')[0].style.marginTop = '39px';

var body = $('body'),
toolbarURL = chrome.extension.getURL("yourtoolbar.html"),
iframe = $('<iframe id="YourToolbarFrame" scrolling="no" src="'+toolbarURL+'">');

// Insertion
body.append(iframe);    

// Effect
$("#YourToolbarFrame").hide().fadeIn(800);

但是现在我正在尝试在这个iframe上添加一些组件，例如按钮，但它不起作用......

var yt = $("#YourToolbarFrame");
var newButton = $('<a href="javascript:openInstantMessage()"><input type="image" src="images/pop.ico" name="InstantMessage" width="23" height="23"></a>');
yt.append(newButton);

iframe的主体看起来像这样：

<body>          
    <div class="default">
         // COMPONENTS
    </div>
</body>

希望有人能给我一些帮助！：）

Answer 1

你必须等到iframe加载。 E.g：

iframe.load(function() {  
    var newButton = ...;  
    $(this).contents().find('body').append(newButton);
}).appendTo('body');

不确定Chrome如何处理内容脚本的同源策略。

Answer 2

由于你正在使用jQuery，你可以尝试使用

$('#YourToolbarFrame').contents().find('body').append(newButton);

或者，如果您不想直接附加到正文，请使用find()语句中的任何其他元素。

在注入的iframe上添加HTML

2 个答案: