在chrome扩展的后台页面中使用jQuery

目标

我正在尝试使用此样板代码在线查找使用字典API来查找所选单词并返回定义。

问题

我已经分别测试了实际的jQuery ajax调用，它运行良好。 此外，我可以在页面上获取所选单词。 但是，出于某种原因，我在Sample.js中的样板代码中实际调用 ajax函数时遇到了问题

建议是必要的。

background.html

    
 Image here: 
    

的manifest.json

 { "name": "Context Menus Sample", "description": "Shows some of the features of the Context Menus API", "version": "0.6", "permissions": ["contextMenus"], "background": { "scripts": ["sample.js"], "pages": ["background.html"] }, "manifest_version": 2 } 

Sample.js

  // A generic onclick callback function. function genericOnClick(info, tab) { console.log("item " + info.menuItemId + " was clicked"); console.log("info: " + JSON.stringify(info)); console.log("tab: " + JSON.stringify(tab)); alert(info.selectionText); displayText(info.selectionText); console.log("asfasdf"); $("#testID", document).html("testing jQuery"); $.ajax({ url: "http://api.wordnik.com//v4/word.json/cat/definitions?api_key=mykey&includeRelated=false&includeTags=false&limit=1", dataType : 'json', success: function(data) { //called when successful alert(data[0].word); }, error: function(e) { //called when there is an error console.log(e.message); } }); } // Create one test item for each context type. var contexts = ["page","selection","link","editable","image","video", "audio"]; for (var i = 0; i < contexts.length; i++) { var context = contexts[i]; var title = "Test '" + context + "' menu item"; var id = chrome.contextMenus.create({"title": title, "contexts":[context], "onclick": genericOnClick}); console.log("'" + context + "' item:" + id); } // Create a parent item and two children. var parent = chrome.contextMenus.create({"title": "Test parent item"}); var child1 = chrome.contextMenus.create( {"title": "Child 1", "parentId": parent, "onclick": genericOnClick}); var child2 = chrome.contextMenus.create( {"title": "Child 2", "parentId": parent, "onclick": genericOnClick}); console.log("parent:" + parent + " child1:" + child1 + " child2:" + child2); // Create some radio items. function radioOnClick(info, tab) { console.log("radio item " + info.menuItemId + " was clicked (previous checked state was " + info.wasChecked + ")"); } var radio1 = chrome.contextMenus.create({"title": "Radio 1", "type": "radio", "onclick":radioOnClick}); var radio2 = chrome.contextMenus.create({"title": "Radio 2", "type": "radio", "onclick":radioOnClick}); console.log("radio1:" + radio1 + " radio2:" + radio2); // Create some checkbox items. function checkboxOnClick(info, tab) { console.log(JSON.stringify(info)); console.log("checkbox item " + info.menuItemId + " was clicked, state is now: " + info.checked + "(previous state was " + info.wasChecked + ")"); } var checkbox1 = chrome.contextMenus.create( {"title": "Checkbox1", "type": "checkbox", "onclick":checkboxOnClick}); var checkbox2 = chrome.contextMenus.create( {"title": "Checkbox2", "type": "checkbox", "onclick":checkboxOnClick}); console.log("checkbox1:" + checkbox1 + " checkbox2:" + checkbox2); // Intentionally create an invalid item, to show off error checking in the // create callback. console.log("About to try creating an invalid item - an error about " + "item 999 should show up"); chrome.contextMenus.create({"title": "Oops", "parentId":999}, function() { if (chrome.extension.lastError) { console.log("Got expected error: " + chrome.extension.lastError.message); } }); 

Answer 1

您必须将您在ajax函数中调用的url的权限添加到清单：

  "permissions": [ "contextMenus", "http://api.wordnik.com/*" ], 

别忘了包含jquery：

 "background": { "scripts": ["jquery.js", "sample.js"], "pages": ["background.html"] } 

并且您的文件中不需要

网站的链接应该在其末尾有/ *。