How to enable geolocation for an extension?

V

Vlad Yanukovich2021-04-19 19:05:02

JavaScript

Vlad Yanukovich, 2021-04-19 19:05:02

Hello ladies and gentlemen.

I had a question: I made a small application for determining the weather by geolocation in real time (updating by the minute). The update goes through the API and through geolocation in the browser. Everything works great when opened as a page in a browser.

Now I want to make a small extension for Chrome, slightly changing the look, but leaving the functionality exactly the same. The question is, how can I do this? The same code does not work, although everything is connected correctly in the manifest file. I will provide the code below, only without the API key.

P.S. A warning appears: Is the 'geolocation' permission appropriate? See https://developer.chrome.com/extensions/manifest.h... .
P.S.S. If you enable geolocation permission for all sites in chrome, this notification is there, if you disable it for all sites, it disappears.

Link 404)

Markup code, JS and JSON below, if you suddenly need CSS, then I'll throw it in the comment. The only thing I removed was window.listener(load), but nothing changed in the work.

Help who than can, what's the catch?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:[email protected];300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Weather App</title>
</head>
<body>
    
    <div class="container">
        
        <div class="location"></div>

        <div class="city-name"></div>

        <div class="icon">
            <img class="weater-icon" src="" alt="">
        </div>

        <div class="temperature"></div>

        <div class="weater-type"></div>
    </div>

    <script src="main.js"></script>
</body>
</html>

let long;
    let lat;
    let myLocation = document.querySelector('.location');
    let cityName = document.querySelector('.city-name');
    let iconSet = document.querySelector('.icon');
    let temperature = document.querySelector('.temperature');
    let weaterType = document.querySelector('.weater-type');
    
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            long = position.coords.longitude;
            lat = position.coords.latitude;
            const api = `https://api.weatherbit.io/v2.0/current?lat=${lat}&lon=${long}&key=здесь_должен_быть_ключ&include=minutely`;
            
            fetch(api)
                .then(respons => {
                    return respons.json();
                })
                .then(data => {
                    console.log(data);
                    const {temp, timezone, city_name } = data.data[0];
                    const { description, icon } = data.data[0].weather;
                    //set dom elements from API
                    cityName.textContent = city_name;
                    iconSet.innerHTML = `<img class="weater-icon" src="https://www.weatherbit.io/static/img/icons/${icon}.png" alt="">`;
                    temperature.textContent = temp;
                    myLocation.textContent = timezone;
                    weaterType.textContent = description;
                })
        });
    }

{
  "manifest_version": 2,
  "name": "Checking Weather",
  "description": "This plugin for checking your local weather",
  "version": "1.0.1",
  "icons": {"128": "cloudy.png"},
  "browser_action": {
    "default_icon": "cloudy.png",
    "default_popup": "index.html" 
  },

    "content_scripts": [
        {
            "matches": [ "*://*/*" ],
            "js": [ "main.js" ]
        }
    ]


}

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

V

Vlad Yanukovich, 2021-04-19
@Vladislav6

I found a solution, it was necessary to issue a separate permission in the manifest, here in the article is: https://developer.chrome.com/docs/extensions/mv3/d...
Simply put, add the following:

"permissions": [
    "geolocation"
    ]

M

Mors Clamor, 2021-04-19
@66demon666

First line on google