I am working on password manager extension for chrome, here problem is passwords should be kept safely locked. Consider this case of two persons using same pc and browser profile and person1 saves password and wants to keep it secured from person2. I have completed the extension which autocompletes the login form automatically based on user feed. But, chrome password manager is interfering and attempts to save passwords which can be seen by both person1 and person2. If person2 purposely turns on chrome built in password saver and see password then it totally ruins the extension use case. So, I came up with idea of creating a fake form with same input fields but it's of no use chrome is saving actual password and username instead of dummy values. Here is my code which is injected through content scripts.
const codeit = (querytype, query, value, track) => {
if(querytype == 'id'){
var x = "var t"+ track +"= document.getElementById('"+ query.replaceAll('<','<').replaceAll('>','>') +"');t"+ track +".focus();t"+ track +".style.opacity = \"1\";t"+ track +".setAttribute('type', 'text');t"+ track +".focus();t"+ track +".setAttribute('value','"+ value +"');"
}
else if(querytype == 'name'){
var x = "var t"+ track +"= document.getElementsByName('"+ query.replaceAll('<','<').replaceAll('>','>') +"')[1];t"+ track +".focus();t"+ track +".style.opacity = \"1\";t"+ track +".setAttribute('type', 'text');t"+ track +".focus();t"+ track +".setAttribute('value','"+ value +"');"
}
else if(querytype == 'class'){
var x = "var t"+ track +"= document.getElementsByClassName('"+ query.replaceAll('<','<').replaceAll('>','>') +"')[1];t"+ track +".focus();t"+ track +".style.opacity = \"1\";t"+ track +".setAttribute('type', 'text');t"+ track +".focus();t"+ track +".setAttribute('value','"+ value +"');"
}
else if(querytype == 'query'){
var x = "var t"+ track +"= document.querySelectorAll('"+ query.replaceAll('<','<').replaceAll('>','>') +"')[1];t"+ track +".focus();t"+ track +".style.opacity = \"1\";t"+ track +".setAttribute('type', 'text');t"+ track +".focus();t"+ track +".setAttribute('value','"+ value +"');"
}
return x;
}
const codeit_todummy = (track) => {
var x = "t"+ track +".setAttribute('value','Dummy');"
return x;
}
const codeit_newele = (querytype, query) => {
if(querytype == 'id'){
// var x = "var n"+ track + " = document.createElement('input'); n"+ track +".id = '"+ query + "'; n"+ track +".value = 'dummey'; form.append(n"+ track +");";
var x = "<input id = '" + query.replaceAll('<','<').replaceAll('>','>') + "' value='dummey' >"
}
else if(querytype == 'name'){
// var x = "var n"+ track + " = document.createElement('input'); n"+ track +".name = '"+ query + "';n"+ track +".value = 'dummey'; form.append(n"+ track +");"
var x = "<input name = '" + query.replaceAll('<','<').replaceAll('>','>') + "' value='dummey'>"
}
else if(querytype == 'class'){
// var x = "var n"+ track + " = document.createElement('input'); n"+ track +".class = '"+ query + "';n"+ track +".value = 'dummey'; form.append(n"+ track +");"
var x = "<input class = '" + query.replaceAll('<','<').replaceAll('>','>') + "' value='dummey'>"
}
return x;
}
chrome.contextMenus.onClicked.addListener(function(info, tab) {
if (tab) {
chrome.storage.sync.get("groups",function(data){
if(data.groups === undefined){
}
else{
var groups = data.groups
for(let group in groups){
if (info.menuItemId === groups[group].group_name){
var qss = groups[group]
var text = "";
var track = 0
var btns = []
var dummies = []
var dumbuttons = []
var new_inputs = []
for(let item in qss){
track+=1;
if(qss[item].Query === undefined){
}
else{
if(qss[item].Value == 'click()'){
if(qss[item].QueryType == 'id'){
var bclick = "var t"+ track +"= document.getElementById('"+ qss[item].Query.replaceAll('<','<').replaceAll('>','>') +"');t"+ track +".focus();t"+ track +".click();console.log('clicked');"
}
else if(qss[item].QueryType == 'name'){
var bclick = "var t"+ track +"= document.getElementsByName('"+ qss[item].Query.replaceAll('<','<').replaceAll('>','>') +"')[0];t"+ track +".focus();t"+ track +".click();console.log('clicked');"
}
else if(qss[item].QueryType == 'class'){
var bclick = "var t"+ track +"= document.getElementsByClassName('"+ qss[item].Query.replaceAll('<','<').replaceAll('>','>') +"')[0];t"+ track +".focus();t"+ track +".click();console.log('clicked');"
}
else if(qss[item].QueryType == 'query'){
var bclick = "var t"+ track +"= document.querySelector('"+ qss[item].Query.replaceAll('<','<').replaceAll('>','>') +"');t"+ track +".focus();t"+ track +".click();console.log('clicked');"
}
btns.push(bclick);
if(qss[item].QueryType == 'id'){
var bclick = "var t"+ track +"= document.getElementById('"+ qss[item].Query.replaceAll('<','<').replaceAll('>','>') +"');t"+ track +".focus();"
}
else if(qss[item].QueryType == 'name'){
var bclick = "var t"+ track +"= document.getElementsByName('"+ qss[item].Query.replaceAll('<','<').replaceAll('>','>') +"')[0];t"+ track +".focus();"
}
else if(qss[item].QueryType == 'class'){
var bclick = "var t"+ track +"= document.getElementsByClassName('"+ qss[item].Query.replaceAll('<','<').replaceAll('>','>') +"')[0];t"+ track +".focus();"
}
else if(qss[item].QueryType == 'query'){
var bclick = "var t"+ track +"= document.querySelector('"+ qss[item].Query.replaceAll('<','<').replaceAll('>','>') +"');t"+ track +".focus();"
}
dumbuttons.push(bclick);
}
else{
var x = codeit(qss[item].QueryType,qss[item].Query,qss[item].Value, track);
text += x;
var y = codeit_todummy(track);
var z = codeit_newele(qss[item].QueryType, qss[item].Query);
dummies.push(y);
new_inputs.push(z);
}
}
}
var form = "<form method='post' action='.'>" + new_inputs.join(' ') + "</form>"
var injectform = "var body = document.querySelector('body'); body.innerHTML = \"" + form + "\" + body.innerHTML;"
var code = injectform + text //+ btns.join(' ') + wait;
console.log(code);
chrome.tabs.executeScript(tab.id, { code: code });
}
}
}
});
}
});
Please help me resolve this issue. Even if you have a new idea please share it.