Google chrome extension to get google MAP contents like route information

how ro create Google chrome extension to get google MAP contents like route information, direction, source, destination from opened google map?

How to get access to google places api in chrome extension?

i created a script with the google places api to autocomplete the company name field in our crm system. Now i want to make it available for my colleagues as chrome extension, but i dont get it to work. I read a lot of threads regarding this topic here, but i dont know exactly how to do it. I get the following error: Uncaught ReferenceError: google is not defined at initAutocomplete.

Here is my content.js:

var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = "https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places";
        script.async = "true";
        script.defer = "defer";
        document.body.appendChild(script);

        setTimeout(initAutocomplete, 2000);

        var lookup = {
            "street_number": document.getElementById('_ctl0__ctl0__Splitter_maingroup__Address_maingroup__Address_StreetAddress1'),
            "route": document.getElementById('_ctl0__ctl0__Splitter_maingroup__Address_maingroup__Address_StreetAddress11'),
            "fullAddress": document.getElementById('_ctl0__ctl0__Splitter_maingroup__Address_maingroup__Address_StreetAddress1'),
            "locality": document.getElementById('_ctl0__ctl0__Splitter_maingroup__Address_maingroup__Address_StreetCity'),
            "neighborhood": document.getElementById('_ctl0__ctl0__Splitter_maingroup__Address_maingroup__Address_StreetCity'),
            "administrative_area_level_1": document.getElementById('_ctl0__ctl0__Splitter_maingroup__Address_maingroup__Address_StreetAddress1'),
            "country": document.getElementById('_ctl0__ctl0__Splitter_maingroup__ContactCountryMDO__ctl0__ctl0__Splitter_maingroup__ContactCountryMDO_SearchBox__ctl0__ctl0__Splitter_maingroup__ContactCountryMDO_SearchBox'),
            "postal_code": document.getElementById('_ctl0__ctl0__Splitter_maingroup__Address_maingroup__Address_StreetZipcode')
        };
        var placeSearch;
        var autocomplete;
        var componentForm = {
            street_number: 'short_name',
            route: 'long_name',
            locality: 'long_name',
            administrative_area_level_1: 'long_name',
            country: 'long_name',
            neighborhood: 'long_name',
            postal_code: 'short_name'
        };

        function initAutocomplete() {
            document.getElementById('_ctl0__ctl0__Splitter_MainHeaderGroup_MainHeading_textfield_MainHeaderGroup_MainHeading_textfield').onFocus = "geolocate()";

            autocomplete = new google.maps.places.Autocomplete(
                (document.getElementById('_ctl0__ctl0__Splitter_MainHeaderGroup_MainHeading_textfield_MainHeaderGroup_MainHeading_textfield')));

            autocomplete.addListener('place_changed', fillInAddress);
        }


        function fillInAddress() {
            var place = autocomplete.getPlace();
            var fullAddress = '';
    if (place.name) {
      document.getElementById("_ctl0__ctl0__Splitter_MainHeaderGroup_MainHeading_textfield_MainHeaderGroup_MainHeading_textfield").value = place.name;
      document.getElementById("_ctl0__ctl0__Splitter_MainHeaderGroup_MainHeading_textfield_MainHeaderGroup_MainHeading_textfield").disabled = false;
    }

            for (var i = 0; i < place.address_components.length; i++) {
                var addressType = place.address_components[i].types[0];
                var val = place.address_components[i][componentForm[addressType]];
                if (componentForm[addressType]) {
                    switch (addressType) {
                           case 'street_number':
                            fullAddress = fullAddress + val;
                                break;
                           case 'route':
                            // fullAddress = fullAddress + ' ';
                            // fullAddress = fullAddress + val; 
                fullAddress = val + ' ' + fullAddress;
                            break;
                        case 'neighborhood':
                            lookup.neighborhood.value = val;
                            break;
                        case 'locality':
                            lookup.locality.value = val;
                            break;
                        case 'administrative_area_level_1':
                            lookup.administrative_area_level_1.value = val;
                            break;
                        case 'country':
                            lookup.country.value = val;
                            break;
                        case 'postal_code':
                            lookup.postal_code.value = val;
                            break;
                    }
                }
            }
            lookup.fullAddress.value = fullAddress;
        }

        function geolocate() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var geolocation = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };
                    var circle = new google.maps.Circle({
                        center: geolocation,
                        radius: position.coords.accuracy
                    });
                    autocomplete.setBounds(circle.getBounds());
                });
            }
        }

And here is my manifest.json:

{
  "manifest_version": 2,
  "name": "SOAutoComplete",
  "version": "1.0",

  "permissions": [
    "tabs",
    "https://crm.test.com/*",
    "https://*.googleapis.com/*",
  ],

"background": { "page": "html/background.html" },

  "content_scripts": [
    {
      "matches": [ "https://crm.test.com/*" ],
      "js": [ "js/content.js" ]
    }
  ],

  "page_action": {
    "default_title": "",
    "default_icon": "img/icon.png"
  },

  "content_security_policy": "script-src 'unsafe-eval' https://maps.google.com/ https://*.googleapis.com/ https://maps.gstatic.com/; object-src 'self'"

In the background.html i am using:


Can someone suggest some way to do so. Would be great. thanks!