javascript - 谷歌扩展 : (probably) misunderstanding with content scripts

Question

我正在尝试使用内容脚本将 DIV 注入(inject)网页，然后将 Google map 异步加载到该 DIV 中。为此，我使用了 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;

当我在“独立”应用程序中使用它时，例如，一个带有 DIV (id="map-canvas") 的简单网站并在 header 中加载此 Javascript 片段时——基本上是 Google 上的完整示例开发者页面——一切正常。

但是，当我将完全相同的 Javascript 代码复制到我的 Google Extensions 的内容脚本中时，我收到回调函数 initialize 未定义的错误——注入(inject)一个新的 DIV顺便说一句，包含 map Canvas 。

我看不出这里可能有什么问题。内容脚本是否有“特殊”之处，或者这可能是权限问题？

Answer 1

您的内容脚本可以访问当前页面的dom，就像所有页面脚本一样。

但是你的内容脚本和页面脚本是看不到对方的。检查 chrome 控制台，在顶部有一个名为 <top frame> 的下拉菜单。 *，您可以在其中切换上下文以进行调试。

当您为 jsonp 请求附加脚本标记时，回调将在页面上下文中执行，并且无法访问您的 function initialize 所在的内容脚本上下文。被定义为。

尝试在后台页面中附加脚本标签，或者(可能更好，具体取决于您想要做什么)如果可能，将初始化函数本身放在脚本标签中并将其附加到页面中，以便在页面上下文中定义它(函数将无法再看到内容脚本)

*它实际上不是那样调用的，但这是默认选择的选项