【问题标题】：chrome extension javascript not workingchrome扩展javascript不起作用
【发布时间】：2014-09-17 12:24:03
【问题描述】：

您好，我正在使用 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> 标签作为输出.... 以下是发生的错误：

**Uncaught TypeError: Cannot read property 'appendChild' of null **

我不明白它到底在说什么...... 请帮助我理解上述错误。

谢谢

【问题讨论】：

几乎是重复的：Why does jQuery or a DOM method such as getElementById not find the element?（或者实际上是重复的——那里的解决方案可以解决您的问题）
@apsillers 是对的。此外，您的代码无法运行，因为无法在 Chrome 扩展程序中加载外部脚本。见CSP。

标签： javascript google-chrome google-chrome-extension

【解决方案1】：

问题：

您的代码的问题是 Google Chrome 扩展程序无法加载外部脚本。如Content Security Policy 所示，出于安全原因（例如，防止中间人攻击），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;

解决方案：

步骤 #1

更改网址以使用“https://”协议。只需将错误代码的第一行替换为

var url = "http://svcs.ebay.com/services/search/FindingService/v1";

步骤 #2

在您的 manifest.json 中，更改/添加 content_security_policy 行以匹配以下内容

"content_security_policy": "script-src 'self' https://svcs.ebay.com; object-src 'self'"

其他问题

这应该已经解决了 Chrome 扩展 CSP 的问题。

您的manifest.json 中也有一个问题，括号未闭合。只需在browser_action 段之后和文件末尾之前插入一个额外的}。

为了让您的脚本能够访问该页面，您需要在您的manifest.json 中注册content_scripts 下的脚本。这将允许脚本与页面的 document 元素进行交互，但将在隔离环境中运行您的脚本，这意味着与页面本身的全局 JavaScript 和您的扩展的交互受到限制。

如果您需要与页面本身的全局 JavaScript 环境进行交互，则必须在您希望与之交互的页面的文档元素中注入带有 <script> 标记的脚本。消息传递可以通过短期或长期请求来完成，您可以在 Google Developer documentation on messaging 中进行探索。只需确保不要使用不安全的evals，并通过某些方式验证您的消息是否真实，例如来源或回调属性。

【讨论】：