12

Goal

I am trying to use this boilerplate code to look up using a dictionary API online to find the selected word and return the definition.

Problem

I have tested the actual jQuery ajax call separately and it works well. Also, I can get the selected word on the page. However, for some reason I am having issues actually calling the ajax function within my boilerplate code in Sample.js

Advice is needed.

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

1 Answer 1

30

You have to add permission for the url which you're calling in the ajax function to your manifest:

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

Don't forget to include jquery:

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

and you don't need <script src="jquery.js"/> in your file

The link of website should have /* at the end of it.

4
  • That's still not working - for some reason I don't think my jQuery even works at all...can anyone see anything? Commented Nov 10, 2012 at 15:06
  • 1
    Updated my answer. You forgot to include jquery in the 'scripts' property!
    – user1796666
    Commented Nov 10, 2012 at 15:17
  • Got it. It's working now. Took a little debugging - I had been trying without any luck to debug from the page's console, but I realized I had to inspect the _generated_background_page.html's console to check errors. Commented Nov 10, 2012 at 23:11
  • Just informing that this is not anymore working on manifest v3. Commented Jan 31, 2023 at 15:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.