搜尋引擎快捷導航

使用方法 ：下載crx副檔名檔案，拖入chrome應用管理介面即可

編寫一個簡單的chrome外掛（教程）

1. 實現效果：

2. 簡單理解：chrome擴充套件程式就是一個web應用，小型網站，只不過是在chrome上多了個快捷方式

3. 必備知識(初級即可)：

html
css
javascript

4. 必備工具: 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"
  }  
}

引數說明:

1. name 外掛名稱
2. version 外掛的版本號
3. manifest_version 指定清單檔案格式的版本, 2就OK了
4. description 外掛描述
5. icons 外掛圖示，PNG格式， 需準備三個圖示檔案: 16x16（擴充套件資訊欄） 48x48（擴充套件管理頁面） 128x128（用在安裝過程中）
6. 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 –> 更多工具 –> 擴充套件程式 -> 開啟“開發者模式”

有兩個方法：

1. 載入已解壓的擴充套件程式 -> 將資料夾chrome-search-tool 拖入就行（多用於除錯，修改檔案後重新整理即可）
2. 打包擴充套件程式 -> 選擇打包擴充套件程式資料夾的路徑 -> 生成crx副檔名的檔案 -> 拖入chrome