教程:開始(Hello,World!)
這個教程先帶著你做一個簡單的Chrome插件。添加一個圖標到Google Chrome上,當你點擊的時候,將自動生成一個頁面。如下圖示例:
準備好瀏覽器
Window下可用一般的穩定版開發擴展,但是要在其他Linux或者Mac上開發擴展要使用其他的最新的Google Chrome分支。
- Windows:任何最新的Google Chrome
- Linux: 測試分支Beta channel
- Mac: 開發者分支Dev channel
編寫和裝載一個擴展
在這個部分,你將編寫一個添加在Chrome工具欄的瀏覽器動作的擴展。.
- 隨意在電腦上創建一個文件夾來存放你的擴展代碼.
- 在文件夾內,創建一個名為“manifest.json“的文本文件,添加如下代碼:
{ "name": "My First Extension", "version": "1.0", "description": "The first extension that I made.", "browser_action": { "default_icon": "icon.png" }, "permissions": [ "http://api.flickr.com/" ] } - 拷貝下圖到你的擴展文件夾下:

Download icon.png
4. 裝載擴展.
- 點擊
打開擴展管理,點擊"擴展管理程序". - 假如開發人員模式旁邊有個"+",點擊加號,打開開發的面板
- 點擊載入正在開發的擴展程序,一個本地文件選擇打開
- 在文件對話框中,找到你的擴展文件夾選中,點擊確定。
如果你的擴展無措可用的話,那個圖標將會出現在工具欄上,擴展信息出現在擴展管理頁面上,如下圖所示.
向擴展中添加代碼
接下來,讓你的擴展干點事情吧,它可不只是個裝飾。
-
向manifest.json添加一行:
... "browser_action": { "default_icon": "icon.png", "popup": "popup.html" }, ...在擴展文件夾下,創建popup.html文件,添加如下代碼:
:CSS and JavaScript code for hello_world(查看源文件)
- 回到Chrome的擴展控制面板,點擊重新載入,刷新擴展程序.
- 點擊擴展圖標,彈出的面板顯示出了popup.html中的內容。看起來像這樣子.
假如運行沒有成功,在按照教程來一遍,保證操作正確,加載一個不屬于擴展文件夾的Html文件是不行的!
我當時參照教程寫的插件:http://cssrain.cn/article.asp?id=1434
