Question

我使用google places api创建了一个脚本，以自动填充我们的crm系统中的公司名称字段。现在我想让我的同事可以作为chrome扩展，但我不能让它工作。我在这里阅读了很多关于这个主题的主题，但我不知道该怎么做。我收到以下错误：未捕获的ReferenceError：在initAutocomplete中未定义google。

这是我的内容.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());
                });
            }
        }

这是我的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'"

在我使用的background.html中：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&sensor=true&??callback=initialize"></script>

有人可以建议某种方式这样做。会很好。谢谢！

Answer 1

由于有Google安全政策，您无权访问内容脚本中的后台页面。

您可以使用js脚本在后台html中加载所有数据，并将其返回到内容js vis window.sendMessage机制。

如何访问Chrome扩展程序中的google places api？

1 个答案: