Chrome Extension 小試牛刀

 

自從有了Chrome之後，就喜歡上了這個瀏覽器，今後IE 886了。

之前做爬蟲，作登陸，作數據採集，作數據處理等各類功能，後來H5出來後，出現了，除了Session/Cookie 出了Local Storage,暫時尚未更好的辦法獲取Local Storage。因爲處理的數據比較少，因此決定研究一下Chrome Extension。

 

百度了一下Chrome Extension,能夠經過Chrome Extension 官網進行學習，簡單上手。網址: https://developer.chrome.com/extensions

要解決的問題：

公司OA使用了不少年了，其中的流程備案記錄不多關注查看，今天公司通知最近要檢查，確認你們是否都看了，不然會進行處罰。今天要解決的問題就是自動把全部的未查看過的抄送記錄，都確認爲已閱讀。

解決方案：

原本能夠經過SQL語句，修改數據庫的是否閱讀狀態。這是最近單的方式，可是和Chrome Extension 就沒有關係了。

因此仍是經過模擬的方式，經過點擊一個按鈕自動瀏覽本頁的全部標記爲未讀的記錄。

操做記錄：

進入流程抄送記錄，點擊【自動瀏覽】開始操做。

 

 

 

 

點擊自動瀏覽後，會自動在該Chrome頁面上打開多個瀏覽器頁籤顯示全部未讀的記錄

軟件開發中問題彙總：

怎麼使用Jquery

自動使用Juquery原來，對原生的js是愈來愈陌生了，寫Js第一件事就是下載一個Jquery用上。

 

 

 

 

在 manifest.json中配置對應的jquery路徑，而後在contentscript.js和background.js中就可使用Jquery了。

Chrome Extension的圖標怎麼設置呢？

看到上面manifest.json中的icons屬性了嗎？設置上對應的圖標便可。注意大小。

點擊Chrome Extension圖標，展現的頁面

這是一個特別特別簡單的html頁面，只有一個按鈕，最後加了一個index.js的js文件，必定要引用到最後。Js文件主要是對該彈出頁進行操做。

這個插件只有一個動做，就是點擊上面的【自動瀏覽】按鈕。

 

 

 

點擊【自動瀏覽】按鈕的邏輯

點擊按鈕後，按鈕顏色編成藍色，若是有其餘按鈕，則其餘按鈕字體顏色爲黑色，另外：點擊按鈕後，與當前網頁進行通信，返回頁面上全部沒有瀏覽記錄的ID,並用【；】分割。

 

處理網頁數據的頁面邏輯

經過jquery查詢當前頁面中全部的未讀記錄，遍歷並把全部的id用【；】分割。

必定要有return true.

 

 

 

寫在最後：

剛開始結束的時候，經歷了各類坎坷，

 

 

因爲是Chrome Extension與頁面的數據進行通信,各類搞不定，如今基本能夠經過這個模式化的界面與各類服務、http頁面等進行互操做了。

經過此次Chrome Extension的開發，不只從新熟悉了各類js，並且最重要的是，之後簡單的爬蟲，不再用打開vs，吭哧坑成的編程啦。