在现代网络浏览中，Chrome浏览器的扩展程序为提供了极大的便利，它们能够根据需求定制浏览器的行为。Chrome扩展程序的创建过程相对简单，这使得可以轻松地为浏览器添加新功能。常见的扩展程序包括RSS阅读器和邮件通知等。本文将向展示如何创建一个简单的Chrome扩展程序，该程序可以访问由forecast.io托管的外部API。
在开始之前，需要设置好开发环境。扩展程序的manifest.json文件用于收集Chrome加载扩展程序所需的所有基本信息。下面展示了即将开发的扩展程序的manifest.json文件。
{
"manifest_version": 2,
"name": "天气预报",
"description": "这里填写扩展程序描述",
"version": "1.0",
"browser_action": {
"default_icon": "clear-day.png",
"default_popup": "popup.html"
},
"permissions": [
"geolocation",
"alarms",
""
],
"background": {
"scripts": ["background.js"],
"persistent": false
}
}
在manifest.json文件中，定义了扩展程序的名称、描述、版本等基本信息。此外，还声明了需要的权限，包括地理位置、闹钟和对所有URL的访问权限。这些权限允许在不需要每次都询问用户的情况下使用地理位置API，使用Chrome闹钟API来安排任务，以及访问所有URL。
接下来，来看background.js文件，这是扩展程序的后台服务，负责获取数据并更新工具栏按钮的图标。在该文件中，定义了API密钥、地理位置函数、JSON解析函数和Chrome扩展程序监听器。
var APIKEY = '6ee8de3e1a315894761e9006065cffde';
var latitude = 0;
var longitude = 0;
var lastResult = null;
function getLocation(callback) {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
}
if (callback) {
callback();
}
}
function showPosition(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
getJSON('https://api.forecast.io/forecast/' + APIKEY + '/' + latitude + ',' + longitude + '?units=si⟨=pt&exclude=minutely,hourly,daily,alerts,flags', function(result) {
chrome.browserAction.setIcon({path: "/" + result.currently.icon + ".png"});
lastResult = result;
});
}
function getJSON(url, callback) {
var x = new XMLHttpRequest();
x.open('GET', url);
x.responseType = 'json';
x.onload = function() {
callback(x.response);
};
x.send();
}
function showError(error) {
var statusDiv = document.getElementById("status");
switch(error.code) {
case error.PERMISSION_DENIED:
console.log("用户拒绝了地理位置请求。");
break;
case error.POSITION_UNAVAILABLE:
console.log("位置信息不可用。");
break;
case error.TIMEOUT:
console.log("获取用户位置的请求超时。");
break;
case error.UNKNOWN_ERROR:
console.log("发生了未知错误。");
break;
}
}
chrome.runtime.onInstalled.addListener(function() {
chrome.alarms.create("forecast", {delayInMinutes: 0, periodInMinutes: 10});
});
chrome.alarms.onAlarm.addListener(function(alarm) {
getLocation();
});
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.action == "getCurrentForecast") {
getLocation(function() {
sendResponse(lastResult);
});
}
});
在background.js文件中，定义了几个监听器，包括在扩展程序安装或更新时运行的onInstalled监听器，以及在闹钟达到设定时间时运行的onAlarm监听器。此外，还有一个onMessage监听器，用于处理来自弹出窗口的消息。
弹出窗口是在点击扩展程序图标后打开的，它由HTML、CSS和JavaScript组成，非常简单。popup.html文件包含一个显示当前天气的图像、一个显示描述的div和一个显示温度的div。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="popup.js"></script>
<link href="popup.css" rel="stylesheet">
</head>
<body>
<img id="ico"/>
<div id="status">加载中...</div>
<div id="temperature"></div>
</body>
</html>
popup.css文件定义了弹出窗口的样式，而popup.js文件则处理弹出窗口的加载和数据显示。
function sendMessage() {
chrome.runtime.sendMessage({action: "getCurrentForecast"}, function(response) {
if (response == null) {
setTimeout(sendMessage, 2000);
} else {
showResult(response);
}
});
}
function showResult(response) {
var statusDiv = document.getElementById("status");
var icoImg = document.getElementById("ico");
var temperatureDiv = document.getElementById("temperature");
statusDiv.textContent = response.currently.summary;
temperatureDiv.style.display = "block";
temperatureDiv.textContent = response.currently.temperature.toString().split('.') [0] + "˚C";
icoImg.style.display = "block";
icoImg.src = chrome.extension.getURL("/") + response.currently.icon + ".png";
}
document.addEventListener('DOMContentLoaded', sendMessage);