Chrome扩展程序不支持代码？

在此处提出2个问题后，我终于完善了Chrome的扩展功能。基于教程网站中的一个示例，我将其作为个人使用，我的版本要做的是从用户处获取查询输入，转到Flickr的API并通过搜索该查询返回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/" 
    ] 
}

来源

2012-05-31 Bluefire

你onsubmit你的HTML中的处理程序是内联JavaScript，这在manifest_version: 2中是不允许的。

而是使用addEventListener在你的JS文件到submit事件处理函数绑定到你的表单：

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

来源

2012-05-31 15:25:32 apsillers

啊，谢谢！我即将尝试一下，但在此之前，如果听众所在的事件听起来是提交事件，那么我不应该将它附加到表单而不是按钮上吗？所以，而不是'someButton.addEventListener'做'someForm.addEventListener'？这是最终提交的表单，而不是按钮......不是吗？ – Bluefire

此外，我至少在页面上工作时遇到的一个问题是，当我提交表单时，页面会刷新，因此所有变量都会被重置。我通过在我的onsubmit事件中加入了'action =＃“'和'return false'来解决这个问题。现在我已经完全删除了我的onsubmit事件，我应该向事件监听器添加'return false'吗？ – Bluefire

呃，转储错误我的部分;你会绑定到表单，而不是按钮，'return false'在'submit'处理函数中做同样的事情，就像'onsubmit'内嵌代码一样（也就是取消了），所以如果你之前需要它，将它保留在新函数中 – apsillers

Chrome扩展程序不支持代码？

回答

相关问题