Beny Beny - 21 days ago 20
HTML Question

How to use external javascript in chrome extension

I am writing a chrome extension and I want to use jQuery and simpleweather.js.

Purpose of extension is to show outside temperature in new tab with nice background image.

When I use scripts externally HTML site is working and displays temperature but extension is not working.

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="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>


Manifest:

{
"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"
}


When I include scripts locally HTML to the same folder as
timepage.html
is located, site is not working and does not even display temperature and extension is not working as well.

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>


Manifest:

{
"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"
}

Answer

The only problem here is the loading order. You should call jquery first simpleWeather and js afterwards.

Comments