园子-[闪存]chrome插件

 

  题记:以前玩园子闪存的时候,有人提到说是闪存要是有个插件多好啊,之后我也觉得有个插件挺好的,要不然每次打开浏览器,要


翻好几次才能到达闪存, 很不方便,还有更重要滴原因,就是玩闪存滴童,鞋基本上都是上班时间,热闹热闹,据我长时间潜伏观察,有以下几种人

  1。服务器端coder(B/s):乘服务器部署项目阶段,飞速闪过鼠标来到闪存一目十行,然后一下一句闪,就走鸟!(本人就是这种,大多可能项

目比较庞大部署需要时间哎)。

  2.早上签到型:就是来到园子闪签到,然后就是走鸟,被boss压榨,被bug摧残,只能一心顾忌手头工作无暇顾忌闪存。

  3.纯属打酱油型:工作实属轻松交流交流撒(本人认为必要的交流还是必须的,不要让人一想到coder就是内向、孤僻、话少,只懂得码,切勿耽误工作)。

  4.同学:边学习边玩撒。

  5.新手报到:介个就是不说了,人来人往注册络绎不绝撒.

  6.刷星星+吐槽:自从dudu改变了园子的随机星星规则,这种现象少了。(本来插件想加入刷闪功能滴,但是一想介玩意会影响大家正常工作,同时对园子来讲也是垃圾data,果断放弃之)。

  7.广告主:介个不多说了,很多广告!

  好了,废话到此结束!不管你是上面哪种?如果你是上班时间玩介个,各种不方便吧,担心boss看见,担心leader看见,插件帮你解决不边,下面真像大揭秘、


  谈我们的正事,玩闪存的有福了,今天给大家亮相的就是个人纯手工为大家敲打出来滴,chrome闪存插件,其实这个版本好几天前都好了,

为何迟迟不发呢?  一:就是最近工作各种忙。二:就是个人认为还不完善,需要修改!本来想完善滴更好滴撒,结果后来发现园子闪存解析

的html复杂度还是很高的,尤其是chrome 插件禁止html标签中禁止出现onclick,等等事件调用方式!而园子回复基本都采用这种方式来交互

无疑难度大大提高(本人玩java滴,不善前端,园子没有提供api本来就难度大,只能模拟http,建议园子开放api撒),搞这个的主要目的不是为了介个

插件,主要目的还是为了想了解一下chrome插件的实现机制,关于这些我这里会为大家带来我的理解,我学习体验!

 

  蛋都扯到这里,下面上图!再为大家重点介绍chrome插件开发注意事项,没玩过介个滴童鞋,百度,google基本很少能找到实例,大多

都是照搬翻译官方文档,当然官方也提供有例子可供下载(需要下载滴亲,移步这里http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/)。

 

  

 

  

  献丑了,在未审批情况下借用园子官方ioc,罪过罪过,不知道dudu看见能否开恩撒?如有侵权,亲,告知即可删除!

  插件使用须知:

  1.使用前,亲!确保您使用的是chrome浏览器。

  2.该插件仅供博客园-闪存使用,使用前,亲,检查您是否持有园子ID

  3.该插件需要用户记录登陆状态(保存密码账号登陆,即本地cookie存有园子密钥,各位放心保存吧,园子已经禁止修改cookie,所以别人无法盗用),才能安装使用。时间问题,没有通过chrome插件机制检测cookie,所以用的时候保证你的浏览器记录了账号密码。

  注意事项:

  1.该插件仅仅在最新版chrome插件下测试,其他chrome版本不能确保良好运行,敬请谅解!

  2.该插件完全免费,尚未发布chrome appstor,下载亲,走这里传送门(http://pan.baidu.com/share/link?shareid=495395&uk=1730420143由于园子无法上传该格式的文件,我转战各大门户网盘,天朝滴带宽伤不起啊!为了上传这个个小玩意,花了好大滴力气,目测了一下百度网盘网速较低的情况下基本无法读取文件,比较垃圾,最后腾讯是不是使用了传说中的P2P技术有待考量,上传成功!^_^<<<)。

  免责声明:

  1.该插件完全绿色,无毒,无公害,不含任何窃听隐私,如不放心,可以各种杀毒扫描。

  2.使用过程您电脑出现各种呕吐,下泄,感冒,发烧,禽流感,均与本人无关!

  ps:插件纯属基本功能,提供发布闪存,查看闪存信息(过滤回复,如需交流,亲!转战官方闪存页面),页面显示数据30条数据。

  安装使用:

  1.打开chrome——》工具———》扩展程序——》直接将下载到滴,YuanZi-Beta1.0.crx拖进去,提示你是否安装,确认即可看到右上角园子logo。(由于截图上传龟速只能文字表述,不清楚滴,直接发问,或者google)。

  

  

  揭秘:

  扫盲通道1+官方翻译文档:http://open.chrome.360.cn/html/dev_match_patterns.html(三百六翻译chrome官方文档,英文不好滴,亲,有福了撒!)

  扫盲通道2++官方原版文档:https://developer.chrome.com/extensions/getstarted.html(英文好滴,亲,官方原版自己研读撒!)

  1.chrome插件结构:

  

   以上为闪存插件基本文件,其中

  manifest.json 为chrome插件主配置文件,所有的配置都需要在这里配置。 

  popup.html:相信你看完上面的文档已经知道了,就是点击图标显示出来的,气泡页面,就是所谓的view。

  popup.js:就是业务逻辑代码。

  favicon.ico:介个就是需要再chrome浏览器上显示的图标,我试过png也可以。

  以上的文件就是chrome插件开发的基本文件要素.其中有一个叫属性叫"background_page"(在manifest.json文件里配置):: "background.html" 这里我没有用到,看过扫盲滴童鞋知道了吧!介个东东呢就是维护chrome插件滴主线程.

   background page :用于保存插件的主要逻辑, 插件的逻辑分为: page action,browser action两种,,background.html文件的js同时控制两种action,action可以理解为动作,也就是浏览器表现出来的行为,如弹出窗一样 browser_action 包括 a tooltip, a badge, and a popup.background.js就是在你没有点击chrome插件的logo情况下,依然运行滴,说白了就是只要chrome一启动这玩意就运行了!比如:天气的提示气泡。基本介绍到这里。

 

  下面谈谈注意事项:

  1.大家都知道jquery前端库用起来相当方便,所以chrome插件开发也支持前端库,但是用的时候必须注意,如果逻辑在popup.js中,想要使用jquery,首先要将jquery引入popup.html,然后再引入popus.js。这样你在popus.js中完全可以使用jquery来挥毫泼墨了,让你用编辑器纯手工敲打javascript,我反正用习惯了jquery确实不习惯原生(从工作的方便角度讲)!

  2.跨域问题.我在敲打闪存插件的第一件大问题就是跨域问题,后来研读了chrome文档,知道在manifest.json只需要配置"permissions": ["http://*/*"],这个是chrome插件机制提供的一个权限匹配规则,为了方便起见我这里索性就将所有的http域放开了。如果你想更多了解规则,亲,回到扫盲通道修炼,这里不再赘述了!不敢误人子弟撒!一切官方标准。

  3.这些文件你都配置好了,逻辑写好了,如何安装运行呢?其实很简单,创建一个文件夹,名字随便起,到tool-->扩展程序,你会看到有:加载正在开发的程序,打包扩展程序。前者是热部署方便开发中修改即可ctrl+R运行测试,后者则是chrome会将其压缩成一个.pem文件,一个crx文件,前者是后续更新是需要密钥,后者即使生成滴app,拖到你的扩展应用程序页面即可安装!

  4.chrome 插件禁止html标签出现事件调用!eg:<input type="button" name="submit" onClick="XXX()">,不允许这样调用,大家可以采用jquery或者,js文件调用机制!

  ps:chrome插件还有更多的想,events处理,cookie处理,chrome.history,标签页,视窗,纵横涵盖很多机制!读者深入研究移步官方。谢谢~~~  

  

  来园子好久了,没有写多少技术文章,后续我会补上我的工作心得!欢迎关注!google不到的技术文章哦!走别人不走滴路!解决别人没有遇到过的问题,写别人没有写过滴文章!

  感谢@_nil @刘小猪 反馈插件下载链接地址错误!

 

  

 

posted @ 2013-04-28 08:38  Beyond-bit  阅读(2576)  评论(32编辑  收藏  举报