jQuery的使用在Chrome扩展

我试图用这个样板代码查找使用的字典API网上找到所选单词并返回定义的背景页。

问题

我已分别测试了实际的jQuery Ajax调用它工作得很好。另外，我可以在页面上找到所选词。但是，出于某种原因，我有实际调用在Sample.js我的样板代码中的ajax函数

需要建议。

background.html

<html> 

    <script src="jquery.js"/> 
    <script src="sample.js"/> 

    <body> 
    <p> 
    Image here: 
    </p> 

    <img id="target" src="white.png" width="640" height="480"> 

    </body> 
</html>

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); 
    } 
});

来源

2012-11-10 Spencer Allen Gardner

您必须添加p ermission为这你在AJAX函数调用你的清单中的网址：

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

不要忘了包括jQuery的：

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

，你不要在你的文件

需要 <script src="jquery.js"/>

网站的链接应该在/ *结尾。

来源

2012-11-10 08:01:09

这仍然不起作用 - 出于某种原因，我不认为我的jQuery甚至可以工作...任何人都可以看到任何东西？ –

更新了我的答案。你忘了将jquery包含在'scripts'属性中！ –

明白了。现在正在工作。进行了一些调试 - 我一直试图没有任何运气从页面的控制台调试，但我意识到我必须检查_generated_background_page.html的控制台来检查错误。 –

jQuery的使用在Chrome扩展

回答

相关问题