chrome定時自動重新整理網頁外掛?

下面和大家分享怎麼開發一個chrome定時自動重新整理網頁的外掛,

1,這個可能需要的chrome外掛開發的基礎了。

2,本例子不難就是選擇一個時間週期,然後重複的重新整理頁面。

工具/原料

電腦

chrome瀏覽器

方法/步驟

這裡是清單檔案,關於chrome的清單檔案你可以百度一下,這裡麵包含的指定頁面的位置,併為外掛指定了一個起始的圖示,還有最重要的授權,如果不對外掛授權那麼外掛將無法執行,當然還用應用的名字,版本等資訊。

chrome定時自動重新整理網頁外掛

先來看看外掛的程式碼部分,演示的效果在後面哦。這裡是定義了幾個量,一會後面的時候會使用到,比如指定了兩個圖片作為外掛的啟動和停止狀態圖示,這裡還包含了一個updateIcon方法。這個方法主要就是在啟動或停止的時候修改外掛的圖示,所以把ta單獨提取出來,後面這一張就監聽標籤頁切換的時候也要做執行下修改圖示,因為我們的自動重新整理外掛是針對每一個頁面的,不能全部都重新整理。

chrome定時自動重新整理網頁外掛

chrome定時自動重新整理網頁外掛

下面這個就主方法了,在這裡接收前面傳過來的引數,比如選擇了週期為兩秒,這裡會得到標籤頁,然後每兩秒就去update標籤頁一次,這裡分為了幾種情況,有啟動,停止,還有一個是保持狀態的,然每次重新整理後外掛的圖示和狀態都能定位到剛才選擇的。

chrome定時自動重新整理網頁外掛

下面這個是前臺的js檔案中的內容,這裡麵包含了寫公共方法,還有從頁面中獲得選擇的時間週期,還有監聽是哪個按鈕被點選了,是啟動還是停止等操作,並且加入getConf這個方法,作用就是獲取外掛當前的執行狀態。

chrome定時自動重新整理網頁外掛

chrome定時自動重新整理網頁外掛

chrome定時自動重新整理網頁外掛

這裡是html檔案,就是外掛彈開的頁面中要顯示的東西,這裡我們使用佈局比較規整的table標籤,並且加入了一些美化的css樣式。通知還默認了一些時間週期,這裡可以加入更多的,比如一個小時,別且value值的單位為秒。

chrome定時自動重新整理網頁外掛

chrome定時自動重新整理網頁外掛

最後是效果展示,當把外掛安裝到瀏覽器的時候,你會在瀏覽器的右側看到一個圖示,就像圖中那樣,這裡預設情況下外掛的圖示是黑色的,單擊後會看到第二幅圖,這裡可以選擇時間週期,然後點選衝動按鈕,這時按鈕的圖示改變,變成的發亮的狀態,說明自動重新整理已經啟動,你也可以點選停止來終止重新整理。

chrome定時自動重新整理網頁外掛

chrome定時自動重新整理網頁外掛

chrome定時自動重新整理網頁外掛

注意事項

chrome開發基礎

網頁, 頁面, 外掛, 週期,
相關問題答案