2012-11-10 4 views
9

TorjQuery Nutzung im Hintergrund Seite von Chrome-Erweiterung

Ich versuche, diesen vorformulierten Code zu verwenden, um nachschlagen mit Online einem Wörterbuch API das ausgewählte Wort und gibt die Definition zu finden.

Problem

Ich habe den tatsächlichen jQuery Ajax-Aufruf separat getestet und es funktioniert gut. Außerdem kann ich das ausgewählte Wort auf der Seite abrufen. Aber aus irgendeinem Grund habe ich Probleme tatsächlich Aufruf die Ajax-Funktion innerhalb meines Boilerplate-Codes in Sample.js

Beratung ist erforderlich.

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

Antwort

26

Sie haben p hinzufügen ermission für die URL, die Sie in der Ajax-Funktion auf Ihrem Manifest Aufruf:

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

nicht jquery Vergessen sind:

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

und Sie brauchen nicht <script src="jquery.js"/> in Ihrer Datei

Der Link der Website sollte/* am Ende haben.

+0

Das funktioniert immer noch nicht - aus irgendeinem Grund glaube ich nicht, dass meine jQuery überhaupt funktioniert ... kann jemand etwas sehen? –

+1

Aktualisierte meine Antwort. Sie haben vergessen, jquery in die Eigenschaft 'scripts' aufzunehmen! –

+0

Verstanden. Es funktioniert jetzt. Es dauerte ein wenig Debugging - ich hatte ohne Glück versucht, von der Konsole der Seite zu debuggen, aber ich erkannte, dass ich die _generated_background_page.html Konsole überprüfen musste, um Fehler zu überprüfen. –