diff --git a/background.js b/background.js index a0be71c0a606a0dd72eab7793d17faf1568e017a..2fbf06648844406e17d83cf094d42a44b0cec5d7 100644 --- a/background.js +++ b/background.js @@ -1,16 +1,29 @@ // 监听来自content-script的消息 chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { - console.log(request, sender); - sendResponse(request); if ("ACCOUT" == request.type) { getCurrentTabId((id) => { - console.log(id); chrome.action.setBadgeText({ text: "A", tabId: id }) }) + chrome.storage.sync.get("token", ({ + token + }) => { + requests("/host/list", "POST", { + "host": request.host + }, token).then(account => { + if (0 == account.code) { + console.log(account); + sendResponse(account); + } + }).catch(error => { + console.log(error); + }) + }) + return true; } + }); // 获取当前选项卡ID @@ -24,21 +37,23 @@ function getCurrentTabId(callback) { } // 请求前缀url -const baseUrl = "http://127.0.0.1:4523/mock/819313"; +const baseUrl = "http://127.0.0.1"; /* * path: 请求路径 * method: 请求方法 默认get * data: 请求参数 默认为空 * */ -function requests(path, method = "GET", data = {}) { +function requests(path, method = "GET", data = {}, token) { method = method.toUpperCase(); // 默认请求头 let requestHeader = { headers: { - 'content-type': 'application/json' + 'content-type': 'application/json', + 'authorization': token + }, method }; @@ -64,5 +79,4 @@ function requests(path, method = "GET", data = {}) { // 可在这里封装 响应拦截函数 response => response.json() ) -} - +} \ No newline at end of file diff --git a/content/content-script.js b/content/content-script.js index 8c3c3951089fe3608c74099f85e756c07322540a..0ca94a01e110f4673cda581d7737639f8757ead7 100644 --- a/content/content-script.js +++ b/content/content-script.js @@ -4,25 +4,14 @@ document.addEventListener("DOMContentLoaded", function () { //发现有账户信息表单则向后端查询信息 let passwordIndex = getPassWordIndex() host = window.location.host - //console.log(host.length>0); - if (host.length>0 && passwordIndex != undefined) { - + if (host.length > 0 && passwordIndex != undefined) { sendMessageHandle({ "type": "ACCOUT", "host": host }, res => { - console.log(res); - }) - requests("/accout/list", "POST", { - "host": host - }).then(accout => { - if (0 == accout.code) { - //console.log(accout); - setAccout(accout.data,0) - } - }).catch(error => { - console.log(error); + setAccout(res.data,0) }) + } }) @@ -35,42 +24,63 @@ function sendMessageHandle(message, callback) { } // 接收来自后台的消息 chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { - if("HOST"==request.type){ - sendResponse({"host":host}) - }else if("SETACCOUT"==request.type){ - - if(false==setAccout(request.data,0)){ - sendResponse({"code":10001,"msg":"填充账户信息失败！！！","data":[]}) - }else{ - sendResponse({"code":0,"msg":"填充账户信息成功！！！","data":[]}) - } - }else if("GETACCOUT"){ + if ("HOST" == request.type) { + sendResponse({ + "host": host + }) + } else if ("SETACCOUT" == request.type) { + + if (false == setAccout(request.data, 0)) { + sendResponse({ + "code": 10001, + "msg": "填充账户信息失败！！！", + "data": [] + }) + } else { + sendResponse({ + "code": 0, + "msg": "填充账户信息成功！！！", + "data": [] + }) + } + } else if ("GETACCOUT") { let passKey = getPassWordIndex() - if(passKey==undefined){ - sendResponse({"code":10001,"msg":"读取失败！！！","data":[]}) - }else{ + if (passKey == undefined) { + sendResponse({ + "code": 10001, + "msg": "读取失败！！！", + "data": [] + }) + } else { let input = document.getElementsByTagName("input") - let password =input.item(passKey) - let username = input.item(passKey-1) - sendResponse({"code":0,"msg":"读取成功！！！","data":[{"username":username.value,"password":password.value}]}) + let password = input.item(passKey) + let username = input.item(passKey - 1) + sendResponse({ + "code": 0, + "msg": "读取成功！！！", + "data": [{ + "username": username.value, + "password": password.value + }] + }) } } }); -function setAccout(data,num) { +function setAccout(data, num) { let input = document.getElementsByTagName("input") let passKey = getPassWordIndex() - if(passKey==undefined){ + if (passKey == undefined) { return false; - }else{ - let password =input.item(passKey) - let loginName = input.item(passKey-1) - loginName.value=data[num].username - password.value=data[num].password + } else { + let password = input.item(passKey) + let loginName = input.item(passKey - 1) + loginName.value = data[num].username + password.value = data[num].password return true; } - + } function getPassWordIndex() { @@ -79,7 +89,6 @@ function getPassWordIndex() { for (const key in input) { if (Object.hasOwnProperty.call(input, key)) { const element = input[key]; - //console.log(element); if (element.type.indexOf("password") != -1 && element.disabled === false && element.readOnly === false && @@ -93,52 +102,7 @@ function getPassWordIndex() { } } - -// 请求前缀url -const baseUrl = "http://127.0.0.1:4523/mock/819313"; - -/* - * path: 请求路径 - * method: 请求方法 默认get - * data: 请求参数 默认为空 - * */ -function requests(path, method = "GET", data = {}) { - - method = method.toUpperCase(); - - // 默认请求头 - let requestHeader = { - headers: { - 'content-type': 'application/json' - }, - method - }; - - // 如果是get请求 - if (method === "GET") { - // 转换拼接get参数 - let esc = encodeURIComponent; - let queryParams = Object.keys(data) - .map(k => `${esc(k)}=${esc(data[k])}`) - .join('&'); - if (queryParams) path += `?${queryParams}`; - - } else { - // 其他请求 放入body里面 - requestHeader.body = JSON.stringify(data) - } - - // 可以在这封装一个回调函数，请求拦截 - - - // 发送请求并返回 promise 对象 注意 fetch不会拦截其他异常请求️ - return fetch(`${baseUrl}${path}`, requestHeader).then( - // 可在这里封装 响应拦截函数 - response => response.json() - ) -} - -window.onerror=(m,u,l,c,e)=>{ - console.log(m,u,l,c,e); - e.message +window.onerror = (m, u, l, c, e) => { + console.log(m, u, l, c, e); + e.message } \ No newline at end of file diff --git a/manifest.json b/manifest.json index 74223cd30dd69cb8d3105ee169d2da1e26e3a071..b212d23da83558a30a213d9cb8feb747171668e4 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 3, - "name": "passwordmanager", - "version": "0.0.7", + "name": "account-manager", + "version": "1.0.0", "icons": { "16": "icon.png", "48": "icon.png", @@ -22,5 +22,8 @@ }, "permissions": [ "storage", "activeTab", "scripting" + ], + "host_permissions":[ + "https://www.baidu.com/*" ] } \ No newline at end of file diff --git a/popup/index.css b/popup/index.css new file mode 100644 index 0000000000000000000000000000000000000000..25e5e01ca9265fc89c063f1ec561e28923749a2a --- /dev/null +++ b/popup/index.css @@ -0,0 +1,293 @@ +* { + word-wrap: break-word +} + +html, +body, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +p, +iframe, +dl, +dt, +dd, +ul, +ol, +li, +pre, +form, +button, +input, +textarea, +th, +td, +fieldset { + margin: 0; + padding: 0 +} + +ul, +ol, +dl { + list-style-type: none +} + +body, +th, +td, +button, +input, +select, +textarea { + font-family: sans-serif, "Microsoft Yahei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, tahoma, arial, Verdana, "WenQuanYi Micro Hei", "\5B8B\4F53"; + font-size: 12px; + color: #333; + -moz-osx-font-smoothing: grayscale +} + +.col-lg-12 { + width: 100% +} + +.col-lg-11 { + width: 91.66666666666666% +} + +.col-lg-10 { + width: 83.33333333333334% +} + +.col-lg-9 { + width: 75% +} + +.col-lg-8 { + width: 66.66666666666666% +} + +.col-lg-7 { + width: 58.333333333333336% +} + +.col-lg-6 { + width: 50% +} + +.col-lg-5 { + width: 41.66666666666667% +} + +.col-lg-4 { + width: 33.33333333333333% +} + +.col-lg-3 { + width: 25% +} + +.col-lg-2 { + width: 16.666666666666664% +} + +.col-lg-1 { + width: 8.333333333333332% +} + +#container { + width: 460px; + padding: 20px 0 20px 0; +} + +#container .row { + display: flex; + flex-wrap: nowrap; +} + +.form-item-label { + display: inline-block; + flex-grow: 0; + overflow: hidden; + white-space: nowrap; + text-align: right; + vertical-align: middle; +} + +.form-item-label>label { + position: relative; + display: inline-flex; + align-items: center; + max-width: 100%; + height: 32px; + color: #000000d9; + font-size: 14px; +} + +.form-item-label>label:after { + content: ":"; + position: relative; + top: -.5px; + margin: 0 8px 0 2px; +} + +.input { + box-sizing: border-box; + margin: 0; + font-variant: tabular-nums; + list-style: none; + font-feature-settings: "tnum"; + position: relative; + display: inline-block; + width: 100%; + min-width: 0; + padding: 4px 11px; + color: #000000d9; + font-size: 14px; + line-height: 1.5715; + background-color: #fff; + background-image: none; + border: 1px solid #d9d9d9; + border-radius: 2px; + transition: all .3s; +} + +.input:hover { + border-color: #40a9ff; + border-right-width: 1px; +} + +.input:focus, +.input-focused { + border-color: #40a9ff; + box-shadow: 0 0 0 2px rgb(24 144 255 / 20%); + border-right-width: 1px; + outline: 0; +} + +.form-item { + box-sizing: border-box; + margin: 0 0 24px; + padding: 0; + color: #000000d9; + font-size: 14px; + font-variant: tabular-nums; + line-height: 1.5715; + list-style: none; + font-feature-settings: "tnum"; + vertical-align: top; + transition: margin-bottom .3s 17ms linear; +} + +.btn { + line-height: 1.5715; + position: relative; + display: inline-block; + font-weight: 400; + white-space: nowrap; + text-align: center; + background-image: none; + border: 1px solid transparent; + box-shadow: 0 2px #00000004; + cursor: pointer; + transition: all .3s cubic-bezier(.645, .045, .355, 1); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + touch-action: manipulation; + height: 32px; + padding: 4px 15px; + font-size: 14px; + border-radius: 2px; + color: #000000d9; + border-color: #d9d9d9; + background: #fff; +} + +.btn-sm { + height: 24px; + padding: 0 7px; + font-size: 14px; + border-radius: 2px; +} + +.btn-primary { + color: #fff; + border-color: #1890ff; + background: #1890ff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, .12); + box-shadow: 0 2px #0000000b; +} + +.btn-success { + color: #fff; + border-color: #52c41a; + background: #52c41a; + text-shadow: 0 -1px 0 rgba(0, 0, 0, .12); + box-shadow: 0 2px #0000000b; +} + +.btn-magenta { + color: #fff; + border-color: #eb2f96; + background: #eb2f96; + text-shadow: 0 -1px 0 rgba(0, 0, 0, .12); + box-shadow: 0 2px #0000000b; +} + +.controller-btn { + justify-content: center; +} + +.btn-box { + display: flex; + justify-content: space-between; +} + +.alert { + box-sizing: border-box; + margin: 0; + color: #000000d9; + font-size: 14px; + font-variant: tabular-nums; + line-height: 1.5715; + list-style: none; + font-feature-settings: "tnum"; + position: relative; + display: flex; + align-items: center; + word-wrap: break-word; +} + +.alert-error { + color: #eb2f96; +} + +.alert-sccuess { + color: #52c41a; +} + +.alert-info { + color: #1890ff; +} + +.anticon { + display: inline-block; + color: inherit; + font-style: normal; + line-height: 0; + text-align: center; + text-transform: none; + vertical-align: -.125em; + text-rendering: optimizelegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.alert-content { + margin-left: 2px; +} \ No newline at end of file diff --git a/jq.js b/popup/jq.js similarity index 100% rename from jq.js rename to popup/jq.js diff --git a/popup/login.html b/popup/login.html index 16246b003d0aa5507e86f47d6c6bf510d8abb1c7..29e3569380450a1ae1eeb609c99c7b35101ae8ff 100644 --- a/popup/login.html +++ b/popup/login.html @@ -1,13 +1,82 @@ + Document + + -

login

- asasdasd +
+
+
+ + + + + +
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+ +
+
+ +
+
+ + + + \ No newline at end of file diff --git a/popup/login.js b/popup/login.js new file mode 100644 index 0000000000000000000000000000000000000000..ee261c838fa7b5bf35ffba529d871789f1e68d17 --- /dev/null +++ b/popup/login.js @@ -0,0 +1,18 @@ +$("#get_account").click(()=>{ + requests("/login/login", "POST", { + "username":$("#basic_username").val(), + "password":$("#basic_password").val() + }).then(res => { + if (0 == res.code) { + console.log( res); + alertSccuess(res.msg) + chrome.storage.sync.set({"token":res.data.token}) + window.location.href = "popup.html" + }else{ + alertError(res.msg) + } + }).catch(error => { + alertError(error.message) + console.log(error); + }) +}) \ No newline at end of file diff --git a/popup/popup.html b/popup/popup.html index de5100a39badcdbb3453788509b2d557a5e685be..47b42e0a3e596a679a76e6b026519cf68d11164b 100644 --- a/popup/popup.html +++ b/popup/popup.html @@ -201,9 +201,9 @@
- - - + + +
@@ -265,8 +265,8 @@
- - - + + + \ No newline at end of file diff --git a/popup/popup.js b/popup/popup.js index ee243b5f47ff580f865096c43ae8543585ef1f44..141b11391ecdb22d7d1fbbc2d70a2b000a3fe7f2 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -3,91 +3,104 @@ sendMessageToContentScript({ "type": "HOST" }, (res) => { host = res.host - if(host.length>0){ - requests("/accout/list", "POST", { - "host": host - }).then(accout => { - if (0 == accout.code) { - setAccout(accout.data,0) - } - }).catch(error => { - console.log(error); + if (host.length > 0) { + chrome.storage.sync.get("token", ({ + token + }) => { + requests("/host/list", "POST", { + "host": host + }, token).then(account => { + if (0 == account.code) { + setAccout(account.data, 0) + } else if (10230 == account.code || 10341== account.code) { + alertError(account.msg) + window.location.href = "login.html" + } else { + alertError(account.msg) + } + }).catch(error => { + console.log(error); + }) + }) - }else{ + } else { alertInfo("该网址并未保存密码") } - + }) -$("#get_accout").click(() => { +$("#get_account").click(() => { sendMessageToContentScript({ "type": "GETACCOUT" }, (res) => { - if(0==res.code){ - setAccout(res.data,0) + if (0 == res.code) { + setAccout(res.data, 0) alertSccuess(res.msg) - }else{ + } else { alertError(res.msg) } console.log(res); }) }) -$("#fill_accout").click(()=>{ +$("#fill_account").click(() => { sendMessageToContentScript({ "type": "SETACCOUT", - "data":[ - { - "username":$("#basic_username").val(), - "password":$("#basic_password").val() - } - ] + "data": [{ + "username": $("#basic_username").val(), + "password": $("#basic_password").val() + }] }, (res) => { - if(0==res.code){ + if (0 == res.code) { alertSccuess(res.msg) - }else{ + } else { alertError(res.msg) } console.log(res); - }) + }) }) -$("#send_accout").click(()=>{ - requests("/accout/add", "POST", { - "host": host, - "username":$("#basic_username").val(), - "password":$("#basic_password").val() - }).then(accout => { - if (0 == accout.code) { - setAccout(accout.data,0) - alertSccuess("账户信息同步成功！！！") - } - }).catch(error => { - alertError(error.message) - console.log(error); +$("#send_account").click(() => { + chrome.storage.sync.get("token", ({ + token + }) => { + requests("/host/add", "POST", { + "host": host, + "username": $("#basic_username").val(), + "password": $("#basic_password").val() + },token).then(account => { + if (0 == account.code) { + alertSccuess("账户信息同步成功！！！") + }else{ + alertError(account.msg) + } + }).catch(error => { + alertError(error.message) + console.log(error); + }) }) }) -$("#copy_username").click(()=>{ +$("#copy_username").click(() => { navigator.clipboard.writeText($("#basic_username").val()) - .then(sccuess=>{ - console.log(sccuess); - alertInfo("复制用户名信息成功！！！") - }) - .catch(e=>{ - console.log(e); - }) + .then(sccuess => { + console.log(sccuess); + alertInfo("复制用户名信息成功！！！") + }) + .catch(e => { + console.log(e); + }) }) -$("#copy_password").click(()=>{ +$("#copy_password").click(() => { navigator.clipboard.writeText($("#basic_password").val()) - .then(sccuess=>{ - console.log(sccuess); - alertInfo("复制密码信息成功！！！") - }) - .catch(e=>{ - console.log(e); - }) + .then(sccuess => { + console.log(sccuess); + alertInfo("复制密码信息成功！！！") + }) + .catch(e => { + console.log(e); + }) }) function alertInfo(msg) { @@ -111,7 +124,7 @@ function alertError(msg) { $("#alert-error").show() } // 设置表单信息 -function setAccout(data,num){ +function setAccout(data, num) { $("#basic_username").val(data[num]["username"]) $("#basic_password").val(data[num]["password"]) } @@ -139,48 +152,4 @@ function getCurrentTabId(callback) { }, function (tabs) { if (callback) callback(tabs.length ? tabs[0].id : null); }); -} - -// 请求前缀url -const baseUrl = "http://127.0.0.1:4523/mock/819313"; - -/* - * path: 请求路径 - * method: 请求方法 默认get - * data: 请求参数 默认为空 - * */ -function requests(path, method = "GET", data = {}) { - - method = method.toUpperCase(); - - // 默认请求头 - let requestHeader = { - headers: { - 'content-type': 'application/json' - }, - method - }; - - // 如果是get请求 - if (method === "GET") { - // 转换拼接get参数 - let esc = encodeURIComponent; - let queryParams = Object.keys(data) - .map(k => `${esc(k)}=${esc(data[k])}`) - .join('&'); - if (queryParams) path += `?${queryParams}`; - - } else { - // 其他请求 放入body里面 - requestHeader.body = JSON.stringify(data) - } - - // 可以在这封装一个回调函数，请求拦截 - - - // 发送请求并返回 promise 对象 注意 fetch不会拦截其他异常请求️ - return fetch(`${baseUrl}${path}`, requestHeader).then( - // 可在这里封装 响应拦截函数 - response => response.json() - ) } \ No newline at end of file diff --git a/popup/requests.js b/popup/requests.js new file mode 100644 index 0000000000000000000000000000000000000000..e44fb3c47de062410510b26eedf11bfa2da69a7f --- /dev/null +++ b/popup/requests.js @@ -0,0 +1,64 @@ +function alertInfo(msg) { + $("#alert-error").hide() + $("#alert-sccuess").hide() + $("#info-message").html(msg) + $("#alert-info").show() +} + +function alertSccuess(msg) { + $("#alert-error").hide() + $("#alert-info").hide() + $("#sccuess-message").html(msg) + $("#alert-sccuess").show() +} + +function alertError(msg) { + $("#alert-sccuess").hide() + $("#alert-info").hide() + $("#error-message").html(msg) + $("#alert-error").show() +} +// 请求前缀url +//const baseUrl = "http://127.0.0.1:8080"; + +/* + * path: 请求路径 + * method: 请求方法 默认get + * data: 请求参数 默认为空 + * */ +function requests(path, method = "GET", data = {},token) { + + method = method.toUpperCase(); + + // 默认请求头 + let requestHeader = { + headers: { + 'content-type': 'application/json', + 'authorization':token + }, + method + }; + + // 如果是get请求 + if (method === "GET") { + // 转换拼接get参数 + let esc = encodeURIComponent; + let queryParams = Object.keys(data) + .map(k => `${esc(k)}=${esc(data[k])}`) + .join('&'); + if (queryParams) path += `?${queryParams}`; + + } else { + // 其他请求 放入body里面 + requestHeader.body = JSON.stringify(data) + } + + // 可以在这封装一个回调函数，请求拦截 + + + // 发送请求并返回 promise 对象 注意 fetch不会拦截其他异常请求️ + return fetch(`${baseUrl}${path}`, requestHeader).then( + // 可在这里封装 响应拦截函数 + response => response.json() + ) +} \ No newline at end of file