Я, наконец, усовершенствовал свое расширение для Chrome, задав здесь 2 вопроса. Я делаю это для личного использования, основываясь на примере с учебным сайтом, и то, что моя версия предназначена для этого, это взять запрос от пользователя, перейти к API Flickr и вернуть 24 изображения, выполнив поиск этого запроса. Я открыл страницу, как, ну, страницу, и она отлично работает. Но когда я пытаюсь открыть его как расширение, независимо от того, что вводит пользователь, термин запроса не изменяется. Поэтому я пришел к выводу, что какой-либо код не поддерживается в расширениях chrome, или я делаю что-то ужасно неправильно. Если первое верно, не могли бы вы указать, что я могу и не могу использовать в расширениях (или связать меня с тем, у кого есть ответ)? Примечание: да, я знаю, что серверные языки не работают вообще. Если, однако, я делаю что-то глупое, пожалуйста, скажите мне и, если возможно, дайте мне руку на это. Заранее спасибо за любую помощь. Код ниже:Расширение 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>
manifest.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/"
]
}
Ааа, спасибо! Я собираюсь попробовать, но прежде чем я это сделаю, если событие слушателя, ну, слушание - это событие отправки, не следует ли я прикрепить его к форме, а не к кнопке? Итак, вместо 'someButton.addEventListener' сделать' someForm.addEventListener'? Это форма, которая отправляется в конце концов, а не кнопка ... не так ли? – Bluefire
Кроме того, проблема, с которой я столкнулся, по крайней мере, на странице, заключается в том, что когда я отправил форму, страница обновилась, поэтому все переменные были сброшены. Я исправил это, поставив 'action = #" и 'return false' в мое событие onsubmit. Теперь, когда я удалил событие onsubmit вообще, должен ли я добавить' return false' в прослушиватель событий? – Bluefire
Упс, ошибка сбрасывания моя часть: вы привязываетесь к форме, а не к кнопке. 'return false' делает то же самое в функции обработчика' submit', как в встроенном коде 'onsubmit' (т. е. отменяет просуществование), поэтому, если вам это нужно раньше , сохраните его в новой функции. – apsillers