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擴展

回答

相關問題