2021-05-12 14:32:11
chrome定時自動重新整理網頁外掛
2019-12-19 17:03:18
下面和大家分享怎麼開發一個chrome定時自動重新整理網頁的外掛，
1，這個可能需要的chrome外掛開發的基礎了。
2，本例子不難就是選擇一個時間週期，然後重複的重新整理頁面。
1
這裡是清單檔案，關於chrome的清單檔案你可以百度一下，這裡面包含的指定頁面的位置，並為外掛指定了一個起始的圖示，還有最重要的授權，如果不對外掛授權那麼外掛將無法執行，當然還用應用的名字，版本等資訊。
2
先來看看外掛的程式碼部分，演示的效果在後面哦。這裡是定義了幾個量，一會後面的時候會使用到，比如指定了兩個圖片作為外掛的啟動和停止狀態圖示，這裡還包含了一個updateIcon方法。這個方法主要就是在啟動或停止的時候修改外掛的圖示，所以把ta單獨提取出來，後面這一張就監聽分頁切換的時候也要做執行下修改圖示，因為我們的自動重新整理外掛是針對每一個頁面的，不能全部都重新整理。
3
下面這個就主方法了，在這裡接收前面傳過來的引數，比如選擇了周期為兩秒，這裡會得到分頁，然後每兩秒就去update分頁一次，這裡分為了幾種情況，有啟動，停止，還有一個是保持狀態的，然每次重新整理後外掛的圖示和狀態都能定位到剛才選擇的。
4
下面這個是前台的js檔案中的內容，這裡面包含了寫公共方法，還有從頁面中獲得選擇的時間週期，還有監聽是哪個按鈕被點選了，是啟動還是停止等操作，並且加入getConf這個方法，作用就是獲取外掛當前的執行狀態。
5
這裡是html檔案，就是外掛彈開的頁面中要顯示的東西，這裡我們使用布局比較規整的table標籤，並且加入了一些美化的css樣式。通知還預設了一些時間週期，這裡可以加入更多的，比如一個小時，別且value值的單位為秒。
6
最後是效果展示，當把外掛安裝到瀏覽器的時候，你會在瀏覽器的右側看到一個圖示，就像圖中那樣，這裡預設情況下外掛的圖示是黑色的，單擊後會看到第二幅圖，這裡可以選擇時間週期，然後點選衝動按鈕，這時按鈕的圖示改變，變成的發亮的狀態，說明自動重新整理已經啟動，你也可以點選停止來終止重新整理。
相關文章