@ng1005/chrome-extension-common/src/dom/SelectorCoverService.ts

chrome扩展通用库--消息与storage

import { KeyValue } from "../types/KeyValue";
import { getSelector, getXPath } from "../utils/DomUtils";
import { guid } from "../utils/Utils";
/**
 * 获取标签所有属性
 * @param el 
 * @returns 
 */
function getAttributes(el:HTMLElement){
  var attributes:KeyValue = {};
  ;
  el.getAttributeNames().forEach((key) =>{
      attributes[key] = el.getAttribute(key);
  })
  return attributes;
}
export class SelectorCoverService{
  selector:string='';
  elements:HTMLElement[]=[];
  constructor(selector?:string){
    this.selector=selector||'';
  }
  /**
   * 显示标签
   * //循环调用可支持多个selector
   * 
   * @param selector 
   */
  show(selector?:string,opts:KeyValue={}){
    selector=selector||this.selector
    if(!selector)return;
    if(this.check(selector))return;
    const elements=document.querySelectorAll(selector)
    let {background,text,color}=opts;
    elements.forEach(element=>{
      const uid=guid();
      let child=element.querySelector(selector)
      if(child){//如果有子元素忽略
        return;
      }
      let el=<HTMLElement>element.cloneNode(false);
      // let el=document.createElement('div')
      element.setAttribute('cover-uid',uid)
      el.innerText=text||(<HTMLElement>element).innerText;
      let rect = element.getBoundingClientRect();
      var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop); 
      var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft); 
      const offset={
        left: rect.left+scrollLeft,
        top: rect.top+scrollTop,
        right:rect.right,
        bottom:rect.bottom,
        width: rect.width,
        height: rect.height,
      }
      el.style.width=offset.width+'px'
      el.setAttribute('selector',selector)
      el.style.height=offset.height+'px'
      // el.style.lineHeight=rect.height+'px'
      el.style.top=offset.top+'px'
      el.style.left=offset.left+'px'
      el.style.bottom=offset.bottom+'px'
      el.style.right=offset.right+'px'
      el.style.position='absolute'
      el.setAttribute('cover-id',uid)
      
      // el.setAttribute('_selector',getSelector(<HTMLElement>element))//设置一下pSelector
      // el.setAttribute('p_selector',getSelector(<HTMLElement>element.parentElement))//设置一下pSelector
      // el.setAttribute('_xpath',getXPath(<HTMLElement>element))//设置一下pSelector
      if(text){
        color=color||'#1e80ff'
      }
      el.style.color=color||'rgba(255, 165, 0, 0)'
      el.style.backgroundColor=background||'rgba(255, 165, 0, 0.3)'
      el.style.zIndex='99999'
      document.body.appendChild(el)
      this.elements.push(el)
    })
  }
  check(selector:string):boolean{
    for(let i=0;i<this.elements.length;i++){
      let element=this.elements[i]
      const elSelector=element.getAttribute('selector')
      if(elSelector===selector)return true;
    }
    return false;
  }
  /**
   * 隐藏标签
   * @param selector 
   */
  hide(selector?:string){
    for(let i=0;i<this.elements.length;i++){
      let element=this.elements[i]
      const elSelector=element.getAttribute('selector')
      if(!selector||selector==elSelector){
        document.body.removeChild(element)
        element.remove()
        // this.elements.splice(i,1)
      }
    }
    //统一处理
    this.elements=this.elements.filter((element)=>{
      const elSelector=element.getAttribute('selector')
      if(selector&&selector!=elSelector){
        return element
      }
    })
    
  }
}

export default new SelectorCoverService()