Chrome Extension 小試牛刀

 

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

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

 

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

要解決的問題:

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

解決方案:

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

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

操做記錄:

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

 

 

 

 

點擊自動瀏覽後,會自動在該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文件主要是對該彈出頁進行操做。spa

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

 

 

 

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

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

 

處理網頁數據的頁面邏輯

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

必定要有return true.

 

 

 

寫在最後:

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

 

 

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

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

相關文章
相關標籤/搜索