Question

您好我正在制作Chrome扩展程序，以显示网页上所选单词的含义。该脚本正在处理我写的文本＆＃34; body＆＃34;在我的html文件中。

但它不适用于互联网上的其他网页。

这是我的dict.html文件

<html>
<head>
<title>Dictionary</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="jqueryui.js"></script>
  <script type="text/javascript" src="dictionary.js"></script>
</head>
<body>
  Crime Small Bad Smart
    <div id="tooltip" style="display:none";></div>
</body>

这是dictionary.js文件

 $(document).ready(function () {
   document.ondblclick = function(evt) {
     showButton();
   }
});
function GetSelectedText () {
   var selText = "";
   if (window.getSelection) {  
      var selRange = window.getSelection ();
                selText = selRange.toString ();
        }
        else {
            if (document.selection.createRange) { // Internet Explorer
                var range = document.selection.createRange ();
                selText = range.text;
            }
        }
        return selText;
    }

    var search;
    function showButton(selector){
        search = GetSelectedText();
        var lastChar = search.substr(search.length - 1);
        if(lastChar == " ")
          search = search.slice(0,-1)

        var meaning;
        $.ajax({

        url: "http://api.wordnik.com:80/v4/word.json/"+search+"/definitions?limit=200&includeRelated=true&useCanonical=false&includeTags=false&api_key=a2a73e7b926c924fad7001ca3111acd55af2ffabf50eb4ae5",
            data: ({ issession : 1, selector: selector }),
            cache: false,
            dataType: "text",
            success: function(data) {
            var json = $.parseJSON(data);
            meaning = json[0].text;
            callon(meaning);
            return meaning;
            }
        });
    }
    function callon(meaning){
        $("div").attr({
         title: search     

   }).appendTo("#tooltip");

   $("#tooltip").empty().append(meaning);

   $(function() {
            $( "#tooltip" ).dialog({
               autoOpen: false,
               show: {
                  effect: "explode",
                  duration: 500
               },
              hide: {
                  effect: "explode",
                   duration: 500
              }


            });
                         $( "#tooltip" ).dialog('open');

        });


          $( "#tooltip" ).dialog({

              close: function (event, ui) {
              $("#tooltip").dialog("destroy");
            }
            });
     }

这是我的menifest.json文件

{
  "manifest_version": 2,
  "name": "dictionary",
  "description": "This extension defines the words",
  "version": "1.0",
  "content_scripts": [
  {
      "matches": ["https://*/* "],
      "css": ["jqueryuid.css"],
      "js": ["dictionary.js","jqueryui.js","jquery.js"]
  }
],
 "browser_action": {
 "default_icon": "icon.png",
 "default_popup": "dict.html"
},
 "permissions": [
    "tabs", "http://*/"
  ]
}

我的扩展程序文件夹中有jquery.js和jqueryui.js文件。

Answer 1

清单中的加载顺序错误。您的脚本在jQuery准备好之前加载。

应该是：

  "content_scripts": [
  {
      "matches": ["https://*/* "],
      "css": ["jqueryuid.css"],
      "js": ["jquery.js","jqueryui.js","dictionary.js"]
  }

要帮助调试此类问题，请熟悉Chrome开发工具。您的错误将在页面控制台中生成有意义的消息。

我也看不到您在页面中添加#tooltip的位置。我建议使名称更独特：很多页面可能已经有一个ID为“tooltip”的元素

为什么我的chrome扩展脚本无法在网页上运行？

1 个答案: