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

2024-04-22

Goal

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

Problem

我已经单独测试了实际的 jQuery ajax 调用,效果很好。另外,我可以在页面上获取所选的单词。然而,由于某种原因,我实际上遇到了问题callingSample.js 中的样板代码中的 ajax 函数

需要建议。

背景.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>

清单.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
}

示例.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);
  }
});

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

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

不要忘记包含 jquery:

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

你不需要<script src="jquery.js"/>在你的文件中

网站链接末尾应有/*。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

chrome扩展后台页面中的jQuery使用 的相关文章