Chrome 扩展 JS/JQuery答案

【问题标题】：Chrome extensions JS/JQueryChrome 扩展 JS/JQuery
【发布时间】：2018-09-02 19:51:00
【问题描述】：

大家，我注意到有些人已经遇到了同样的问题，但没有一个解决方案对我有帮助，所以这就是我在这里的原因。附言代码在浏览器中工作得很好，当我点击扩展时它不起作用，我看到的唯一的东西是标签，但没有 JS。而且，我调试了一下，发现唯一不起作用的是这一行：$.getJSON("http://api.openweathermap.org/data/2.5/find?q=Riga&type=like&APPID=06ae28a74a257d60dd4e80da4dd7cebe",function(data)

popup.js

document.addEventListener("DOMContentLoaded", function(){
        var city_name, latitute, longtitude, weather, description, temp, country;
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth()+1; //january = 0
        var yyyy = today.getFullYear();

        if(dd<10) {
            dd = '0'+dd
        } 

        if(mm<10) {
            mm = '0'+mm
        } 

        today = dd + '/' + mm + '/' + yyyy;


         $.getJSON("http://api.openweathermap.org/data/2.5/find?q=Riga&type=like&APPID=06ae28a74a257d60dd4e80da4dd7cebe",function(data){

             console.log(data.list[0])

             city_name = data.list[0].name;
             country = data.list[0].sys.country;
             latitute = data.list[0].coord.lat;
             longtitude = data.list[0].coord.lon;
             weather = data.list[0].weather[0].main;
             description = data.list[0].weather[0].description;
             temp = data.list[0].main.temp - 273.15;//temperature in json object is provided in Kelvins, Celsius = Kelvin - 273.15


             $(".city").html(city_name);
             $(".weather").html(weather);
             $(".temp").html(temp + " &#8451");
             $(".description").html(description)
             $(".latitude").html(latitute);
             $(".longtitude").html(longtitude);
             $(".date").html(today);
         });


})

popup.html

<!DOCTYPE html>
<html>
<head>
<title>Weather</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="popup.js"></script>
<style>
    .label {
        font-weight: bold;
    }
</style>
</head>
<body style="min-width:200px">
    <div><span class="label">Date: </span><span class="date"></span> </div> 
    <div><span class="label">City: </span><span class="city"></span></div>
    <div><span class="label">Latitude: </span> <span class="latitude"></span></div>
    <div><span class="label">Longtitude: </span> <span class="longtitude"></span></div>
    <di><span class="label">Weather: </span> <span class="weather"></span></div>
    <div><span class="label">Description: </span><span class="description"></span></div>
    <div><span class="label">Temperature: </span> <span class="temp"></span></div>

</body>
</html>

manifest.json

{
    "manifest_version" : 2,
    "name" : "Weather",
    "description" : "Weather",
    "version" : "1.0",
    "browser_action" : {
        "default_popup" : "popup.html"
    },

    "icons" : {
        "16" : "weather.png",
        "48" : "weather.png",
        "120" : "weather.png"
    },

    "permissions" : [
        "tabs" , "<all_urls>"
    ],

    "content_scripts": [
        {

        "js" : ["popup.js"]
        }
    ]
}

【问题讨论】：

唯一不起作用的是这条线你是怎么想出来的？有错误吗？
不，当我测试那个扩展时，它只是跳过了那一行。我刚刚使用了一些 "alert()" 并注意到该函数内的警报没有出现
方法调用显然工作得很好。请与我们分享minimal reproducible example，显示这是如何跳过。
它在浏览器中运行良好，我得到数据，一切都很好。当我上传扩展程序并尝试使用它时，问题就出现了，我只是没有进入该功能。如果你想重现这个问题，我会在描述中添加 manifest.json 文件。

标签： javascript jquery google-chrome

【解决方案1】：

答案：我没有使用 JQuery CDN，而是创建了一个新文件 jquery.min.js，并将 https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js 中的所有内容放入该文件中，然后从 HTML 添加到该文件的链接，在我的情况下，它看起来像这样- <script src="jquery.min.js"></script> 而不是 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>。希望对你有帮助

【讨论】：