大家都知道js是運作在用戶端的，是以，如果我們自己寫一個浏覽器的話，是一定可以往下載下傳下來的網頁源代碼中加入js的。可惜我們沒有這個能力。不過幸運的是，chrome的擴充程式可以幫我們做到這件事。
本文會做一個chrome插件開發的入門介紹，實作利用chrome擴充實作在目标網頁運作我們的js的功能。關于chrome擴充的詳細内容，可以通過官網了解。
開發工具很簡單，記事本就ok了，當然還要有一個chrome浏覽器。
建立一個檔案夾，比如，helloworld
然後建立一個文本檔案，作為這個擴充程式的配置檔案，是以檔案名是manifest.json，注意擴充名是json，然後輸入如下内容。
{
"name": "第一個chrome插件",
"manifest_version": 2,
"version": "1.0",
"description": "我的第一個chrome插件，還不錯吧",
"browser_action": {
"default_icon": "1.png"
}
}
1.png的話，随便拖一張圖檔進來就ok啦。另外需要注意的是，該文本檔案需要用utf8字元集儲存。
你的第一個chrome擴充就完成了。
什麼？完成了？這麼快？
确實是，打開chrome，打開菜單，找到擴充程式選項我的在扳手->工具->擴充程式 路徑下。
點選加載正在開發的擴充程式
可以看到，你的1.png已經作為圖示被放在位址欄旁邊了。隻不過現在毫無功能。
現在讓我們把helloworld添加進去。在manifest檔案裡添加幾行這樣的代碼。
"content_scripts": [
{
"matches": ["http://www.aaaaa.com/*"],
"js": ["myscript.js"]
}
]
注意跟之前的代碼用逗号分割開。
可以看到我們新增了一個内容，就是content_scripts，詳細的介紹應該去看官方文檔，我在這裡簡要介紹下，content_scripts是運作在打開頁面的腳本，可以拿到整個頁面的dom對象，是以可以利用該腳本對頁面進行操作。
建立一個js檔案myscript.js，裡邊代碼很簡單。
alert("helloworld");
document.body.style.backgroundcolor="gray";
在擴充程式頁面重新加載插件，就可以去看效果了。
當我打開百度的時候，oh，my god！
點選确定後
醜爆了有木有，但确實變灰了。另外百度，咱就不能換個背景透明的png做logo嗎？