[英]chrome extension javascript not working
您好,我正在开发chrome扩展程序,我正在使用ebay搜索API ...以下是我的html代码:
<html>
<head>
<title>eBay Search Results</title>
<style type="text/css">body { font-family: arial,sans-serif;} </style>
<script type="text/javascript" src="j.js"></script>
</head>
<body>
<h1>eBay Search Results</h1>
<div id="results"></div>
</body>
</html>
javascript
function _cb_findItemsByKeywords(root) {
var items = root.findItemsByKeywordsResponse[0].searchResult[0].item || [];
var html = [];
html.push('<table width="100%" border="0" cellspacing="0" cellpadding="3"><tbody>');
for (var i = 0; i < items.length; ++i) {
var item = items[i];
var title = item.title;
var pic = item.galleryURL;
var viewitem = item.viewItemURL;
if (null != title && null != viewitem) {
html.push('<tr><td>' + '<img src="' + pic + '" border="0">' + '</td>' +
'<td><a href="' + viewitem + '" target="_blank">' + title + '</a></td></tr>');
}
}
html.push('</tbody></table>');
document.getElementById("results").innerHTML = html.join("");
} // End _cb_findItemsByKeywords() function
var url = "http://svcs.ebay.com/services/search/FindingService/v1";
url += "?OPERATION-NAME=findItemsByKeywords";
url += "&SERVICE-VERSION=1.0.0";
url += "&SECURITY-APPNAME=myappid";
url += "&GLOBAL-ID=EBAY-US";
url += "&RESPONSE-DATA-FORMAT=JSON";
url += "&callback=_cb_findItemsByKeywords";
url += "&REST-PAYLOAD";
url += "&keywords=harry%20potter";
url += "&paginationInput.entriesPerPage=3";
// Submit the request
s=document.createElement('script'); // create script element
s.src= url;
debugger;
document.body.appendChild(s);
以下是manifest.json文件
{
"manifest_version": 2,
"name": "eBay",
"description": "This extension demonstrates a 'browser action' with ebay products.",
"version": "1.0",
"browser_action": {
"default_icon": "ebayicon.png",
"default_popup": "MySample.html"
}
它给了我刚才的<h1>
标签作为输出...。以下是发生的错误:
**未捕获的TypeError:无法读取null的属性'appendChild'**
我不明白这是什么意思...请帮助我了解上述错误。
谢谢
您的代码存在问题,因为Google Chrome扩展程序无法加载外部脚本。 如内容安全政策中所示,出于安全原因(例如,防止中间人攻击),Chrome会限制可加载哪些脚本扩展。 这是导致您出现问题的代码,因为您正试图从Ebay加载脚本,这是外部脚本,因此不允许这样做:
var url = "http://svcs.ebay.com/services/search/FindingService/v1";
url += "?OPERATION-NAME=findItemsByKeywords";
url += "&SERVICE-VERSION=1.0.0";
url += "&SECURITY-APPNAME=myappid";
url += "&GLOBAL-ID=EBAY-US";
url += "&RESPONSE-DATA-FORMAT=JSON";
url += "&callback=_cb_findItemsByKeywords";
url += "&REST-PAYLOAD";
url += "&keywords=harry%20potter";
url += "&paginationInput.entriesPerPage=3";
// Submit the request
s=document.createElement('script'); // create script element
s.src= url;
更改URL以使用“ https://”协议。 只需将不正确代码的第一行替换为
var url = "http://svcs.ebay.com/services/search/FindingService/v1";
在manifest.json
,更改/添加content_security_policy
行以匹配以下内容
"content_security_policy": "script-src 'self' https://svcs.ebay.com; object-src 'self'"
那应该已经解决了Chrome Extension CSP的问题。
您在manifest.json
也有一个问题,其中的括号没有关闭。 只需在browser_action
段之后和文件末尾之前插入一个额外的}
。
为了使您的脚本能够访问该页面,您需要在manifest.json
content_scripts
下注册该脚本。 这将允许脚本与页面的document
元素进行交互,但是将在隔离的环境中运行脚本,这意味着与页面本身的全局JavaScript和扩展名的交互受到限制。
如果需要与页面本身的全局JavaScript环境进行交互,则必须在要与之交互的页面的document元素中注入<script>
标记的<script>
。 消息传递可以通过短期或长期请求来完成,您可以在Google Developers文档中探讨消息传递 。 只要确保不要使用不安全的eval
,并通过某种方式(例如origin或callback属性)来验证您的消息是真实的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.