そこで私は、クエリの形式でユーザー入力を取り込み、Flickr の API をスクレイピングしてそのクエリに関連する画像を取得し (効果的にクエリを検索して)、それらを配置する Chrome 拡張機能を作成しようとしています。それらの場所をページに表示します。私はチュートリアル サイトからそれを盗みました。その例の拡張機能は、ユーザー入力とリンクなしで上記を実行しました。私はリンクを自分でやろうとしましたが、惨めに失敗したので、ここで助けを求めなければなりませんでした. 今、私はユーザー入力の設定に惨めに失敗しています。私は最初に PHP を試しましたが、どうやら拡張機能では機能しないため、Chrome がクラッシュしました。検索フォームで onsubmit イベントを実行してみましたが、すべてのコードを{}私のonsubmit関数の。残念ながら、JavaScript で変数が宣言される方法が原因で、すべてが関数内にある場合、宣言されたすべての変数がprivateにレンダリングされるため、機能しません。したがって、メインの関数内の他の関数はそれらを使用できず、スクリプトが役に立たなくなります。それに対する理想的な解決策は、関数内でパブリック変数を宣言する方法です。残念ながら、30分検索した後、機能する/理解できる方法が見つかりませんでした。誰か助けてくれませんか？私の予後はすべて間違っていて、その理由を教えてくれたら、私はそうするでしょう-私はこれにまったく慣れていません.
これまでの私のコード:
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";
}
これには、失敗した onsubmit コードがありません。HTML ページ自体は、上記のスクリプトをインポートするタグ、画像の div、およびフォームのみで構成されます。
<div id="images">
</div>
<form name="queryForm" onsubmit="javascript: querySubmit()">
Search: <input type='text' name='query'>
<input type="submit" />
</form>
誰か助けてくれませんか？