通过Chrome扩展程序访问Google Maps API

问题描述：

假设我想在任何网页上找到地址，并点击其中的每一个，都会在地址下方插入一个小型Google地图。

Say I'd like to find addresses on any webpage and have a click on each one of them insert a small Google Maps below the address.

问题I正在运行的是GMaps库必须通过<脚本>标记。但是因为通过< script>不在Chrome扩展执行上下文中，那么google.maps对象将不可用于我的内容脚本。

The problem I'm running into is that the GMaps library must be loaded via a < script> tag. But because anything loaded via < script> is out of the Chrome extension execution context, the "google.maps" object won't be available to my content scripts.

有关解决方法的任何想法？

Any thoughts on a workaround?

答

您可以做的是创建一个包含页面到地图查看器的iframe。然后，您将属于内容脚本，您可以完全访问Chrome的消息传递。

What you could do is create an iframe that contains a page to your map viewer. Then you will belong in the context of Content Scripts and you have full access to Chrome's Message Passing.

由于我创建了数百个扩展，我已经完成了大量的扩展，其中一些可以在我的 github中获得。 com / mohamedmansour 页面。我将展示一个我刚才为这个问题做的例子，不幸的是它可能包含错误。请检查我的github页面以获取更完整的示例。

Since I have created hundreds of extensions, I have done exactly this in tons of them, and some of them are available in my github.com/mohamedmansour page. I will show an example that I just did for this problem below, unfortunately it may contain bugs. Check my github page above for a more complete example.

在您的扩展程序中创建 map_viewer.html 页面。

包含在< head> 标记< script src =http://maps.google.com/maps?file=api.....

使用Chrome 消息传递在内容之间传递数据

Create a map_viewer.html page in your extension.
Include within the <head> tag the <script src="http://maps.google.com/maps?file=api.....
Use Chrome Message Passing to pass data between content scripts.

例如

map_viewer.html
$ b

For example

map_viewer.html

<!DOCTYPE html> 
<html>
<head>
  <link type="text/css" rel="stylesheet" href="/css/map_viewer.css" />
  <script type="text/javascript" src="/js/map_viewer.js"></script>
</head>
<body>
  <div id="map_canvas"></div>
</body>
</html>

ma p_viewer.js

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.method == 'RenderMap') {
    renderMap(request.data.latitude, request.data.longitude);
  }
});

function renderMap(latitude, latitude) {
  var map = new GMap2(document.getElementById('map_canvas'));
  map.setCenter(new GLatLng(latitude, latitude), 13);
  var marker = new GMarker(new GPoint(lng, lat));
  map.addOverlay(marker);
}

webpage_content_script.js

...
// Unique ID to differentiate this content script from the rest of the web. 
// or use the extension id from @@__extension_id__, I recall there was a bug, haven't
// checked if it got resolved though. 
var UNIQUE_MAP_VIEWER_ID = 'crx_myextension_iframe'; 
var latitude = -1;
var longitude = -1;

/**
 * Here is where you want to render a latitude and longitude. We create an iframe so we
 * we can inject it. We just want to maintain a single instance of it though.
 */
function onRenderMap() {
  var mapViewerDOM = document.getElementById(UNIQUE_MAP_VIEWER_ID);
  if (mapViewerDOM) {
     mapViewerDOM.parentNode.removeChild(mapViewerDOM);
  }

  mapViewerDOM = document.createElement('iframe');
  mapViewerDOM.setAttribute('id', UNIQUE_MAP_VIEWER_ID);
  mapViewerDOM.setAttribute('src', chrome.extension.getURL('map_viewer.html');
  mapViewerDOM.setAttribute('frameBorder', '0');
  mapViewerDOM.setAttribute('width', '99.90%');
  mapViewerDOM.setAttribute('height', '100%');
  mapViewerDOM.setAttribute('style', 'position: fixed; top: 0; left: 0; overflow: hidden; z-index: 99999');
  mapViewerDOM.onload = function(e) {
     sendResponse({
       method: 'RenderMap', 
       data: {
         latitude: latitude,
         longitude: longitude
       }
     });
  }
  document.body.appendChild(mapViewerDOM);
}

...

我希望这会引导您正确的方向。

I hope this would steer you in the right direction.

谢谢，
穆罕默德曼苏尔

Thanks, Mohamed Mansour

通过Chrome扩展程序访问Google Maps API

例如

For example

相关推荐