javascript - Chrome ext：appendChildTypeError：尝试构建覆盖 div 时无法调用 null 方法“appendChild”

Question

我尝试构建来自 chrome 扩展的简单覆盖 div，它大部分时间都在工作，但我注意到很少有网站像：http ://en.wikipedia.org/wiki/Main_Page 我在尝试添加时遇到此错误分区。

这是我的代码：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);
} 

清单文件.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为我正确工作， 代码如下

清单.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"
}

脚本.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);
} 

内容.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");
}