JavaScript如何实现谷歌浏览器插件开发的方法详解

{
	"name": "密码箱",//插件名称
	"description": "密码箱",//插件描述
	"version": "1.0.0",//插件版本
	"manifest_version": 3,//文件版本2或者3，2目前是主流，3是趋势，谷歌浏览器目前是使用3版本的
	"background": { //常驻后台服务
		"service_worker": "/js/background.js"
	},
	"permissions": ["storage", "activeTab", "scripting", "contextMenus", "tabs"],  //需要的权限
	"homepage_url": "https://www.baidu.com",//插件主页地址
	"action": {
		"default_popup": "html/popup.html",//可交互页面
		"default_icon": {
			"16": "/img/icon.png",
			"32": "/img/icon.png",
			"48": "/img/icon.png",
			"128": "/img/icon.png"
		}
	},
	"options_ui": {//插件选项配置
		"page": "/html/options.html",
		"open_in_tab": true
	},
	"icons": {//图标
		"16": "/img/icon.png",
		"32": "/img/icon.png",
		"48": "/img/icon.png",
		"128": "/img/icon.png"
	},
	"host_permissions": ["*://*/*"]//主机权限
}

let btn_save = document.getElementById("btn_save");
let btn_add = document.getElementById("btn_add");
 
 
init();
 
function add_row(id){
	let element_str = ` <div class="form">
	<div class="form-item">
	<label>账号：</label>
	<input type="text" class="user"/>
	</div>
	<div class="form-item">
	<label>密码：</label>
	<input type="text" class="pwd" />
	</div>
	<div class="form-item">
	<label>网址：</label>
	<input type="text" class="url"/>
	</div>
	</div>
	<div class="form">
	<div class="form-item">
	<label>账号元素：</label>
	<input type="text" class="user_tag" />
	</div>
	<div class="form-item">
	<label>密码元素：</label>
	<input type="text" class="pwd_tag" />
	</div>
	<div class="form-item">
	<button class="btn_del">删除</button>
	</div>
	</div>
	<div class="line"></div>
	</div>`;
	
	let element = document.createElement("div");
	element.setAttribute("class", "row");
	element.setAttribute("id", "row" + id);
	element.innerHTML = element_str;
	document.getElementById("main").appendChild(element);
	return element;
}
 
function bind_rowdel(element,id){
	let btn_del = element.getElementsByClassName("btn_del")[0];
	btn_del.addEventListener("click", function () {
		let row = document.getElementById("row" + id);
		document.getElementById("main").removeChild(row);
		btn_save.click();
	});
}
 
function init(){
	chrome.storage.sync.get("pwd_box", function (result) {
		let save_list = result.pwd_box;
		if (save_list==undefined||save_list.length == 0) {
			save_list=[];
			save_list.push({
				user: "",
				pwd: "",
				url: "",
				user_tag: "",
				pwd_tag: "",
			});
		}
		
		for (let i = 0; i < save_list.length; i++) {
			let element=add_row(i);
			element.getElementsByClassName("user")[0].value = save_list[i].user;
			element.getElementsByClassName("pwd")[0].value = save_list[i].pwd;
			element.getElementsByClassName("url")[0].value = save_list[i].url;
			element.getElementsByClassName("user_tag")[0].value = save_list[i].user_tag;
			element.getElementsByClassName("pwd_tag")[0].value = save_list[i].pwd_tag;
			bind_rowdel(element,i);
		}
	});
}
 
 
btn_save.addEventListener("click", async () => {
	let items = document.getElementsByClassName("row");
	let save_list = [];
	for (let i = 0; i < items.length; i++) {
		save_list.push({
			user: items[i].getElementsByClassName("user")[0].value,
			pwd: items[i].getElementsByClassName("pwd")[0].value,
			url: items[i].getElementsByClassName("url")[0].value,
			user_tag: items[i].getElementsByClassName("user_tag")[0].value,
			pwd_tag: items[i].getElementsByClassName("pwd_tag")[0].value,
		});
	}
	await chrome.storage.sync.set({ pwd_box: save_list }, null);
	alert("操作成功");
});
 
btn_add.addEventListener("click", async () => {
	
	let id=new Date().getTime();
	let element=add_row(id);
	bind_rowdel(element,id);
});

let btn = document.getElementById("btn");
 
async function getCurrentTab() {
  let queryOptions = { active: true, lastFocusedWindow: true };
  let [tab] = await chrome.tabs.query(queryOptions);
  return tab;
}
 
btn.addEventListener("click", async () => {
  let tab = await getCurrentTab();
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: inputs,
    args: [tab.url],
  });
});
 
 
 
 
function inputs(url) {
  chrome.storage.sync.get("pwd_box", async (result) => {
    
    let model = result.pwd_box.find((s) => {
      return s.url == url;
    });
 
    if (model != undefined) {
      let user_selector, pwd_selector;
 
      let utag = model.user_tag.split(":", 2);
      switch (utag[0].toLowerCase()) {
        case "id":
          user_selector = document.getElementById(utag[1]);
          break;
        case "class":
          user_selector = document.getElementsByClassName(utag[1])[0];
          break;
        case "name":
          user_selector = document.getElementsByName(utag[1])[0];
          break;
        default:
          break;
      }
 
      user_selector.value = model.user;
      //await sleep(1000);
      let ptag = model.pwd_tag.split(":", 2);
      switch (ptag[0].toLowerCase()) {
        case "id":
          pwd_selector = document.getElementById(ptag[1]);
          break;
        case "class":
          pwd_selector = document.getElementsByClassName(ptag[1])[0];
          break;
        case "name":
          pwd_selector = document.getElementsByName(ptag[1])[0];
          break;
        default:
          break;
      }
      pwd_selector.value = model.pwd;
    }
  });
 
  function sleep(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
  }
}