Home/ Questions/Q 8010435
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T18:44:05+00:00

So I’m trying to make a Chrome extension that takes in user input in

  • 0

So I’m trying to make a Chrome extension that takes in user input in the form of a query, scrapes Flickr’s API for images related to that query (effectively searching it for the query), and then places them, as well as links to their locations, onto the page. I stole it from a tutorial site, whose example extension did the above without the user input and the links. I tried to do the links myself, which I failed miserably at, and so had to get help here. Now, I’m failing miserably at setting up the user input. I first tried PHP, which crashed my chrome since it apparently doesn’t work in extensions, so now I’m trying to go JS all the way. I tried doing an onsubmit event for my search form, and then I realised I have to have all my code in the {} of my onsubmit function. Unfortunately, due to the way variables are declared in JavaScript, it doesn’t work since if everything is inside a function, then all the variables declared are rendered private. Therefore, other functions inside the main one are unable to use them, rendering the script useless. The ideal solution to that would be a way to declare public variables inside a function, unfortunately after searching for half an hour I couldn’t find any ways that work/I understand. Can someone please help me? I’ll be perfectly happy with any other method, as I will be if you tell me that all my prognosis is wrong and why – I’m quite a noob at this.

My code so far:

var req = new XMLHttpRequest();
req.open(
"GET",
"http://api.flickr.com/services/rest/?" +
    "method=flickr.photos.search&" +
    "api_key=90485e931f687a9b9c2a66bf58a3861a&" +
    "text=cake&" +
    "safe_search=1&" +  
    "content_type=1&" +  
    "sort=relevance&" +  
    "per_page=24",
true);
req.onload = showPhotos;
req.send(null);


function showPhotos() {
  var photos = req.responseXML.getElementsByTagName("photo");

  for (var i = 0, photo; photo = photos[i]; i++) {
    var photos = req.responseXML.getElementsByTagName("photo");
    var a = document.createElement("a");
    a.setAttribute("href",constructImageURL(photo));
    a.setAttribute("target","_blank");

    var img = document.createElement("img");
    img.setAttribute("src",constructImageURL(photo));

    a.appendChild(img);
    document.getElementById("images").appendChild(a);
  }
}

function constructImageURL(photo) {
  return "http://farm" + photo.getAttribute("farm") +
  ".static.flickr.com/" + photo.getAttribute("server") +
  "/" + photo.getAttribute("id") +
  "_" + photo.getAttribute("secret") +
  "_s.jpg";
}

This is without my failed onsubmit code. The HTML page itself only consists of a tag importing the above script, a div for the images and a form:

<div id="images">
</div>
<form name="queryForm" onsubmit="javascript: querySubmit()">
Search: <input type='text' name='query'>
<input type="submit" />
</form>

Can someone help please?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is why I hate jQuery.. see my HTML 5 form examples …

    http://netjs.codeplex.com/SourceControl/changeset/view/91818#1775033

    http://netjs.codeplex.com/SourceControl/changeset/view/91818#1775035

    You need to add an event to the form e.g.

    myform.addEvent('submit', myFunction);

    Then from there handle what you need to do…

    Granted jQuery has little to to with this and its more likley because you don;t understand javascript which jQuery facilitates because it turns everything into DOM like shit.
    You are just using bad practices and you need to de-couple your logic into various functions for maintain-ability.

    • 0