也可說是突然萌生出來的一個想法： 編寫一個Chrome插件。
前段時間發現Chrome浏覽器占用的系統記憶體相當的大。其實也對，随着現代web程式的功能日益強大和豐富，浏覽器吃記憶體是必然的。連office都有線上版的了，對比一下office2016的安裝包大小（2.41G），想想當初的windows XP安裝包大小也才700M。是以可想而知，線上版的office承載的功能之強大。這麼一看，感覺浏覽器頁越來越像一個作業系統了。這麼說下去，那麼浏覽器裡的插件豈不是就相當于我們平時安裝的應用軟體了。如果寫一個插件，是不是就好像寫了一個應用軟體。哇哦，想想覺得很高大上啊。
其實最終的目的，還是為了解決工作中的一些問題。比如目前開發項目的自動登入功能。
chrome擴充
Chrome擴充可以看做是一個迷你版的站點。它更多的是用來提供功能擴充，而不側重内容展示。是以，它的實際組成是一組html/CSS/script檔案。
認識 manifest.json
manifest.json
{
// Required
"manifest_version": , // manifest編寫規範版本，目前主流2
"name": "Extension Name", // 插件名
"version": "versionString", // 版本号
// Recommended
"default_locale": "en", // 預設編碼
"description": "A plain text description", // 插件描述
"icons": { // 插件下載下傳或浏覽時顯示的圖示，可選多種規格，建議128
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"browser_action": {
"default_title": "Chrome Test Tool", // 工具欄上的title
"default_icon": "images/logo.png", // 工具欄上展示的logo
"default_popup": "html/index.html" // 展示彈出的頁面
}, // 圖示顯示在浏覽器位址欄右邊，能在所有頁面顯示
// Optional
"author": "", // 插件作者
"content_scripts": [{ // 這兒加載的檔案，可以操作目标網站頁面的元素，不能使用chrome的api
"matches": ["http://www.baidu.com/*"],
"css": ["./css/mystyles.css"],
"js": ["./scripts/myscript.js"]
}]
}
開始實際操作
- 建立項目的根目錄
chrome-plugin
- 在chrome-plugin下建立manifest.json檔案。内如如上即可：
- 在chorme-plugin中建立html目錄，在這個目錄下，建立html檔案index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Chrome Tool</title>
<style>
body{
width: px;
height: px;
}
</style>
</head>
<body>
<p>This is a test page</p>
<script src="../scripts/app.js"></script>
</body>
</html>
- 建立腳本目錄scripts，在scripts下建立擴充檔案得JavaScript檔案
- app.js
- myscript.js
app.js主要是插件内部邏輯，它裡面的腳本不可操作目标站點的内容。具體代碼如下：
console.log('the app has run ......');
myscript.js是通過 content_scripts字段加載進來的。它裡面的腳本可以跟目标站點有互動，但是不能調用目标站點腳本中定義的方法。具體代碼如下：
function EnterKeyLogin(){
document.addEventListener('keydown', function(e){
if(e.keyCode === ){ DoLogin(); }
});
}
function DoLogin(){
//todo do login
};
EnterKeyLogin();
- 添加樣式檔案，先建立存放樣式檔案的目錄css，然後在該目錄下建立樣式檔案mystyles.css。問價内容如下：
body{
font-size: em !important;
}
- 建立images目錄，用于存放擴充用到的圖檔。我們這兒主要是是存放了擴充用到的logo。
至此，所有的檔案已經編寫完成了。剩下的就是如何添加到Chrome中。
在Chrome浏覽器右上角位置的三個小圓點下，選擇“更多工具” ————> “擴充程式”。打開後，打開右上角的 “開發者模式”。然後選擇 “加載已解壓的擴充程式”，在彈窗中選擇剛剛建立的新項目即可。
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)