如何在Chrome擴展中使用外部JavaScript

我正在寫一個Chrome擴展，我想使用jQuery和simpleweather.js。
擴展的目的是在新選項卡中顯示具有良好背景圖像的室外溫度。
當我在外部使用腳本時，HTML網站正在工作並顯示溫度，但擴展名無效。
HTML：如何在Chrome擴展中使用外部JavaScript

<head> 
    <title>Nová karta</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script> 
    <script src="javascript.js"></script> 
</head>

清單：

{ 
    "browser_action": { 
    "default_title": "TimePage", 
    "default_popup": "popup.html" 
    }, 
    "description": "", 
    "chrome_url_overrides": { 
    "newtab": "timepage.html" 
    }, 
    "permissions": [ 
    "tabs", 
    "cookies" 
    ], 

    "content_scripts": [ 
    { 
     "matches": [ "<all_urls>" ], 
     "js": [ "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js", "https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js" ], 
    } 
    ], 
    "manifest_version": 2, 
    "name": "Temperature", 
    "version": "1.0" 
}

當我包括腳本本地HTML到同一文件夾中timepage.html所在，網站無法正常運作和甚至不顯示溫度和擴展不工作。
HTML：

<head> 
    <title>Nová karta</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.css"> 

    <script src="weather/jquery.simpleWeather.min.js"></script> 
    <script src="jquery.js"></script> 
    <script src="javascript.js"></script> 
</head>

清單：

{ 
    "browser_action": { 
    "default_title": "TimePage", 
    "default_popup": "popup.html" 
    }, 
    "description": "", 
    "chrome_url_overrides": { 
    "newtab": "timepage.html" 
    }, 
    "permissions": [ 
    "tabs", 
    "cookies" 
    ], 

    "content_scripts": [ 
    { 
     "matches": [ "<all_urls>" ], 
     "js": [ "jquery.simpleWeather.min.js", "jquery-3.1.1.min.js" ], 
    } 
    ], 
    "manifest_version": 2, 
    "name": "Temperature", 
    "version": "1.0" 
}

來源

2016-11-12 Beny

可能的複製[簡單的jQuery在瀏覽器擴展程序彈出

我解決了這個問題。你只需要改變腳本的順序。 HTML：

<head> 
    [...] 
    <script src="jquery-3.1.1.min.js"></script> 
    <script src="jquery.simpleWeather.min.js"></script> 
    <script src="javascript.js"></script> 
</head>

的

來源

2016-11-13 00:57:38 Beny

相關問題