jquery未在chrome扩展中定义

时间:2017-03-18 00:08:28

标签: javascript jquery google-chrome

我在清单中将jquery作为脚本加载,不再出现加载错误。但是,每当我运行chrome扩展时,我都会收到一条错误消息,指出未捕获的ReferenceError:$未在popup.js中定义:15

popup.js

var url = 'http://api.petfinder.com/pet.getRandom?key=fe1c3608eef3a014392be43230072267&shelterid=KY305&output=full&format=json';
$.ajax({
    type : 'GET',
    data : {},
    url : url+'&callback=?' ,
    dataType: 'json',
    success : function(data) {              
        var result = '';
        var petfinder = data.petfinder;
        var infoHTML = '<ul>';
        infoHTML += '<li>';
        infoHTML += '<strong>Description</strong><br>';
        infoHTML += petfinder.pet.description['$t'];
        infoHTML += '</li>';
        infoHTML += '</li>';
        infoHTML += '</ul>';
        // return infoHTML;
        $('#petfinderInfo').html(infoHTML);
        // $('#petfinderInfo').html(petfinder.pet.description['$t']);
        console.log(petfinder);
    }
});

popup.html

<!doctype html>
<html>
<head>
<title>Local Adoptable Pets</title>
<style>
  body {
    font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
    font-size: 100%;
    /* avoid an excessively wide status text */
    white-space: pre;
    /*text-overflow: ellipsis;*/
    overflow: auto;
    width: 350px;
    max-width: 500px;
  }
</style>

<script src="popup.js"></script>
<script src="jquery.min.js"></script>
</head>
<body>
  Local Adoptable Pets:
 </body>
</html>

的manifest.json

{
"manifest_version": 2,
"name": "Getting started example",
"description": "This extension shows a Google Image search result for the current page",
"version": "0.1.0",

"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "Adopt!"
},

"content_scripts": [{
"matches": ["http://*/*","https://*/*"],
"js": [
  "jquery.min.js",
  "popup.js"
]
}],

"permissions": [
"activeTab",
"https://ajax.googleapis.com/"
]
}

2 个答案:

答案 0 :(得分:3)

您必须在<script src="jquery.min.js"></script>

之前加上<script src="popup.js"></script>

所以最终的HTML代码将是

<!doctype html>
<html>
<head>
<title>Local Adoptable Pets</title>
<style>
  body {
    font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
    font-size: 100%;
    /* avoid an excessively wide status text */
    white-space: pre;
    /*text-overflow: ellipsis;*/
    overflow: auto;
    width: 350px;
    max-width: 500px;
  }
</style>

<script src="jquery.min.js"></script>
<script src="popup.js"></script>
</head>
<body>
  Local Adoptable Pets:
 </body>
</html>

答案 1 :(得分:2)

切换这两行的顺序

scipy.odeint

你之后加载了jquery,所以当时没有定义$。