65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 forecast.io API 的 Chrome 扩展

Rodrigo De Presbiteris (Presba)
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.67/5 (5投票s)

2015年4月30日

CPOL

4分钟阅读

viewsIcon

14719

在这篇文章中，我将向您展示如何创建一个简单的扩展，该扩展可以访问 forecast.io 托管的外部 API。

引言

通过定制 Chrome 的行为，我们可以改变与浏览器的交互方式，以及我们吸收所有相关信息的方式。

Chrome 最棒的一点是，它很容易创建出色的 Chrome 扩展。

RSS 阅读器和电子邮件通知等扩展在 Chrome Web Store 中最为常见。

在这篇文章中，我将向您展示如何创建一个简单的扩展，该扩展可以访问 forecast.io 托管的外部 API。

扩展的源代码可以在我的 github 上找到。

开始一个 Chrome 扩展

首先，设置您的开发环境非常重要。

manifest.json 文件用于汇总 Chrome 加载扩展所需的所有基本信息。

下面是我们将要开发的扩展所创建的 manifest.json 文件。

{
  "manifest_version": 2,
  "name": "Forecast.io",
  "description": "Here you should write the description of your extension",
  "version": "1.0",
  "browser_action": {
    "default_icon": "clear-day.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "geolocation",
    "alarms",
    "<all_urls>"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}
  • manifest_version = 必须设置为  2，因为 Chrome 18 已弃用版本 1
  • name = 扩展的名称
  • description = 扩展的描述
  • version = 扩展的版本。此属性用于比较已安装版本与已发布版本以便自动更新。
  • browser_action = 用于将我们的扩展图标放在工具栏上。
  • permissions = 我们必须声明我们的意图。
  • background = 用于在后台运行代码。在我们的例子中，是获取天气数据。

我们定义了 geolocation、alarms 和 <all_urls> 权限。

geolocation 权限允许我们使用地理定位 API，而无需每次需要获取用户位置时都询问用户，因为用户在安装扩展时已同意此条件。

alarms 权限允许我们使用 chrome.alarms API，该 API 负责安排我们 Chrome 扩展所需的任务。

<all_urls> 权限要求我们的 Chrome 扩展访问所有 URL。此类权限必须谨慎使用，应仅限于我们将要使用的 URL。（例如，“http://*.google.com/"，您可以在 https://developer.chrome.com/extensions/match_patterns 查阅文档。）

后台服务

在我们的扩展中，后台服务负责获取数据并更新工具栏上按钮的图标。

background.js 文件包含 API 密钥、地理定位函数、JSON 解析函数以及 Chrome 扩展监听器。

下面是 background.js 文件。

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&lang=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("User denied the request for Geolocation.");
            break;
        case error.POSITION_UNAVAILABLE:
            console.log("Location information is unavailable.");
            break;
        case error.TIMEOUT:
            console.log("The request to get user location timed out.");
            break;
        case error.UNKNOWN_ERROR:
            console.log("An unknown error occurred.");
            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);
		});
	}
});

在此文件中，我们有一些监听器，详细说明如下：

  • onInstalled

在扩展安装以及扩展或 Chrome 更新时运行。

在此监听器中，我们创建了一个警报，每 10 分钟触发一次。

  • onAlarm

当警报到达预设时间时运行。

此时，我们调用 getLocation() 函数，该函数负责获取地理位置。

在收到地理位置后，调用 showPosition() 函数，根据当前天气更新工具栏上的操作按钮。

  • onMessage

从弹出窗口接收消息时运行。当我们在工具栏上单击扩展图标时，会打开一个弹出窗口，显示与当前天气相关的图像、天气描述以及摄氏度温度。

我将在下一节详细解释这个流程。

弹出窗口

在单击扩展图标后打开弹出窗口。

它由 HTML、CSS 和 Javascript 构建，因此构建扩展非常简单。

popup.html 文件具有非常简单的 HTML 代码，仅显示当前天气的一张图像、一个用于显示描述的 div 和另一个用于显示温度的 div。

popup.html 文件如下。

<!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">Carregando...</div>
 <div id="temperature"></div>
 </body>
</html>

popup.css 文件如下。

body {
    text-align: center;
    width: 300px;
    height: 300px;
    font-size: 18pt;
    font-family: Tahoma;
    vertical-align: middle;
}

#ico {
    display: none;
    margin: 0 auto;
}

#temperature {
    display: none;
    font-size: 26pt;
}

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);

DOMContentLoaded 监听器负责处理弹出窗口的加载。

当弹出窗口打开时，Chrome 发送 DOMContentLoaded 事件，并且我们通过该事件向后台发送消息，请求最后已知的数据。

如果响应不可用（表示我们还没有 API 响应），该函数会等待 2 秒然后重试。

当收到响应时，我们将其发送给 showResult 函数以在弹出窗口中显示结果。

Chrome 扩展安装

要安装 Chrome 扩展，您需要打开 Chrome 并在地址栏中键入 chrome://extension。

将打开一个页面，其中包含所有已安装的扩展，如下所示：

要启用开发者模式，您需要勾选“开发者模式”复选框。

勾选复选框后，您必须单击 **Load unpacked extension…** 按钮。

选择您的扩展保存的文件夹。

如果一切顺利，您的扩展应该已经加载，并且 Chrome 工具栏上应该会创建一个图标，希望它正在工作。

结论

该扩展可以演变成在每次天气变化后显示温度变化警报，或者您可以存储历史记录，或者显示当天的最高和最低温度，这取决于您。

如果您更改或改进了扩展，请与我和其他读者分享。您可以在此帖子下方评论您的 github 链接以及对您所做工作的简要说明。

如果您有任何问题或建议，请在下方留言。

 

© . All rights reserved.