1.Chrome插件開發基礎

開發Chrome插件很簡單，只要會基本的前臺技術HTML、CSS、JS就可以開發了。

Chrome插件一般包括兩個HTML頁面background和popup。

background頁面只在啟動瀏覽器加載插件時載入一次，它不直接顯示出來而是在后臺運行。

它包含了插件的主要邏輯，收集或處理的結果可以保存到全局變量localStorage中傳遞給popup

頁面。popup頁面就是點擊插件圖標后彈出的頁面，將用戶需要的數據展示出來或者與用戶交互。

此外插件還應該包含有CSS和JS文件以及一些圖片文件。插件的相關配置都保存到一個叫做

manifest.json的文件中，里面的配置是以JSON數據格式保存的。

本文這個天氣預報插件的源代碼結構如下：

myplugin

|--bg.html

|--popup.html

|--manifest.json

|--img

| ? ? |--icon.png

|--js

| ? ? |--jquery-1.7.2.min.js

|--style

|--popup.css

2.實時獲得天氣預報信息

首先通過http://61.4.185.48:81/g/獲得城市編號。注意，這個URL返回的是一個JS腳本，

其中變量id保存的是城市編號。之后通過http://m.weather.com.cn/data/[id].html獲得

城市天氣預報。這個URL返回的是JSON數據格式，如下：

{

"weatherinfo":

{

"city":"北京",

"city_en":"beijing",

"date_y":"2012年5月6日",

"date":"",

"week":"星期日",

"fchh":"08",

"cityid":"101010100",

"temp1":"31℃~19℃",

"temp2":"28℃~19℃",

"temp3":"29℃~18℃",

"temp4":"27℃~18℃",

"temp5":"23℃~14℃",

"temp6":"25℃~15℃",

"weather1":"晴轉多云",

"weather2":"陰",

"weather3":"多云",

"weather4":"多云",

"weather5":"多云轉陰",

"weather6":"陣雨轉多云",

"img1":"0",

"img2":"1",

"img3":"2",

"img4":"99",

"img5":"1",

"img6":"99",

"img7":"1",

"img8":"99",

"img9":"1",

"img10":"2",

"img11":"3",

"img12":"1",

...

}

}

我們在bg.html中定時地獲得到城市的天氣信息，保存到全局變量localStorage中。

之后用戶點擊插件按鈕時就可以通過popup.html看到實時的天氣情況了。

3.jQuery基礎

jQuery功能很多很強大，本文例子中主要用jQuery來簡化Ajax調用，如getScript和get函數，

以及parseJSON函數將JSON字符串解析成JS對象，另外就是$("#id")對DOM對象的訪問。

4.代碼實現

具體實現起來還要注意幾點：

一是localStorage不能直接保存解析好的JSON對象，因此bg.html要將字符串保存localStorage

中，popup.html自己解析后顯示到頁面上。

二是要在manifest.json中將天氣網站配置到permission中，才可以在bg.html中跨域訪問它。

manifest.json

{

"name": "My First Extension",

"version": "1.0",

"description": "The first extension that I made",

"permissions": ["tabs", "notifications","http://m.weather.com.cn/*"],

"background_page": "bg.html",

"browser_action": {

"default_icon": "img/icon.png",

"default_popup": "popup.html"

}

}

bg.html

weather

function init() {

//$id = "101070201";//此處是大連的城市ID，可以去weather.com.cn找到對應的weather city ID

//$url = "http://m.weather.com.cn/data/" + $id + ".html";//接口URL

// 利用下載服務器端腳本來間接解決跨域訪問問題

$.getScript(

'http://61.4.185.48:81/g/',

function(){

$.get("http://m.weather.com.cn/data/" + id + ".html",

function(data) {

window.localStorage.weather = data;

}

);

}

);

}

window.setInterval("init()", 5*60*1000);

popup.html

weather

function init() {

var data = $.parseJSON(localStorage.weather);

var weatherinfo = data["weatherinfo"];

var datearray = ["", weatherinfo["date_y"], "第二天", "第三天", "第四天", "第五天", "第六天"];

$("#cityname").html(weatherinfo["city"] + "城市天氣預報");

for (i = 1; i <= 6; i++) {

var divid = "#div" + i;

$(divid).append(datearray[i]).append("
");

var imgurl = "http://m.weather.com.cn/weather_img/" + weatherinfo["img"+(i*2-1)] + ".gif";

$(divid).append('').append("
");

$(divid).append(weatherinfo["temp" + i]).append("
");

$(divid).append(weatherinfo["weather" + i]);

}

}

---

popup.css

html {

height: 180px;

width: 700px;

}

#cityname {

text-align: center;

font-size: 20px;

font-weight: bold;

margin: 5px;

}

.weatherdiv {

float: left;

width: 15%;

margin: 5px;

}

5.調試\打包\安裝

關于Chrome瀏覽器下開發的調試：

普通頁面的調試：用console.log(obj);打印任意JS對象。之后在工具->JavaScript控制臺進行調試。

插件開發的調試：打開活動視圖bg.html。修改后，可以點擊“重新載入”重新加載我們的插件。

在Chrome瀏覽器中，選擇工具->擴展程序->開發模式->打包擴展程序

選擇插件的根目錄，打包后會產生壓縮安裝包crx和密鑰文件pem。

安裝方法很簡單，直接把crx文件拖到chrome瀏覽器窗口里就可以了。

6.最終效果圖

總結

以上是生活随笔為你收集整理的java 线程 插件_我的第一个Chrome插件：天气预报应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。