Question

这是我的第一个chrome扩展和javascript项目因此它仍然是非常基本的，本质上是从xml获取内容并将其显示在表中...我必须忽略一些因为没有结果出现。任何帮助非常感谢。

  var STATE = 'Az';

  var ebirdGenerator = {
  searchOnEbird_: 'http://ebird.org/ws1.1/data/obs/region/recent?' +
  'rtype=subnational1&' +
  'r=US-' + encodeURIComponent(STATE) + '&' +
  'back=5&' +
  'maxResults=5&' +
  'locale=en_US&' +
  'fmt=xml',

 requestBirds: function() {
   var req = new XMLHttpRequest();
   req.open("GET", this.searchOnEbird_, true);
   req.onload = this.showResults_.bind(this);
   req.send(null);
},

 showResults_: function (e) {
    document.write("<table border='1'>");
    var birds = e.target.responseXML.querySelectorAll('sighting');
    for (i = 0; i < birds.length; i++)  { 
      document.write("<tr><td>");
      document.write(x[i].getElementsByTagName("com-name")[0].childNodes[0].nodeValue);
      document.write("</td><td>");
      document.write(x[i].getElementsByTagName("how-many")[0].childNodes[0].nodeValue);
      document.write("</td></tr>");
      }
    document.write("</table>");

},

document.addEventListener('DOMContentLoaded', function () {
    ebirdGenerator.requestBirds();

清单

   {
 "manifest_version": 2,

  "name": "Hotspot Birding Ebird Alert",
  "description": "Get rare ABA rare bird alerts right on your desktop day or night.",
  "version": "1.0",

"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
  },

   }

弹出式HTML

<!doctype html>
 <html>
  <head>
 <title>Hotspot Birding ebird Rare Bird Alert</title>
 <style>
   body {
    min-width: 357px;
    overflow-x: hidden;
  }

  img {
    margin: 5px;
    border: 2px solid black;
    vertical-align: middle;
    width: 75px;
    height: 75px;
  }
</style>

<!--
  - JavaScript and HTML must be in separate files: see our Content Security
  - Policy documentation[1] for details and explanation.
  -
  - [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html
 -->
<script src="popup.js"></script>
</head>
<body>
</body>
</html>

Answer 1

好主意，

然而;），有一些问题：

1。在检索之前，您的州必须正确命名

测试：

http://ebird.org/ws1.1/data/obs/region/recent?rtype=subnational1&r=US-Az&back=5&maxResults=5&locale=en_US&fmt=xml

我们没有结果。这是因为路径和参数区分大小写。在这种情况下，州缩写Az必须全部为大写：AZ。

ebird.org/ws1.1/data/obs/region/recent ...
|_______|_____________________________ ...
    |                     |
    |                     +----------------- Case sensitive
    +--------------------------------------- Case insensitive

虽然通常如果您使用套管域，使用的软件会降低所有内容。

2。文档写入不是您正在寻找的功能

根据W3C spec您需要首先open()该文档。之后还应该close()告诉浏览器我们已经完成了。虽然在大多数浏览器中都包含Chrome，document.write会自动打开文档，但在这种情况下通常最好使用规范。

document.open();
document.write("Hello");
document.close();

这种方法存在一个致命的问题。当您执行document.open或间接的一个document.write时，您的现有文档将被清除。也就是说：您丢失了任何现有节点，在这种情况下，它将是<title>和<style>。

3。声明的变量想要

在showResults_()函数中存在一些变量问题。更重要的是i和x。

永远不会声明

i。虽然在这种情况下它可以工作，但它不是很好的代码。如果您有一天在该代码中添加"use strict";，它也会失败。

永远不会定义

x。在for循环中，您说：

document.write(x[i]....

应为birds[i]。这是一个更大的问题，会使脚本崩溃。

4。文件中鸟类的路径

要解决此案例，请使用以下方法：

document.getElementById()
document.createElement()
.appendChild()

等

我不打算提供有关如何向DOM添加元素的教程。但搜索上述功能，你会发现很多信息。 E.g。

javascript createelement example

您可能希望将各种功能分组到不同的对象中。示例一，用于执行请求，一个带有函数和一个实用程序的通用DOM。

5。提示

开发时，您可以使用扩展程序URL查看页面。（ F5 比点击工具栏要容易一些。）。

查看扩展页面。您的扩展程序应具有以下ID：

ID: pcgfaepnbahbcgiiggemmoahksdkfjh

打开此网址：

chrome-extension://pcgfaepnbahbcgiiggemmoahksdkfjh/popup.html

在解析XML时，可以一步一步地完成它，因为它具有简单的结构。但是，如果需要，还有各种方法将XML文档转换为对象。搜索 XML到Javascript对象等内容。

快速浏览一下您所定位的服务。它可以选择回复我的xml或json。在这种情况下，您应该使用json并忘记所有关于xml解析的内容。

Javascript Chrome扩展程序未显示结果

1 个答案:

1。在检索之前，您的州必须正确命名

2。文档写入不是您正在寻找的功能

3。声明的变量想要

4。文件中鸟类的路径

5。提示