CODEWITHSUNDEEP
javascripthtmlgoogle-mapsgoogle-maps-api-3google-chrome-extension
Christian
Christian

Reputation: 3403

Google extensions: (probably) misunderstanding with content scripts

I'm trying to use a content script to inject a DIV into a web page, and then asynchronously loading a Google Map into this DIV. For this I use the minimal example given on the Google Developer Page:

function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
      'callback=initialize';
  document.body.appendChild(script);
} 

window.onload = loadScript;

When I use this in a "stand-alone" application, e.g., a simple website with a DIV (id="map-canvas") and loading this Javascript snippet in the header -- basically the full example on the Google Developer Page -- everything works just fine.

However, when I copy the exact same Javascript code into the content script of my Google Extensions, I get the error that the the callback function initialize is undefined -- injecting a new DIV that is supposed to contain the map canvas works by the way.

I can't see what might be the problem here. Is there something "special" about content scripts or is this perhaps an permission issue?

Upvotes: 2

Views: 98

Answers (1)

Winchestro
Winchestro

Reputation: 2188

Your content script can access the dom of the current page, like the all the page scripts.

But your content script and the page scripts can not see each other. Check in the chrome console, in the top there is dropdown menu called <top frame> *, where you can switch between contexts for debugging.

When you append your script tag for the jsonp request the callback gets executed in the page context, and can not access your content script context where your function initialize is defined.

Try instead either appending the script tag in your background page or (maybe better depending on what you want to do) if possible put your initialize function itself in script tags and append it to the page so it's defined in page context (the function will not be able to see the content script anymore)

*it's not actually called like that but that's the selected option per default

Upvotes: 1

Related Questions