園子-[閃存]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 @劉小豬 反饋插件下載鏈接地址錯誤!

 

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM