寫在前面
本篇教程適用於chrome瀏覽器以及一系列類似360極速瀏覽器等使用chrome內核的瀏覽器
你至少需要點亮了以下技能點：
- html
- js
- json
儘量需要以下技能點：
- css
- jquery
- vue
chrome插件是什麼
我們經常稱呼的chrome插件更準確的名字是Chrome Extension，可以理解成一個依附於chrome瀏覽器，用於增強瀏覽器功能的一個微型軟件。
怎麼安裝插件
我們所下載的插件，都會是一個後綴爲crx的壓縮文件，在chrome之前的版本可以直接將這個文件拖拽入瀏覽器安裝，但是最新的版本出於安全問題考慮已經不支持這種方法，如果你已經寫好了一個插件，則需要按照下面這樣的方法來導入：
-
打開擴展程序的設置頁面
![點開設置頁面]()
-
打包擴展程序
首先打開開發者模式（在接下來的時間這個按鈕要一直開着），然後點擊打包擴展程序
然後選擇打包擴展程序（第一次打包時不需要選擇私鑰文件，如果之後需要重新打包，則必須要選上私鑰文件）
然後會發現在目錄下生成了這樣的兩個文件，其中crx就是我們的插件，下面的pem文件則是私鑰，來保證我們反覆打包時更新的是同一個項目
- 加載插件
選擇我們的項目文件夾，然後點擊確定即可，chrome會自動加載並啓動插件
動手寫一個小demo
爲了讓大家對chrome插件有一個直觀的認識，這裏先大概瞭解一下怎麼寫一個簡單的chrome插件
首先新建一個文件夾作爲我們的項目根目錄，然後新建這樣兩個文件：manifest.json和popup.html
manifest.json可以理解成項目的配置文件，popup.html我們等會兒就能看到它是幹什麼的了
先配置manifest.json，按照如下的內容寫：
{
"name": "demo",
"manifest_version":2,
"version": "1.0.0",
"description": "a little demo",
"browser_action":
{
"default_popup": "popup.html"
}
}
然後寫popup.html頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo</title>
</head>
<body>
<h1>Hello World!</h1>
<hr>
</body>
</html>
最後我們就可以按照上面介紹的步驟來加載我們的插件了，加載完畢後就是下圖的樣子，以後我們有什麼更改可以直接點擊箭頭所指的按鈕來及時的更新，而不用重新加載一遍了
你會發現在瀏覽器右上角插件已經顯示出來了
點擊它，你會發現顯示正是我們在popup.html頁面裏所寫的內容
這樣，我們的小demo就結束了
下節預告
- manifest.json的屬性含義
- 項目中各種文件的含義
最後，歡迎關注我的github: https://github.com/mayoi7
謝謝