0

ここで2つの質問をした後、ついにChromeの拡張機能を完成させました。チュートリアルサイトの例に基づいて個人的に使用するために作成しています。私のバージョンの目的は、ユーザーからのクエリ入力を取得し、FlickrのAPIにアクセスして、そのクエリを検索して24枚の画像を返すことです。私はそのページをページとして開いたのですが、それは完璧に機能します。しかし、拡張機能として開こうとすると、ユーザーが何を入力しても、クエリ用語は変更されません。したがって、一部のコードがChrome拡張機能でサポートされていないか、ひどく間違ったことをしているという結論に達しました。前者が正しければ、拡張機能で使用できるものと使用できないものを指定してください（または答えがある場所にリンクしてください）。注：はい、サーバー側の言語が完全に機能しないことは知っています。ただし、愚かなことをしているのは私です。教えてください。可能であれば、これを修正するために手を貸してください。提供された助けを事前に感謝します。コードは以下のとおりです。

JS（popup.js）：

var q = "cake"; //Default search term
var req;
function querySubmit() {
oForm = document.forms["queryForm"];
oText = oForm.elements["query"];
q = oText.value
document.getElementById("images").innerHTML = "";
req.open(
"GET",
"http://api.flickr.com/services/rest/?" +
    "method=flickr.photos.search&" +
    "api_key=90485e931f687a9b9c2a66bf58a3861a&" +
    "text=" + q + "&" +
    "safe_search=1&" +  
    "content_type=1&" +  
    "sort=relevance&" +  
    "per_page=24",
true);
req.onload = showPhotos;
req.send(null);}

var req = new XMLHttpRequest();
req.open(
"GET",
"http://api.flickr.com/services/rest/?" +
    "method=flickr.photos.search&" +
    "api_key=90485e931f687a9b9c2a66bf58a3861a&" +
    "text=" + q + "&" +
    "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 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";
}

HTML（popup.html）：

<!DOCTYPE html>
<html>
<head>
<title>Teh popup</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 for security. -->
<script src="popup.js"></script>
</head>
<body>
<div id="images">
</div>
<form name="queryForm" onsubmit="querySubmit();return false" action="#">
Search: <input type='text' name='query'>
<input type="submit" />
</form>
</body>
</html>

マニフェスト.json：

{
  "name": "Flickr image searcher",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Searches images on Flickr wirtout opening another page.",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "results.html"
  },
  "permissions": [
    "http://api.flickr.com/"
  ]
}
4

1 に答える 1

1

onsubmitHTMLのハンドラーはインラインJavaScriptであり、では許可されていませんmanifest_version: 2。

代わりに、addEventListenerJSファイルで使用して、submitイベントハンドラー関数をフォームにバインドします。

theForm.addEventListener("submit", function() {
    //...
    return false; // stop submission
});
于 2012-05-31T15:25:32.360 に答える