Chrome ext：appendChildTypeError：尝试构建重叠div时，无法调用null的方法'appendChild'

Question

我尝试构建简单的叠加div，它来自chrome扩展，它大部分时间都在工作 但我注意到这几个网站是：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");
}