chrome擴展中未定義的jQuery

Question

我在清單中已將jquery作為腳本加載，並且不再出現加載錯誤。 但是，每當我運行chrome擴展程序時，我都會收到一條錯誤消息，指出在popup.js中未定義Uncaught ReferenceError：$：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/"
]
}

Answer 1

你必須把
<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>

Answer 2

切換這2行的順序

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

之后要加載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