How do I load Google Maps script in a Chrome extension using Angular?

Question

I am building a Chrome extension using AngularJS that is using Google Maps (specifically Locations).

I am looking for functionality that is similar to

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
</head>
<body>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
    <script type="text/javascript">
        google.maps.event.addDomListener(window, 'load', function () {
            var places = new google.maps.places.Autocomplete(document.getElementById('txtPlaces'));
            google.maps.event.addListener(places, 'place_changed', function () {
                var place = places.getPlace();
                var address = place.formatted_address;
                var latitude = place.geometry.location.lat();
                var longitude = place.geometry.location.lng();
                var mesg = "Address: " + address;
                mesg += "\nLatitude: " + latitude;
                mesg += "\nLongitude: " + longitude;
                alert(mesg);
            });
        });
    </script>
    <span>Location:</span>
    <input type="text" id="txtPlaces" style="width: 250px" placeholder="Enter a location" />
</body>
</html>

The above works fine if it's not a Chrome extension. However, because I'm building a Chrome extension when I try to load the Google Maps script

http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places

I get an error saying

Refused to load the script 'http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places' because it violates the following Content Security Policy directive: "script-src 'self' https://ssl.google-analytics.com".

When I change the manifest to

"content_security_policy": "script-src 'self' https://maps.googleapis.com https://ssl.google-analytics.com; object-src 'self'",

I still get the same 'Refused to load script' error.

So my question is: how do I load the Google Maps library without loading it directly in the HTML file?

Try `https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places` — James P, May 21 '16 at 02:56

score 1 · Answer 1 · answered May 21 '16 at 19:10

1

I was able to add https://maps.googleapis.com to the manifest. It wasn't working before because I wasn't reloading the files to chrome. Now that I reloaded, that is working!

answered May 21 '16 at 19:10

sharataka

5,014
20
65
125

score 0 · Answer 2 · answered May 21 '16 at 04:48

0

By default, inline script won't be executed and only local script is loaded.

Besides adding remote url (starting with https) in content_securiy_policy field, you should also extract your inline script to an external file then include it.

answered May 21 '16 at 04:48

Haibara Ai

10,703
2
31
47

How do I load Google Maps script in a Chrome extension using Angular?

2 Answers2