当前位置：首页 > news >正文

chrome插件开发（二）

news 2025/8/26 11:41:29

注：本文章中所有内容仅供学习交流，不可用于任何商业用途和非法用途，否则后果自负，如有侵权，请联系作者立即删除！

书接上文，我们还可以给插件增加一些功能
比如给插件加上一个页面，然后可以在这个页面上提交表单来修改配置，这样就不会每次填表都只能填代码中固定的数值了
于是我们添加popup.html已经popup.js分别用来当作插件的前端页面已经信息收集函数。

popul.html

<!DOCTYPE html>
<html>
<head><title>Auto-Filler Settings</title><style>body {width: 300px;padding: 15px;font-family: Arial, sans-serif;}.form-group {margin-bottom: 15px;}label {display: block;margin-bottom: 5px;font-weight: bold;}input {width: 100%;padding: 8px;box-sizing: border-box;}button {background-color: #4CAF50;color: white;border: none;padding: 10px 15px;text-align: center;text-decoration: none;display: inline-block;font-size: 14px;margin: 4px 2px;cursor: pointer;width: 100%;}.status {margin-top: 10px;padding: 8px;border-radius: 4px;display: none;}.success {background-color: #dff0d8;color: #3c763d;}</style>
</head>
<body>
<div class="form-group"><label for="full_name">Manager Group Name:</label><input type="text" id="full_name" placeholder="Enter Full Name">
</div><div class="form-group"><label for="phone">Manager phone:</label><input type="text" id="phone" placeholder="Enter phone">
</div><div class="form-group"><label for="birthdate">Manager birthdate:</label><input type="text" id="birthdate" placeholder="Enter birthdate">
</div><div class="form-group"><label for="password">password:</label><input type="text" id="password" placeholder="Enter password">
</div><div class="form-group"><label for="email">email:</label><input type="text" id="email" placeholder="Enter email">
</div><div class="form-group"><label for="confirm_password">Confirm Email:</label><input type="text" id="confirm_password" placeholder="Confirm password">
</div><div class="form-group"><label for="country">country:</label><input type="text" id="country" placeholder="Enter country">
</div><button id="save">Save Settings</button><div id="status" class="status success">Settings saved!</div><script src="popup.js"></script>
</body>
</html>

popup.js

document.addEventListener('DOMContentLoaded', function () {// Load saved settingschrome.storage.sync.get(['full_name', 'phone', 'birthdate', 'email', 'password', 'confirm_password', 'country'], function (data) {document.getElementById('full_name').value = data.full_name || 'Klook Travel';document.getElementById('phone').value = data.phone || 'Klook';document.getElementById('birthdate').value = data.birthdate || 'Italy';document.getElementById('password').value = data.password || 'Rome';document.getElementById('email').value = data.email || 'inventory@klook.com';document.getElementById('confirm_password').value = data.confirm_password || 'inventory@klook.com';document.getElementById('country').value = data.country || 'Inglese';});// Save settingsdocument.getElementById('save').addEventListener('click', function () {const full_name = document.getElementById('full_name').value;const confirm_password = document.getElementById('confirm_password').value;const phone = document.getElementById('phone').value;const country = document.getElementById('country').value;const email = document.getElementById('email').value;const birthdate = document.getElementById('birthdate').value;const password = document.getElementById('password').value;chrome.storage.sync.set({full_name: full_name,phone: phone,email: email,birthdate: birthdate,password: password,confirm_password: confirm_password,country: country});});
});