<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Designsor &#187; 天气预报浏览器插件</title>
	<atom:link href="http://www.designsor.com/tag/%e5%a4%a9%e6%b0%94%e9%a2%84%e6%8a%a5%e6%b5%8f%e8%a7%88%e5%99%a8%e6%8f%92%e4%bb%b6/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.designsor.com</link>
	<description>End Web Developer&#039;s Blog</description>
	<lastBuildDate>Sat, 14 Jan 2012 02:35:12 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>额，初学chrome扩展制作……</title>
		<link>http://www.designsor.com/2010/05/28/chromeplug/</link>
		<comments>http://www.designsor.com/2010/05/28/chromeplug/#comments</comments>
		<pubDate>Fri, 28 May 2010 13:50:06 +0000</pubDate>
		<dc:creator>xiaojue</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[chrome扩展入门]]></category>
		<category><![CDATA[chrome插件API]]></category>
		<category><![CDATA[chrome插件制作]]></category>
		<category><![CDATA[天气预报浏览器插件]]></category>

		<guid isPermaLink="false">http://www.designsor.com/?p=774</guid>
		<description><![CDATA[好吧，还是应了史努比的，扩展好了……其实我丫就是plug多了…… 看下截图吧，很简单的一个小应用，还没完全做好，但是有了小雏形，激动是当然的了。 哈，找了个最简单的例子，IP地址查询，城市所在地查询，当日天气查询，嗯，简单的一个小扩展。主要是想了解下chrome的插件机制，虽然制作这个小例子根本没用到它里面的很多功能，而且很多功能我也还没有去学，只用了大概一下午的时候，就制作出了个扩展，可想而知chrome的扩展是多么容易上手啊。以后肯定会火。 这个截图是我本地的扩展安装截图，我还想把未来5天或者最少也要把第2天的天气加进去，还有手机号所在地查询功能，火车票飞机票查询加进去再发布出来吧。所以安装地址就不给了。 我学习的文档地址分享下： http://code.google.com/chrome/extensions/docs.html 然后简单说下我用到的代码和具体的一些chrome插件上手方面的知识。因为在我看文档的时候也没发现太多讲的很明白的教程，其实真的不难，仔细看文档都有说明。 chrome插件的文件结构：必须要有一个manifest.json文件。官方格式如下： { // Required “name”: “My Extension”, “version”: “versionString”, // Recommended “description”: “A plain text description”, “icons”: { &#8230; }, “default_locale”: “en”, // Pick one (or none) “browser_action”: {&#8230;}, “page_action”: {&#8230;}, “theme”: {&#8230;}, // Add any of these that you need “background_page”: “aFile.html”, “chrome_url_overrides”: {&#8230;}, “content_scripts”: [...], “minimum_chrome_version”: [...]]]></description>
			<content:encoded><![CDATA[<p>好吧，还是应了史努比的，扩展好了……其实我丫就是plug多了……</p>
<p>看下截图吧，很简单的一个小应用，还没完全做好，但是有了小雏形，激动是当然的了。</p>
<p><img class="alignnone" title="chromeplug" src="http://www.designsor.com/wp-content/uploads/2010/05/chrome.jpg" alt="" width="318" height="180" /></p>
<p>哈，找了个最简单的例子，IP地址查询，城市所在地查询，当日天气查询，嗯，简单的一个小扩展。主要是想了解下chrome的插件机制，虽然制作这个小例子根本没用到它里面的很多功能，而且很多功能我也还没有去学，只用了大概一下午的时候，就制作出了个扩展，可想而知chrome的扩展是多么容易上手啊。以后肯定会火。</p>
<p>这个截图是我本地的扩展安装截图，我还想把未来5天或者最少也要把第2天的天气加进去，还有手机号所在地查询功能，火车票飞机票查询加进去再发布出来吧。所以安装地址就不给了。</p>
<p>我学习的文档地址分享下：</p>
<p><a href="http://code.google.com/chrome/extensions/docs.html" target="_blank">http://code.google.com/chrome/extensions/docs.html</a></p>
<p>然后简单说下我用到的代码和具体的一些chrome插件上手方面的知识。因为在我看文档的时候也没发现太多讲的很明白的教程，其实真的不难，仔细看文档都有说明。</p>
<p>chrome插件的文件结构：必须要有一个manifest.json文件。官方格式如下：</p>
<blockquote><p>{<br />
// Required<br />
“name”: “My Extension”,<br />
“version”: “versionString”,</p>
<p>// Recommended<br />
“description”: “A plain text description”,<br />
“icons”: { &#8230; },<br />
“default_locale”: “en”,</p>
<p>// Pick one (or none)<br />
“browser_action”: {&#8230;},<br />
“page_action”: {&#8230;},<br />
“theme”: {&#8230;},</p>
<p>// Add any of these that you need<br />
“background_page”: “aFile.html”,<br />
“chrome_url_overrides”: {&#8230;},<br />
“content_scripts”: [...],<br />
“minimum_chrome_version”: “versionString”,<br />
“options_page”: “aFile.html”,<br />
“permissions”: [...],<br />
“plugins”: [...],<br />
“update_url”: “http://path/to/updateInfo.xml”<br />
}</p></blockquote>
<p>具体的参数说明可见API文档：<a href="http://code.google.com/chrome/extensions/manifest.html" target="_self">http://code.google.com/chrome/extensions/manifest.html</a></p>
<p>根据这个类似json格式一样的配置文件chrome会载入你的扩展程序，然后具体到我使用的页面主要有popup.html还有background.html俩个页面，一个是点击扩展图标的弹出页面，一个就是从扩展开始就一直后台运行的主程序页面。</p>
<p>回过头来看下我制作的几个功能，IP,地址,天气，肯定是访问了外部的API或者数据了。噢，忘记说了chrome的扩展是完全由css html javascript来制作的噢。而且ajax没有跨域限制，只要你设置了相应的配置就OK。很棒。</p>
<p>具体思路就是扩展访问外部api然后处理结果，返回给popup页面展示给用户，OVER。</p>
<p>具体的到刚才截图的主要代码亮一下，写的不太好，主要是卡在了编码正则那一块，后来统一了所有页面的编码就OK了。嗯，都需要是utf-8的……</p>
<p><a href="http://pastebin.com/xCNreTT0" target="_blank">popup.html页面代码</a>,<a href="http://pastebin.com/shpmkzGj" target="_blank">background.html页面代码</a>。</p>
<p>只用到了个localStorage类似全局变量对象的一个东西，就实现了。基本是2个页面数据互相交互的桥梁，然后是一个监听函数监听数据是否完成加载和处理，如果成功则返回给popup页面即可。</p>
<p>具体代码可以看下，注释没怎么写，因为真的是很简单。。。</p>
<p>嗯，继续做，加功能，V。第一次chrome插件制作经验分享……</p>
<p>最后的PS:chrome里的HTML5 CSS3支持的都非常好，可以尝试使用噢~比如HTML5的websql或者HTML5新加的那几个媒体标签，再或者绘图标签和CSS3动画特效，都是可以完全应用进去的哈……：）好玩。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.designsor.com/2010/05/28/chromeplug/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

