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

空白__發表於2018-08-15
Chrome套件

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

>暫時部落格還沒有增加下載檔案功能，之後會把檔案上傳到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檔案按住，直接按照箭頭拖進擴充套件程式頁面中，就會看到新增提示


在新增擴充套件程式之後，我們再新建一個頁面，是不是發現現在新建頁面已經是自己這個介面了呢？

4.新增白名單

在新版的chrome中，chrome會自動遮蔽第三方擴充套件程式，也就是我們自己載入的擴充套件程式，那麼我們就需要把這個介面設定進白名單了
按照以下步驟就可以實現了~
chrome.adm檔案我也已經放在了XX目錄下~
http://blog.csdn.net/jnxxhzz/article/details/78542360

那麼以上，就是做一個自己的擴充套件介面的所有步驟了，是不是挺簡單的呢hhh就算不會html也沒有問題。

相關文章