也可說是突然萌生出來的一個想法： 編寫一個Chrome插件。
前段時間發現Chrome瀏覽器佔用的系統內存相當的大。其實也對，隨着現代web程序的功能日益強大和豐富，瀏覽器吃內存是必然的。連office都有在線版的了，對比一下office2016的安裝包大小（2.41G），想想當初的windows XP安裝包大小也才700M。所以可想而知，在線版的office承載的功能之強大。這麼一看，感覺瀏覽器頁越來越像一個操作系統了。這麼說下去，那麼瀏覽器裏的插件豈不是就相當於我們平時安裝的應用軟件了。如果寫一個插件，是不是就好像寫了一個應用軟件。哇哦，想想覺得很高大上啊。
其實最終的目的，還是爲了解決工作中的一些問題。比如當前開發項目的自動登錄功能。
chrome擴展
Chrome擴展可以看做是一個迷你版的站點。它更多的是用來提供功能擴展，而不側重內容展示。所以，它的實際組成是一組html/CSS/script文件。
認識manifest.json文件
{
// Required
"manifest_version": 2, // 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: 480px;
height: 360px;
}
</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 === 13){ DoLogin(); }
});
}
function DoLogin(){
//todo do login
};
EnterKeyLogin();- 添加樣式文件，先創建存放樣式文件的目錄css，然後在該目錄下創建樣式文件mystyles.css。問價內容如下：
body{
font-size: 1.2em !important;
}- 創建images目錄，用於存放擴展用到的圖片。我們這兒主要是是存放了擴展用到的logo。
至此，所有的文件已經編寫完成了。剩下的就是如何添加到Chrome中。
在Chrome瀏覽器右上角位置的三個小圓點下，選擇“更多工具” ————> “擴展程序”。打開後，打開右上角的 “開發者模式”。然後選擇 “加載已解壓的擴展程序”，在彈窗中選擇剛剛創建的新項目即可。