logo标签列表

如何从Chrome扩展程序中获取用户的位置？

google-chromegoogle-chrome-extension
5
我创建了一个扩展程序，想要获取用户的位置信息以便向他们展示。
我尝试添加了以下代码：
var x = document.getElementById("ua");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Unavailable.";
    }
}
function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude; 
}

但是扩展程序中没有显示任何内容，有什么建议吗？我还试图避免使用Chrome位置API，因为它只在开发渠道上可用。
你是在内容脚本还是后台页面中进行操作？你的后台页面是持久的吗？ - Xan
我正在尝试在popup.html中让它工作，我已经将代码添加到popup.js中，当用户单击按钮时应该调用该代码，但什么也没有发生。我已经测试了按钮，在按下时显示单词“test”的功能是可以的，只是它无法获取用户的位置。 - BillyMays
2个回答
9
文档中的声明权限页面列出了您的情况下的一个特殊权限：
“geolocation” 允许扩展或应用程序使用提议的HTML5地理位置API而不提示用户授权。
您必须使用它，因为某些扩展页面（后台、弹出窗口）无法显示权限信息栏。
0

function successCallback(position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    const resultDiv = document.getElementById("result");
    resultDiv.textContent = `Latitude: ${latitude}, Longitude: ${longitude}`;
  }
  
  // Function to handle errors when retrieving location
  function errorCallback(error) {
    const resultDiv = document.getElementById("result");
    if (error.code === error.PERMISSION_DENIED) {
      resultDiv.textContent = "Geolocation permission denied. Please allow access in your browser settings.";
      // You can also provide instructions for enabling geolocation in the browser settings.
      const instructionsDiv = document.getElementById("instructions");
      instructionsDiv.textContent = "To enable geolocation access, go to your browser settings, find 'Site Settings' or 'Privacy and Security', and allow location access for this extension.";
    } else {
      resultDiv.textContent = "Error getting location: " + error.message;
    }
  }
  
  // Request user's location when they click the button
  document.getElementById("getLocationButton").addEventListener("click", function() {
    // Check if geolocation is available in the browser
    if ("geolocation" in navigator) {
      // Request the user's location
      navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
    } else {
      const resultDiv = document.getElementById("result");
      resultDiv.textContent = "Geolocation is not available in this browser.";
    }
  });
<!DOCTYPE html>
<html lang="en">
  <head>
   
   
  </head>
  <body>
    <button id="getLocationButton">Get Location</button>
    <div id="result"></div>
    <div id="instructions"></div>
    <script src="script.js">
        
    </script>
  </body>
</html>

并且在你的manifest.json文件中也包含这个，它会起作用。 

{
    "name": "name of externsion",
    "version": "1.0",
    "manifest_version": 3,
    "permissions": ["geolocation"],
    "action": {
        "default_popup": "index.html"
    },
    "icons": {
        "16": "images/logo_16.png",
        "24": "images/logo_24.png",
        "32": "images/logo_32.png",
        "64": "images/logo_64.png"
    }
}

请记住，Stack Overflow 不仅仅旨在解决当前的问题，还可以帮助未来的读者找到类似问题的解决方案，这需要理解底层代码。对于我们社区中的初学者和不熟悉语法的成员来说，这尤为重要。鉴于此，“你能否编辑你的答案，包括解释你正在做什么以及为什么认为这是最佳方法？” - Jeremy Caney
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接