首页 新闻 搜索 专区 学院

Chrome 插件获取数据并填充页面

0
悬赏园豆:10 [已解决问题] 解决于 2014-09-30 10:26

项目需要做一个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 元素 ;

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

问题补充:

chrome.tabs.executeScript(null,
{ code: "document.getElementById('data').innerHTML='" + html + "'" });

这句代码的话 自己机器上确实可以,插件打包好后在别的机器上也是可以获取到数据,数据填充不了

Xxgao的主页 Xxgao | 初学一级 | 园豆:170
提问于:2014-09-30 09:31
< >
分享
最佳答案
0

恕我理解力略差,你是在A页面获取到数据,然后填充到指定的·B页面里的容器中?还是就填充到当前页面的容器里呢?

如果是当前页面的容器。可以这样。

$('#table).append(html); 

或者$(html).apendtto($('#table'));

如果不在一个页面的话,我还真不知道怎么填充过去。

收获园豆:10
贫民窟大侠 | 老鸟四级 |园豆:4272 | 2014-09-30 09:41

额,重点这是一个插件,调用服务获取数据,填充都是写在插件里面的,打包成crx后,加载这个插件,打开特定页面,本身页面是没有任何数据的,数据来自于插件填充到页面的?明白了没?

Xxgao | 园豆:170 (初学一级) | 2014-09-30 09:45

@Xxgao.: 

额。了解,那把调用插件填充的代码放到页面底部,或者你的table就在插件里 去构造阿。这样就不会出现找不到的问题了!有可能是你插件先于页面。渲染的时候你的dom都没完成,肯定找不到table阿。

1.把js插件放在页面底部,

2.把table也在插件里去定义。

贫民窟大侠 | 园豆:4272 (老鸟四级) | 2014-09-30 09:48

@别怕,我来了.:  哈哈哈 看了下文档,自己又坑了 ;run_at属性 配错了 应该是document_end,我配成了document_start 

Xxgao | 园豆:170 (初学一级) | 2014-09-30 10:25

@Xxgao.: 嗯嗯。

贫民窟大侠 | 园豆:4272 (老鸟四级) | 2014-09-30 10:47
其他回答(1)
0

给要添加json的地方加一个id 或者加一对span标记绑定id 然后通过id来传值

经年 | 园豆:59 (初学一级) | 2014-09-30 09:34
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册