项目需要做一个Chrome插件：功能调用服务获取到数据源，并填充到页面；

数据源已成功获取到，问题出在怎么填充到页面上？

mainfest.json：

{
"manifest_version": 2,
"name": "Demo",
"version": "0.0.1",
"permissions": ["<all_urls>"],
"browser_action": {
"default_icon": "test.png",
"default_popup": "popup.html"
},
"background":{"page":"background.html"},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery-1.7.2.min.js","background.js"],
"run_at": "document_start",
"match_about_blank":true,
"all_frames": true
}
]
}

background.js：

var html = '';
$.ajax({
type: "POST",
url: "http://localhost:5566/Service1.svc/GetTestList",
dataType: "json",
contenttype: "text/json; charset=utf-8",
async: false,
success: function (data) {
$.each(data, function (n, val) {
html += '<tr>'
+ '<td>' + (n + 1) + '</td>'
+ '<td>' + val.poq + '</td>'
+ '<td>' + val.pow + '</td>'
+ '<td>' + val.pox + '</td>';
});
},
error: function (xhr, text, msg) {
alert(text);
}
});

alert(document.getElementById('data'));
$("#data").html(html);

test.html：

<table class="tabcontent" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>
序号
</th>
<th>
项目一
</th>
<th>
项目二
</th>
<th>
项目三
</th>
</tr>
</thead>
<tbody id="data">
</tbody>
</table>

通过插件掉服务取到数据源填充到test.html页面中去；

问题：标红的两句js 始终获取不到test页面中的 table 元素 ；

难道写的方式不对，第一次做插件，看文档自己写写的。哪位大神做过这样的东西，求指教！！！