Chrome插件開發登陸插件

目錄中的全部文件都在同一個文件夾下:

manifest.json

{
	"name": "One Step Aoto Login",
	"manifest_version": 2,
	"version": "1.0",
	"description": "eSight aoto login Chrome plugin powered by wangchong(w00377652)",
	"background": {
		"scripts": [
			"background.js"
		]
	},
	"content_scripts": [
		{
			"js": [
				"script.js"
			],
			"matches": [
				"http://*/*",
				"https://*/*"
			]
		}
	],
	"icons": {
		"16": "icon16.png",
		"48": "icon48.png",
		"128": "icon128.png"
	},
	"browser_action": {
		"default_icon": "icon48.png",
		"default_title": "Login Action",
		"default_popup": "popup.html"
	},
	"permissions": [
		"tabs",
		"http://*/*",
		"https://*/*",
		"notifications",
		"activeTab",
		"storage"
	]
}

popup.js

$(function () {
	var storageKey = "FAST_ACCOUNT_HELPER";
	$("#doLogin").click(function () {
		chrome.tabs.getSelected(null, function (tab) {
			var ip = getIP(tab.url);
			if (ip != null) {
				var paras = { "tag": "login", "ip": ip, "tabid": tab.id };
				chrome.extension.sendRequest(paras);
			}
		});
	});
	$("#add").click(function () {
		var ipText = $("#ipText").val();
		var accountText = $("#accountText").val();
		var passwordText = $("#passwordText").val();
		var typeid = $("#typeid").val();
		var valueItem = {
			"ip": ipText,
			"account": accountText,
			"password": passwordText,
			"type": typeid
		};

		if (!checkUserinput(valueItem)) {
			return;
		}
		addItemToStorage(valueItem);
	});
	function getIP(url) {
		var ipReg = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/;
		var ip = ipReg.exec(url);
		return ip;
	}

	function addItemToStorage(item) {
		chrome.storage.local.get([storageKey], function (all) {
			var content = all[storageKey]
			if (content != null) {
				var content = JSON.parse(content);
			} else {
				content = {};
			}
			content[item.ip] = item;
			all[storageKey] = JSON.stringify(content);
			chrome.storage.local.set(all);
		});
	}

	function init() {
		chrome.storage.local.get([storageKey], function (all) {
			var content = all[storageKey]
			if (content != null) {
				renderTable(JSON.parse(content));
			}
		});
		chrome.tabs.getSelected(null, function (tab) {
			var ip = getIP(tab.url);
			if (ip != null) {
				$("#ipText").val(ip);
			}
		});
	}
	chrome.storage.onChanged.addListener(function (changes, namespace) {
		var allDatas = changes[storageKey];
		if (allDatas != null) {
			var contentMap = JSON.parse(allDatas.newValue);
			renderTable(contentMap);
		}
	});

	function renderTable(contentMap) {
		var content = "";
		for (var i in contentMap) {
			var v = contentMap[i];
			content += ('<tr><td><a>' + v.ip + '</a></td><td>' + v.account +
				'</td><td>' + v.password +
				'</td><td><input class="del_btn" type="button" value="del" data="' + v.ip + '"/></td></tr>');
		}
		$("#tbBody").html(content);
	}

	function doDeleteItem(ipKey) {
		chrome.storage.local.get([storageKey], function (all) {
			var content = all[storageKey]
			if (content != null) {
				var content = JSON.parse(content);
				delete content[ipKey];
				all[storageKey] = JSON.stringify(content);
				chrome.storage.local.set(all);
			}
		});
	}
	$('.del_btn').live('click', function () {
		var r = confirm("Are you sure you want to delete ?");
		if (r == true) {
			doDeleteItem($(this).attr("data"));
		}
	});

	function checkUserinput(userInput) {
		if (userInput.ip == null || userInput.ip.length == 0) {
			alert("ip can not be empty");
			return false;
		}
		if (userInput.account == null || userInput.account.length == 0) {
			alert("account can not be empty");
			return false;
		}
		if (userInput.password == null || userInput.password.length == 0) {
			alert("password can not be empty");
			return false;
		}
		return true;
	}
	init();
});

background.js

(function () {

	chrome.extension.onRequest.addListener(function (request, sender, sendResponse) {
		if (request.tag == "login" && request.ip != null) {
			chrome.tabs.executeScript(request.tabid, { code: "setAccontPassword(\"" + request.ip + "\");", allFrames: true });
		}
	});
}
)();

script.js

var storageKey = "FAST_ACCOUNT_HELPER";
function setAccontPassword(ip) {
    console.log(ip);
    chrome.storage.local.get([storageKey], function (all) {
        var content = all[storageKey]
        if (content != null) {
            var content = JSON.parse(content);
            var item = content[ip]
            if (item != null) {
                setAccAndPwd(item);
            }
        }
    });
}

function setAccAndPwd(item) {
    if (item.type == 1) {
        setTradition(item);
    } else if (item.type == 2) {
        setCloupSOP(item);
    }
}
function setCloupSOP(item) {
    $$("username").value = item.account;
    $$("value").value = item.password;
    var loginBtn = $$("submitDataverify");
    if (loginBtn != null) {
        loginBtn.click();
    }
    else {
        alert("Please check the type of environment(CloudSOP or Tradition)");
    }

}
function setTradition(item) {
    $$("username").value = item.account;
    $$("value").value = item.password;
    var loginBtn = $$("submitData");
    if (loginBtn != null) {
        loginBtn.click();
    }
    else {
        alert("Please check the type of environment(CloudSOP or Tradition)");
    }
}
function $$(id) {
    return document.getElementById(id);
}

pupup.html

<html>

<head>
    <style type="text/css">
        a {
            text-decoration: none;
            border-bottom: 1px solid red;
        }

        html * {
            font-size: 1px;
        }

        #doLogin {
            display: block;
        }

        input {
            width: 100%;
            height: 23px;
        }

        #content {
            width: 350px;
        }

        #typeid {
            float: right;
            width: 100%;
            height: 24px;
        }

        table {

            width: 100%;
            padding-top: 0px;
            margin-bottom: 5px;
        }

        thead tr * {
            text-align: left;
        }

        hr {
            margin: 7px 3px 3px 3px;
        }
    </style>
    <script src="jquery-1.8.3.js"></script>
    <script src="popup.js"></script>
</head>

<body>
    <div id="content">
        <div>
            <input id="doLogin" type="button" value="login" />
        </div>
        <hr/>
        <div id="addDiv">
            <table>
                <tr>
                    <td>IP:</td>
                    <td>
                        <input type="text" id="ipText" />
                    </td>

                </tr>
                <tr>
                    <td>account:</td>
                    <td>
                        <input type="text" id="accountText" />
                    </td>

                </tr>
                <tr>
                    <td>pwd:</td>
                    <td>
                        <input type="text" id="passwordText" />
                    </td>
                </tr>
                <tr>
                    <td>type:</td>
                    <td>
                        <select id="typeid" name="envType">
                            <option value="1">Tradition</option>
                            <option value="2">CloudSOP</option>
                        </select>
                    </td>
                </tr>
            </table>

        </div>

        <div style="overflow:hidden;">
            <input id="add" type="button" value="AddNew" style="width:auto;float:right;" />
        </div>
        <hr/>
        <div id="taskItemList">
            <table>
                <thead>
                    <tr>
                        <th>IP</th>
                        <th>account</th>
                        <th>pwd</th>
                        <th>opt</th>
                    </tr>
                </thead>
                <tbody id="tbBody">
                </tbody>
            </table>
        </div>
    </div>
</body>


</html>