2012-05-31 4 views
0

Я, наконец, усовершенствовал свое расширение для 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/" 
    ] 
} 

ответ

1

onsubmit Ваш обработчик в вашем HTML - это встроенный JavaScript, который недопустим в manifest_version: 2.

Вместо этого используйте addEventListener в файле JS, чтобы связать обработчик с submit событий в форму:

theForm.addEventListener("submit", function() { 
    //... 
    return false; // stop submission 
}); 
+0

Ааа, спасибо! Я собираюсь попробовать, но прежде чем я это сделаю, если событие слушателя, ну, слушание - это событие отправки, не следует ли я прикрепить его к форме, а не к кнопке? Итак, вместо 'someButton.addEventListener' сделать' someForm.addEventListener'? Это форма, которая отправляется в конце концов, а не кнопка ... не так ли? – Bluefire

+0

Кроме того, проблема, с которой я столкнулся, по крайней мере, на странице, заключается в том, что когда я отправил форму, страница обновилась, поэтому все переменные были сброшены. Я исправил это, поставив 'action = #" и 'return false' в мое событие onsubmit. Теперь, когда я удалил событие onsubmit вообще, должен ли я добавить' return false' в прослушиватель событий? – Bluefire

+0

Упс, ошибка сбрасывания моя часть: вы привязываетесь к форме, а не к кнопке. 'return false' делает то же самое в функции обработчика' submit', как в встроенном коде 'onsubmit' (т. е. отменяет просуществование), поэтому, если вам это нужно раньше , сохраните его в новой функции. – apsillers

Смежные вопросы