javascript - Button is not added to the specific web page in mozilla extension

Question

I cannot figure out how to add a button, in mozilla extension.

function checkForValidUrl(tabId, changeInfo, tab) {
    if(changeInfo.status == 'complete') {
        var btn = document.createElement("BUTTON")
        var t = document.createTextNode("CLICK ME");
        btn.appendChild(t);
        //Appending to DOM 
        document.body.appendChild(btn);
               document.body.insertBefore(button, document.body.firstChild); 
        alert("sucess");
    }
chrome.tabs.onUpdated.addListener(checkForValidUrl);

i don't know what to do with .xul file

Answer 1

只有内容脚本可以访问页面的 DOM。所以，你应该把这段代码移到那里。

编辑：也去掉onUpdate事件的监听，直接调用函数。内容脚本在每次刷新时运行。

function checkForValidUrl(tabId, changeInfo, tab) {
        var btn = document.createElement("BUTTON")
        var t = document.createTextNode("CLICK ME");
        btn.appendChild(t);
        //Appending to DOM 
        document.body.appendChild(btn);
        alert("suceeded");
}
checkForValidUrl();

要定位元素，只需使用：

btn.setAttribute("style", "position: absolute; top: 20px; left: 20px");