Rui*_*ang 2 javascript google-maps google-chrome-extension
假设我想在任何网页上找到地址,并点击其中每个网址,在地址下方插入一个小型Google地图.
我遇到的问题是GMaps库必须通过<script>标签加载.但是因为通过<script>加载的任何内容都不在Chrome扩展程序执行上下文中,所以"google.maps"对象将无法用于我的内容脚本.
有关解决方法的任何想法？
您可以做的是创建一个包含地图查看器页面的iframe.然后,您将属于内容脚本的上下文,并且您可以完全访问Chrome的消息传递.
由于我创建了数百个扩展,我已经完成了大量的扩展,其中一些可以在我的github.com/mohamedmansour页面中找到.我将展示一个我刚刚针对此问题做的示例,遗憾的是它可能包含错误.查看我上面的github页面以获取更完整的示例.
map_viewer.html在您的扩展程序中创建页面.<head>标签内<script src="http://maps.google.com/maps?file=api.....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>
map_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);
}
...
我希望这会引导你朝着正确的方向前进.
谢谢,穆罕默德曼苏尔