純屬測試:
第一步: 準備一個登陸頁面
<!Doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>登錄</title>
<style>
.loginContainer {
position: relative;
width: 350px;
height: 200px;
margin: 0 auto;
border: 1px dashed #555;
background: skyblue;
}
.loginContainer form {
position: absolute;
top: 50%;
display: flex;
width: 100%;
height: 150px;
flex-direction: column;
transform: translateY(-50%)
}
.loginContainer form div {
display: flex;
height: 30px;
padding: 10px;
}
.loginContainer form .btns {
justify-content: center;
}
.loginContainer form div span {
flex: 1;
}
.loginContainer form div input {
flex: 4;
outline: none;
}
.loginContainer form div button {
width: 50px;
margin: 0 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="loginContainer">
<form id="loginForm" action="https://www.baidu.com">
<div>
<span>用戶名:</span><input type="text" name="username" />
</div>
<div>
<span>密 碼:</span><input type="password" name="password" />
</div>
<div class="btns">
<button>登錄</button>
<button>註冊</button>
</div>
</form>
</div>
</body>
</html>
第二步: 寫填充用戶名和密碼的js代碼
(function() {var ele = document.getElementById('loginForm'); ele.username.value='Jerry'; ele.password.value='123456'; setTimeout(function() {ele.submit()}, 3000)})()
第三步: 在控制檯測試js代碼是否正確
執行js前:
執行js後:
3 秒後會跳轉到百度頁面(爲了看到填充成功及提交成功)
說明js代碼沒有問題!!!
第四步: 創建標籤
選擇更多
名稱(自定義):
自動填充用戶名和密碼
網址(以上js代碼前面需加上javascript僞協議):
javascript: (function() {var ele = document.getElementById('loginForm'); ele.username.value='Jerry'; ele.password.value='123456'; setTimeout(function() {ele.submit()}, 3000)})()
點擊保存!!!!
第五步: 測試功能
1 打開登錄界面
2 點擊剛添加的標籤 (如果功能正常,則會自動填充用戶名密碼, 3秒後跳轉至百度)
其他js代碼也可以類似方法執行!!!
Over !!!
本文參考了其他多位道友的博客, 這裏表示感謝 !!!