開發google瀏覽器chrome的JS插件

這篇文章，其實是回答個人上篇博文之《WEB攻擊技巧之網頁腳本攻擊》所留下的問題，見網址：http://my.oschina.net/hetiangui/blog/135462

本篇博文測試網址，就是上篇博文中的網址：

http://58.22.105.164:7002/jdha-client/flowassistant/3.jsp

作測驗，目標是編寫一個JS插件，並安裝在chrome瀏覽器裏頭，當咱們經過使用chrome打開該網址的時候，頁面的按鈕自動變成可用狀態。下面是開始步驟：

一、開始編寫chrome的JS插件程序。既然要寫chrome插件，確定要按chrome開發規範來作。根據規範，首先建一個文件夾，如c:\jsdemo\，在該文件夾下新建一個名爲manifest.json 的文本文件，並按實際狀況放一個圖片文件，做爲插件的圖標。文本的內容和解釋以下：

文本內容：

{
"manifest_version": 2,
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "xml.gif"
},
"permissions": [
"http://*/",
"bookmarks",
"tabs",
"history"
] ,
"content_scripts": [
{
"matches": ["http://58.22.105.164:7002/jdha-client/flowassistant/*"],
"css": ["mystyles.css"],
"js": ["test.js"]
}
]
}

二、從上面的定義能夠看出，該插件將會在瀏覽器打開咱們指定的網址的時候，會自動加載test.js這個腳本文件，如今咱們開始編寫test.js文件，內容以下：

document.getElementById("btn1").disabled=false;

三、到此，咱們的插件程序編寫完畢了，咱們開始將插件安裝在 chrome瀏覽器裏頭，步驟以下2圖：

點擊chrome右上角的圖標--》工具--》擴展程序，顯示下圖：

選擇"開發者模式"--》"載入正在開發的擴展程序"--》選擇咱們新建的腳本文件夾；若是修改了腳本，能夠點擊"從新加載"，安裝完畢後，在chrome的右上角就會出現這個插件的圖標。到此步驟，恭喜你，開發完畢！

四、開始測驗吧：

打開網址

http://58.22.105.164:7002/jdha-client/flowassistant/3.jsp ，咱們發現這裏的按鈕已經變成可用狀態了。

五、你已經掌握了chrome的JS插件開發的基本技能，趕忙開動腦筋吧，你是否能夠用這個技能，去幹不少壞事？哈哈哈哈哈

六、官網的開發指南：

https://developer.chrome.com/extensions/getstarted.html

https://developer.chrome.com/extensions/content_scripts.html