Chrome ext：appendChildTypeError：嘗試生成覆蓋div時無法調用null的方法'appendChild'

Question

我嘗試構建來自Chrome擴展的簡單覆蓋div，其工作時間大部分時間爲 但我注意到少數網站喜歡：http://en.wikipedia.org/wiki/Main_Page 即時嘗試添加div時出現此錯誤。

這是我的代碼： contenet.js：

var s = document.createElement('script'); 
s.src = chrome.extension.getURL('script_inpage.js'); 
s.onload = function() { 
    s.parentNode.removeChild(s); 
}; 

try{ 
console.log("appendChild START"); 
    (document.head||document.documentElement||document.body).appendChild(s); 
console.log("appendChild DONE"); 
}catch(e){ 
    console.log("exception in appendChild"); 
} 

script_inpage.js

try{ 
    var buttonnode= document.createElement('input'); 
    buttonnode.setAttribute('type','button'); 
    buttonnode.setAttribute('id','test_btn'); 
    buttonnode.setAttribute('value','Test!'); 


    var div_bottom = document.createElement("div"); 
    div_bottom.id = "div_bottom"; 
    div_bottom.style.width = "300px"; 
    div_bottom.style.height = "20px"; 
    div_bottom.style.background = "#999"; 
    div_bottom.style.position="fixed"; 
    div_bottom.style.bottom="0"; 
    div_bottom.style.right="0"; 
    div_bottom.style.zIndex="9999" 
    div_bottom.innerHTML = "Hello from div"; 
    div_bottom.appendChild(buttonnode); 
    document.body.appendChild(div_bottom); 
} 
catch(e){ 
    console.log("script in page exception in appendChild"+e); 
    alert(e); 
} 

manifist.json

{ 
    "background": { 
     "page": "background.html" 
    }, 
    "content_scripts": [ 
    { 
     "matches": ["<all_urls>"],  
     "js": ["contentscript.js"], 
     "run_at": "document_end", 
     "all_frames": true 
    } 
    ], 
    "web_accessible_resources": [ 
    "script_inpage.js" 
    ], 
    "browser_action": { 
     "default_icon": "icon19.png", 
     "default_popup": "popup.html", 
     "default_title": "Simple test" 
    }, 
    "content_security_policy": "script-src 'self'; media-src *; object-src 'self'", 
    "description": "Simple test.", 
    "icons": { 
     "128": "icon128.png", 
     "16": "icon16.png", 
     "32": "icon32.png", 
     "48": "icon48.png" 
    }, 

    "manifest_version": 2, 
    "minimum_chrome_version": "20", 
    "name": "Simple test", 
    "permissions": [ 
     "unlimitedStorage", 
     "http://*/", 
     "<all_urls>", 
     "tabs" 
    ], 

    "version": "2.6" 
} 

Answer 1

正確對我的作品與http://en.wikipedia.org/wiki/Main_Page與下面的代碼

的manifest.json

{ 

    "content_scripts": [ 
    { 
     "matches": ["<all_urls>"],  
     "js": ["content.js"], 
     "run_at": "document_end", 
     "all_frames": true 
    } 
    ], 
    "web_accessible_resources": [ 
    "scripts.js" 
    ], 
    "browser_action": { 
     "default_title": "Simple test" 
    }, 
    "content_security_policy": "script-src 'self'; media-src *; object-src 'self'", 
    "description": "Simple test.", 


    "manifest_version": 2, 
    "minimum_chrome_version": "20", 
    "name": "Simple test", 
    "permissions": [ 
     "unlimitedStorage", 
     "http://*/", 
     "<all_urls>", 
     "tabs" 
    ], 

    "version": "2.6" 
} 

scripts.js中

try{ 
    var buttonnode= document.createElement('input'); 
    buttonnode.setAttribute('type','button'); 
    buttonnode.setAttribute('id','test_btn'); 
    buttonnode.setAttribute('value','Test!'); 


    var div_bottom = document.createElement("div"); 
    div_bottom.id = "div_bottom"; 
    div_bottom.style.width = "300px"; 
    div_bottom.style.height = "20px"; 
    div_bottom.style.background = "#999"; 
    div_bottom.style.position="fixed"; 
    div_bottom.style.bottom="0"; 
    div_bottom.style.right="0"; 
    div_bottom.style.zIndex="9999" 
    div_bottom.innerHTML = "Hello from div"; 
    div_bottom.appendChild(buttonnode); 
    document.body.appendChild(div_bottom); 
} 
catch(e){ 
    console.log("script in page exception in appendChild"+e); 
    alert(e); 
} 

content.js

var s = document.createElement('script'); 
s.src = chrome.extension.getURL('scripts.js'); 
s.onload = function() { 
    s.parentNode.removeChild(s); 
}; 

try{ 
console.log("appendChild START"); 
    (document.head||document.documentElement||document.body).appendChild(s); 
console.log("appendChild DONE"); 
}catch(e){ 
    console.log("exception in appendChild"); 
}