效果圖
簡介
Chrome擴展程序平時很常用，比如筆者正在使用的擴展程序有：Google翻譯、AdBlocks廣告屏蔽、Octotree查看github文件樹、SimilarWeb查找相似網站等等。這些擴展程序其實是用Web程序寫出來的，使用到的技術有JavaScript、Html、CSS、JSON。
由於JavaScript是一種解釋型語言，所以無需安裝編譯環境，任意一個編輯器都可以開發。筆者使用的VS Code開發，最後的程序結構如下：
1.新建manifest.json
新建一個文件夾，命名爲HelloWorld。在文件夾中新建images文件夾，放入一張拓展程序的圖標，命名爲icon.png，本例中筆者使用的圖標是這個：
在HelloWorld文件夾中新建manifest.json文件，和AndroidManifest類似，這是一個清單文件，使用的JSON格式，編輯如下：
{
"manifest_version": 2,
"name": "Hello world",
"version": "1.0",
"description": "我的第一個Chrome擴展",
"icons": {
"48": "images/icon.png"
},
"browser_action": {
"default_icon": "images/icon.png",
"default_title": "Hello world",
"default_popup": "popup.html"
}
}
這裏用到的屬性的含義如下：
- manifest_version：固定爲2。可以理解爲表示第二代擴展程序。（在Chrome 18以下此值爲1，Chrome 18此值爲2。）
- name：擴展程序商店展示的程序名字
- version：程序的版本，商店中也會展示
- description：商店展示的程序描述
- icons：商店展示的圖標，可以有多個分辨率
- browser_action：瀏覽器中點擊程序圖標時觸發的動作
- default_icon：瀏覽器中展示的程序圖標
- default_title：瀏覽器中在拓展程序上懸停時顯示的程序名字
- default_popup：點擊時彈出的窗口
本例中最後生成的擴展程序在應用商店中展示效果如下：
PS：manifest的所有屬性可以在Google官網中查到：https://developer.chrome.com/apps/manifest
2.新建popup.html
在manifest中可以看到，default_popup屬性值指向一個popup.html文件，那麼我們就在HelloWorld文件夾下新建popup.html，編輯如下：
<html>
<head>
<style>
body {
width: 200px;
height: 100px;
}
div {
line-height: 100px;
font-size: 22px;
text-align: center;
}
</style>
</head>
<body>
<div id="popupWindow"></div>
<script src="js/helloworld.js"></script>
</body>
</html>
這裏用到的就是HTML和CSS的基本知識，可以看到我們在style中給body的寬高定義爲：200px*100px；div塊的樣式爲：行高100px，字體大小22px，文字居中。
在body中給div塊添加了id爲popupWindow，並且加載了一個JavaScript腳本。
3.新建helloworld.js
在HelloWorld文件夾中新建js文件夾，在js文件夾中新建helloworld.js文件，編輯如下：
var popupWindow = document.getElementById('popupWindow');
displayMessage(popupWindow);
function displayMessage(popupWindow) {
popupWindow.innerHTML = "Hello world!";
}
代碼很簡單，先通過id找到popupWindow元素，然後在窗口中設置顯示文字爲Hello world!，編輯完成後保存文件。
4.加載拓展程序
在Chrome瀏覽器中輸入chrome://extensions/,然後打開頁面右上角的開發者模式，再點擊加載已解壓的拓展程序，選擇HelloWorld文件夾，然後擴展程序列表中就會出現我們自己的擴展程序了，並且瀏覽器右上角也會出現我們自己的拓展程序圖標。
點擊瀏覽器右上角我們自己的擴展程序圖標就能彈出Hello world彈窗，這樣就完成了開始時的效果圖。