手把手教你做一個自己的chrome擴充程式

[目錄]
first.效果
1.收藏夾修改

(1).滑鼠移動到收藏夾上的動作效果
(2).收藏夾框
(3)百度搜尋框功能

2.右上文字修改
3.背景圖檔修改
4.添加白名單

>暫時部落格還沒有增加下載下傳檔案功能，之後會把檔案上傳到github上提供下載下傳，最近如果想要檔案的同學請QQ私聊我

https://github.com/jnxxhzz/chrome- 檔案放在這裡

first.效果

不上圖的都是廢話…具體效果如圖

左上角的時鐘呢，是不需要修改的，看起來像雪花的效果，其實是js庫中的粒子效果，也不需要修改

那麼關鍵是可修改的内容

1.時鐘下方的六個網頁跳轉框，也可以認為是收藏夾框…可以修改内容，修改跳轉位址（也就是點選後會進入的網頁），也可以移動位置

2.右上部分的所有字，也可以修改

3.背景圖檔修改

1.收藏夾修改

用記事本或者其他編輯器，打開XX.html這個檔案

接下來會看到很多你不認識的代碼…當然認識最好

當然~不認識沒有關系，我已經在每個可以修改的地方加上了注釋

(1).滑鼠移動到收藏夾上的動作效果

動作效果設定成了會變長一點點，這個變長的長度可以在這裡進行修改

隻要修改這個160px的數值就可以做到修改變成的長度，隻要把160換成其他數字即可，具體效果可以修改了之後關掉編輯器儲存，直接打開這個XX.html網頁檢視

(2).收藏夾框

在這部分我們會看到很長的四行代碼，我在這裡分割開了每個位置的收藏夾框，可修改的内容我也在後面用注釋寫清楚了，在第一行内有top和left屬性，這兩個屬性後的數值跟上面的數值一樣，隻要把數字修改掉，就能看到這些收藏夾框進行移動，當然你修改哪個框内的位置，移動的就是哪個框，總共存在6個框，左上右上，左中右中，左下右下。

top屬性是離界面頂部的距離

left屬性是離界面左邊的距離，記得不要把px這兩個字母删掉~

具體效果修改數字後儲存，直接打開網頁就可以看到

是以隻要修改這兩個數值，就可以對這些小框進行移動，放到自己想要的位置啦~

那麼其他的也如同注釋裡寫的一樣，比如第一個左上收藏框，我們可以看到這裡寫的是Bilibili，那麼我們可以通過修改Value後面雙引号内的内容，就可以修改這個框裡顯示的字了~當然雙引号記得不要删掉了

那麼跳轉位址也是一樣的，比如左上收藏框，我們隻要修改action後雙引号内的連結，就可以修改點選這個框後會跳轉去的頁面

比如把 http://www.bilibili.com 改成 http://www.baidu.com 那麼點選左上的收藏框，就會跳轉到百度界面啦

那麼當然，其他的五個收藏夾框，也是一樣的~

如果需要多增加幾個收藏框呢，隻要複制任意一個單獨收藏框的五行代碼，如上面的代碼圖，重新粘貼在我注釋的

“如果要增加收藏夾框，請粘貼在此行以上的空白處“

這一行以上，就可以了~修改方式也跟上述一樣

(3)百度搜尋框功能

這個功能我注釋掉了，具體效果如圖

這個空白的可輸入内容的框，就跟百度界面的搜尋框是一樣的功能，輸入完後回車，或者點選”GO“按鈕，就可以跳轉到搜尋界面啦如果你想要增加這個功能

那麼就把下圖中的注釋删掉即可

具體需要删除的兩行我也用中文寫出來了，将兩個删除此行所在的行全部删掉就可以啦，連同這四個字一起删掉~

2.右上文字修改

右上文字修改的檔案，一樣需要用記事本或者其他編輯器，打開assets/js/app.js檔案，也就是下圖中第一個檔案

打開這個檔案後呢，又會看到一堆奇奇怪怪的數字，不用管它們，直接拉到最底部

這裡呢也給出了注釋，如果你不喜歡我設定的在11點之前輸出good morning,11點~15點輸出good afternoon，15點~19點輸出good evening,19點到24點輸出good night，那麼你可以修改if内的數值，就是11,15,19這三個數值，可以修改，比如你想要在10點到14點輸出good afternoon，那你隻要把11修改成10,15修改成14，其他也一樣~

另外呢，我寫的輸出字母為Hello~

那麼如果你想要輸出成你的名字，比如我寫的Helle~hz，直接在雙引号内寫入就可以啦

3.背景圖檔修改

同樣的，在assets/img/檔案夾内，有兩張圖檔，隻要你把你想要的背景圖檔複制到這個檔案夾内，把名字修改為bg.jpg就可以啦，.jpg是字尾名，如果沒有顯示那麼在工具裡設定一下顯示就可以了~隻支援.jpg圖檔哦

好了，做完以上的東西後，隻要打開這個XX.html就可以看到這個屬于我們自己的界面了~

那麼接下來呢，我們需要把這個檔案夾做成chrome可以加載的擴充程式，這個指令檔案我已經寫好了，就是目錄下的XX.pem，這個當然不用管

我們打開chrome://extensions/ 擴充程式界面，勾選右上角的開發者模式

然後點選打包擴充程式，選中我們的目錄檔案夾也就是XX，當然檔案夾放在那個盤内無所謂，你隻要選中XX檔案夾就可以了，記得是選中，不需要點進去哦，隻要點選XX檔案夾，然後點确定就可以了

然後我們點選打包擴充程式，我們就會在XX檔案夾外面得到兩個檔案XX.crx和XX.pem

然後我們把這個XX.crx檔案按住，直接按照箭頭拖進擴充程式頁面中，就會看到添加提示

手把手教你做一個自己的chrome擴充程式