谷歌地图API在谷歌Chrome扩展中无法工作。

Question

我正在使用JavaScript、HTML和CSS制作一个Google Chrome扩展程序。为此，我需要读取用户提供的地址的经度和纬度。在测试我的扩展程序时，我一直收到以下错误信息: 这是我的JavaScript代码:

result: {
            data: function (from, to, hrs, mins) {
                fromaddress     = from;
                toaddress   = to;
                hours       = hrs;
                minutes     = mins;

                View.result.readLatLng();
            },

            readLatLng: function () {
                //var addressone = document.getElementById("addressone").value;
                geocoder    = new google.maps.Geocoder();
                geocoder.geocode( { 'address': fromaddress}, function(results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {
                    var latitude = results[0].geometry.location.latitude;
                    var longitude = results[0].geometry.location.longitude;
                    console.log('lat: ' + latitude + ', lng: ' + longitude);
                  } else {
                    alert("Geocode was not successful for the following reason: " + status);
                  }
                });
            }
        }

这是我的manifest.json文件：

{
  "name": "Name",
  "version": "1.0",
  "manifest_version": 2,
  "background": { 
    "scripts": [
      "js/result.js",
      "js/script.js"
    ] 
  },
  "description": "Desc",
  "browser_action": {
    "default_icon": "images/icon.png",
    "default_title": "Title",
    "default_popup": "html/popup.html"
  },
  "permissions": [ 
    "http://*/",
    "https://maps.google.com/*",
    "https://maps.googleapis.com/*",
    "http://localhost/*",
    "geolocation"
  ],
  "content_security_policy": "script-src 'self' https://maps.googleapis.com https://maps.gstatic.com; object-src 'self'"
}

请帮我解决这个问题怎么办？

- Om3ga

---

你看过这个问题吗？https://dev59.com/wmfWa4cB1Zd3GeqPfkyd - Marcelo

是的，我看过那篇文章。我在我的扩展程序中没有使用任何模板，所以那并没有帮助到我。 - Om3ga

@Marcelo 能否请您帮助我？非常感谢。 - Om3ga

我了解Google Maps及其API，但我对Chrome扩展一无所知。 - Marcelo

Answer 1

这个答案是作为 Marcelo 的回答的补充，因为我还不能评论，而且我的编辑被拒绝了。

您可以通过在清单文件中更改“content_security_policy”键并添加“unsafe-eval”属性来规避此问题。

"content_security_policy": "script-src 'self' 'unsafe-eval' https://; object-src 'self'"

讨论Chrome扩展内容安全策略

正如在Marcelo的回答中所提到的评论中，Google Maps API源代码中的Streetview代码使用了document.write()，这是一种类似于eval的构造。Eval本质上是不安全的，因此希望Google能够解决他们Maps API源代码中的这个问题。

我不确定这是否会影响将扩展提交到Chrome商店。但是，我已经成功地在本地未打包的扩展中使用了Google Maps API。

- Nils Rocine

Answer 2

Google Maps API加载器使用document.write()，但在Chrome扩展中似乎不允许。请参见这里:

我在我的Google Chrome扩展中使用您的地图。现在我尝试切换到Chrome扩展manifest.v2，并发现需要使用内容安全策略。但是您的代码包含“eval”函数和document.write来加载脚本，因此无法初始化您的地图。

- Marcelo

---

但是我在代码中没有使用document.write()方法。 - Om3ga

你自己不用它，但是Google Maps API在使用。看一下这个源代码：http://maps.google.com/maps/api/js?sensor=false - Marcelo

你看了我在答案中发布的链接吗？它已经被发布为增强请求，并在问题跟踪器中得到了Google的确认。你可以给这个问题加星以增加它的权重。 - Marcelo

Answer 3

我在构建Web应用程序时也遇到了Google Geocoding API的问题。我立刻能看到你的代码可能存在的一个问题是如何获取纬度和经度。

尝试使用以下代码替代：

var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();

- Matt Kneiser

---

当我运行你的代码时，经度和纬度都显示为“未定义”。 - Matt Kneiser

好的。我根据你的建议修改了代码，但仍然出现相同的错误。 - Om3ga