Chrome Extension 小試牛刀

 

自從有了Chrome以後,就喜歡上了這個瀏覽器,從此IE 886了。

以前作爬蟲,做登錄,做數據採集,做數據處理等各種功能,後來H5出來后,出現了,除了Session/Cookie 出了Local Storage,暫時還沒有更好的辦法獲取Local Storage。由於處理的數據比較少,所以決定研究一下Chrome Extension。

 

百度了一下Chrome Extension,可以通過Chrome Extension 官網進行學習,簡單上手。網址:

要解決的問題:

公司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,吭哧坑成的編程啦。

 

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※全國票選五大台東必買台東伴手禮最佳商品哪裡買的到?

※月子中心貴鬆鬆,找對到府月嫂省一半,更讓你事半功倍!!    

※女孩困擾找不到『i cup內衣』?不必擔心專業內衣網購平台嚨底家

※機場接送服務包括:大陸機場接送以及桃園機場接送服務。

※最美的渡假聖地!享受無敵海景小琉球民宿推薦,旅遊達人,教你怎麼玩~

※嚴選台中火車站周邊熱鬧景點-台中一中住宿優惠!

※各類招牌、海報、大圖輸出,急件製作施工!

您可能也會喜歡…