CODEWITHSUNDEEP
javascriptgoogle-chrome-extension
Jonathan Coffey
Jonathan Coffey

Reputation: 43

Javascript Chrome extension not showing results

This is my first chrome extension and javascript project thus it remains very basic, essentially is gets contents from xml and displays it in table...I must be overlooking something because no results appear. Any help much appreciated.

  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

   {
 "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"
  },

   }

Popup 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>

Upvotes: 1

Views: 129

Answers (1)

user13500
user13500

Reputation: 3856

Nice idea,

however ;), there are some issues:

1. Correctly named must your state be before retrieving it you can

Testing:

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

We get no results. That is because path and parameters are case-sensitive. In this case, the state abbreviation Az has to be all uppercase: AZ.

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

Though usually if you use cased domain the software in use lower it all.

2. Document write is not the function you are looking for

According to the W3C spec you need to first open() the document. One should also close() it afterwards to tell the browser we are done. Though in most browsers, Chrome included, a document.write opens the document automatically, it is usually best to go with the spec in cases like this.

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

There is one fatal issue with this approach. When you do a document.open, or an indirect one trough document.write, your existing document will be cleared. That is: you loose any existing nodes, and in this case that would be <title> and <style>.

3. Variables declared wants to be

In the showResults_() function there are some variable trouble. More to the point i and x.

i is never declared. Though in this case it will work, it is not good code. If you one day add a "use strict"; to that code it will also fail.

x is never defined. In the for loop you say:

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

that should be birds[i]. This is a bigger problem and would crash the script as is.

4. The path to the birds in the document

To solve this case use methods like:

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

Etc.

I am not going to give a tutorial on how to add elements to DOM. But search the above functions and you will find a lot of information. E.g.

javascript createelement example

You probably want to group the various functions in separate objects. Example one to do the request, one general DOM thing with functions and one utilities.

5. Tips

When developing you can use the extension URL to view the page. (F5 is a bit easier then clicking the tool-bar all the time.).

Look at the extensions page. Your extension should have an ID like:

ID: pcgfaepnbahbcgiiggemmoahksdkfjh

Open this URL:

chrome-extension://pcgfaepnbahbcgiiggemmoahksdkfjh/popup.html

When it comes to parsing the XML it is OK to do it piece by piece as it has a simple structure. But, there is also various ways to translate the XML document to an object if that should be needed. Search for something like XML to Javascript object.

Had a quick peek at the service you are targeting. It has the option of responding my xml or json. In this case you should use json and forget all about xml parsing.

Upvotes: 2

Related Questions