[网页] - Google官方chrome插件入门教程
2010-04-21 13:55
656 查看
原文(英文):http://code.google.com/chrome/extensions/getstarted.html
来源(中文):http://www.javaeye.com/topic/648713
看见JE(JavaEye)上有了一篇这样的文章:http://www.javaeye.com/topic/646674内容是做的两个chrome插件,看见很多人对这个都感兴趣,小弟特别走网上看了一翻,终于找到了官方的chrome插件入门教程,下面是大概内容(如有不恰当的地方,多多见谅):
1.让你的浏览器准备就绪
不用多说,首先肯定是安装浏览器了,至于你是Windows,Linux,Mac?官方都有对应的下载。
2.创建并加载一个扩展
2.1.首先创建一个文件夹
2.2.在你的文件夹里面创建一个名为:manifest.json的文件,并且写下以下内容:
Json代码
2.3.将这个图标复制到你的文件夹
2.4.加载你的扩展
a.点击浏览器的
图标,并且选择Extensions
b.加入右上角的“Developer mode”前面是+,那么点击它,页面会添加几个按钮,并且+会变为-,
c.点击Load unpacked extension按钮,一个dialog窗口就弹出来了,
d.选择你最开始创建的文件夹,点击OK,(记住,不要放在文件目录有中文的地方,否则会报错,反正我放在桌面上就报错了)
做完以上步骤,就会出现如下的内容:
3.添加代码到你的扩展
3.1.编辑manifest.json,添加代码(只添加加粗的那一行):
Json代码
3.2.创建文件popup.html,并且写下以下代码:
Java代码
3.3.回到扩展管理页面,现在属性一下插件(reload),加载新版本的插件
3.4.点击右上角的插件图标,就会看见效果了,如以下图片:
PS:最后一步的时候,有时候会有点点慢,你点击图标后其实是在执行(当你鼠标移开的时候如果图标样式还是你鼠标一上去的时候那种样式,说明就是在运行了),我最开始还以为是我代码有问题呢,结果后来不经意间才发现这个问题,下面加上原文地址:http://code.google.com/chrome/extensions/getstarted.html
附上我的插件文件夹,在附件里面!
附件:http://files.cnblogs.com/hcbin/lib.rar
如果要生成chrome专用的插件安装包,那么就在扩展管理页面里里面点击pack extension按钮,然后选择插件目录,就可以了
来源(中文):http://www.javaeye.com/topic/648713
看见JE(JavaEye)上有了一篇这样的文章:http://www.javaeye.com/topic/646674内容是做的两个chrome插件,看见很多人对这个都感兴趣,小弟特别走网上看了一翻,终于找到了官方的chrome插件入门教程,下面是大概内容(如有不恰当的地方,多多见谅):
1.让你的浏览器准备就绪
不用多说,首先肯定是安装浏览器了,至于你是Windows,Linux,Mac?官方都有对应的下载。
2.创建并加载一个扩展
2.1.首先创建一个文件夹
2.2.在你的文件夹里面创建一个名为:manifest.json的文件,并且写下以下内容:
Json代码
{ "name": "My First Extension", "version": "1.0", "description": "The first extension that I made.", "browser_action": { "default_icon": "icon.png" }, "permissions": [ "http://api.flickr.com/" ] }
2.3.将这个图标复制到你的文件夹
2.4.加载你的扩展
a.点击浏览器的
图标,并且选择Extensions
b.加入右上角的“Developer mode”前面是+,那么点击它,页面会添加几个按钮,并且+会变为-,
c.点击Load unpacked extension按钮,一个dialog窗口就弹出来了,
d.选择你最开始创建的文件夹,点击OK,(记住,不要放在文件目录有中文的地方,否则会报错,反正我放在桌面上就报错了)
做完以上步骤,就会出现如下的内容:
3.添加代码到你的扩展
3.1.编辑manifest.json,添加代码(只添加加粗的那一行):
Json代码
... "browser_action": { "default_icon": "icon.png", "popup": "popup.html" }, ...
3.2.创建文件popup.html,并且写下以下代码:
Java代码
<style> body { min-width:357px; overflow-x:hidden; } img { margin:5px; border:2px solid black; vertical-align:middle; width:75px; height:75px; } </style> <script> var req = new XMLHttpRequest(); req.open( "GET", "http://api.flickr.com/services/rest/?" + "method=flickr.photos.search&" + "api_key=90485e931f687a9b9c2a66bf58a3861a&" + "text=hello%20world&" + "safe_search=1&" + // 1 is "safe" "content_type=1&" + // 1 is "photos only" "sort=relevance&" + // another good one is "interestingness-desc" "per_page=20", true); req.onload = showPhotos; req.send(null); function showPhotos() { var photos = req.responseXML.getElementsByTagName("photo"); for (var i = 0, photo; photo = photos[i]; i++) { var img = document.createElement("image"); img.src = constructImageURL(photo); document.body.appendChild(img); } } // See: http://www.flickr.com/services/api/misc.urls.html function constructImageURL(photo) { return "http://farm" + photo.getAttribute("farm") + ".static.flickr.com/" + photo.getAttribute("server") + "/" + photo.getAttribute("id") + "_" + photo.getAttribute("secret") + "_s.jpg"; } </script>
3.3.回到扩展管理页面,现在属性一下插件(reload),加载新版本的插件
3.4.点击右上角的插件图标,就会看见效果了,如以下图片:
PS:最后一步的时候,有时候会有点点慢,你点击图标后其实是在执行(当你鼠标移开的时候如果图标样式还是你鼠标一上去的时候那种样式,说明就是在运行了),我最开始还以为是我代码有问题呢,结果后来不经意间才发现这个问题,下面加上原文地址:http://code.google.com/chrome/extensions/getstarted.html
附上我的插件文件夹,在附件里面!
附件:http://files.cnblogs.com/hcbin/lib.rar
如果要生成chrome专用的插件安装包,那么就在扩展管理页面里里面点击pack extension按钮,然后选择插件目录,就可以了
相关文章推荐
- Google Chrome Extensions 官方教程 中文版
- Google发布Chrome官方扩展DOM Snitch 可发现网页代码漏洞
- Google正式推出Chrome+1插件,方便你为所有网页“+1”
- Google官方网页载入速度检测工具PageSpeed Insights 使用教程
- WebRTC的google官方入门教程
- 发布 Google Chrome插件教程
- Chrome插件开发入门教程
- Jmeter 快速入门教程(一) - 认识jmeter和google插件
- 发布 Google Chrome插件教程
- XPath Helper:chrome爬虫网页解析工具 Chrome插件图文教程
- Chrome插件开发入门教程
- 【XPath Helper:chrome爬虫网页解析工具 Chrome插件】XPath Helper:chrome爬虫网页解析工具 Chrome插件下载_教程_安装 - 开发者插件 - Chrome插件网
- Android OkHttp官方教程解析-彻底入门OkHttp使用
- Google官方AdSense技巧视频教程
- 阅读Android官方教程 Google Training 1.1 ----- Buiding Your First APP
- Firefox扩展开发 (插件开发) Extension开发 入门教程 5步走 五步走
- CSS网页布局入门教程3:一列固定宽度居中
- Google Guava官方教程
- Asp.Net MVC4.0 官方教程 入门指南之一-- 入门介绍
- Asp.Net MVC4.0 官方教程 入门指南之六--查看Edit方法和Edit视图