搜尋引擎快捷導航:一個簡單的chrome外掛(教程)
阿新 • • 發佈:2018-12-12
搜尋引擎快捷導航
使用方法 :下載crx副檔名檔案,拖入chrome應用管理介面即可
編寫一個簡單的chrome外掛(教程)
-
實現效果:
-
簡單理解:chrome擴充套件程式就是一個web應用,小型網站,只不過是在chrome上多了個快捷方式
-
必備知識(初級即可):
html
css
javascript
- 必備工具: chrome瀏覽器(本次使用的版本是 69)
第一步:初始化專案
專案檔案說明:
chrome-search-tool/ ├── manifest.json # 配置檔案 ├── popup.html # 彈出視窗 ├── icon.png # 擴充套件圖示 └── images # 靜態資原始檔(如images、css、js等)
第二步:編寫配置檔案
manifest.json
{
"name": "searchTool",
"manifest_version":2,
"version": "0.0.1",
"description": "便於搜尋的chrome外掛",
"browser_action": {
"default_icon": "icon.png" ,
"default_title": "搜尋集合工具",
"default_popup": "popup.html"
}
}
引數說明:
- name 外掛名稱
- version 外掛的版本號
- manifest_version 指定清單檔案格式的版本, 2就OK了
- description 外掛描述
- icons 外掛圖示,PNG格式, 需準備三個圖示檔案: 16x16(擴充套件資訊欄) 48x48(擴充套件管理頁面) 128x128(用在安裝過程中)
- default_locale 國際化支援,支援何種語言的瀏覽器,雖然官方推薦,不過我沒用
第三步:編寫popup頁面
<meta charset="utf8">
<base target="_blank" />
<style>
.main{
width: 100px;
height: 200px;
font-size: 18px;
text-align: center;
}
a{
text-decoration: none;
}
.title{
width: 100%;
font-size: 20px;
background-color: #E8E8E8;
}
img{
width: 18px;
height: 18px;
}
.links{
margin-top: 5px;
}
.links a{
width: 100%;
display: block;
margin: 4px 0;
color: black;
line-height: 25px;
}
.links a:hover{
background-color: red;
color: white;
}
.links img{
line-height: 25px;
}
.footer a{
font-size: 12px;
color: grey;
}
</style>
<div class="main">
<div class="title">搜尋導航</div>
<div class="links">
<a href="https://www.baidu.com/"><img src="images/baidu.ico" alt="">百度</a>
<a href="https://www.google.com.hk/"><img src="images/google.ico" alt="">谷歌</a>
<a href="https://cn.bing.com/"><img src="images/bing.ico" alt="">必應</a>
<a href="https://www.sogou.com/"><img src="images/sogou.ico" alt="">搜狗</a>
<a href="https://www.so.com/"><img src="images/so.ico" alt="">360</a>
</div>
<div class="footer">
<a href="https://www.pengshiyu.com/message.html">問題反饋</a>
</div>
</div>
其實就是html + css + javascript
備註:如果出現中文亂碼,記得在檔案頂部加入<meta charset="utf8">
,此方法和html編碼是一樣的,沒有什麼特別之處
第四步:配置圖示
可以百度圖片上找一張方塊圖片,最好找png格式的
第五步:打包安裝擴充套件程式
開啟Chrome –> 更多工具 –> 擴充套件程式 -> 開啟“開發者模式”
有兩個方法:
- 載入已解壓的擴充套件程式 -> 將資料夾
chrome-search-tool
拖入就行(多用於除錯,修改檔案後重新整理即可) - 打包擴充套件程式 -> 選擇打包擴充套件程式資料夾的路徑 -> 生成crx副檔名的檔案 -> 拖入chrome