chrome扩展中未定义的jQuery

Question

I have jquery loaded as a script, in the manifest, and no longer get the loading error. 我在清单中已将jquery作为脚本加载，并且不再出现加载错误。 However, whenever I run my chrome extension, I get a error saying Uncaught ReferenceError: $ is not defined at popup.js:15 但是，每当我运行chrome扩展程序时，我都会收到一条错误消息，指出在popup.js中未定义Uncaught ReferenceError：$：15

popup.js 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 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.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/"
]
}

Answer 1

You have to put 你必须把
<script src="jquery.min.js"></script>
before 之前
<script src="popup.js"></script>

so the final HTML code will be 因此最终的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>

Answer 2

Switch the order of these 2 lines 切换这2行的顺序

<script src="popup.js"></script>
<script src="jquery.min.js"></script>

You're loading jquery after, so $ isn't defined at the time. 之后要加载jquery，因此$当时未定义。

chrome扩展中未定义的jQuery

问题描述

2 个解决方案

解决方案1
3 2017-03-18 00:11:24

解决方案2
2 已采纳 2017-03-18 00:15:18

chrome扩展中未定义的jQuery

问题描述

2 个解决方案

解决方案1 3 2017-03-18 00:11:24

解决方案2 2 已采纳 2017-03-18 00:15:18

解决方案1
3 2017-03-18 00:11:24

解决方案2
2 已采纳 2017-03-18 00:15:18