javascript - Chrome 扩展 JS/JQuery

问题描述

大家，我注意到有些人已经遇到了同样的问题，但是没有一个解决方案对我有帮助，所以这就是我在这里的原因。PS代码在浏览器中运行良好，当我点击扩展时它不起作用，我看到的唯一东西是标签，但没有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>

清单.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"]
        }
    ]
}

标签： javascriptjquerygoogle-chrome

javascript - Chrome 扩展 JS/JQuery

问题描述

解决方案

推荐阅读