通过Chrome扩展程序访问Google Maps API [英] Get access to Google Maps API from a Chrome extension
问题描述
假设我想在任何网页上找到地址，并点击其中的每一个，都会在地址下方插入一个小型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.htmlpage 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
