import "@webcomponents/webcomponentsjs" ; import { browser } from "webextension-polyfill-ts" ; import { Message } from "./message" ; const css = `
    @font-face {
        font-family: "Nunito";
        font-style: normal;
        font-weight: 400;
        src: url("${ browser . runtime . getURL ( "Nunito-Regular.ttf" ) }") format("truetype");
    }

    @font-face {
        font-family: "Nunito";
        font-style: normal;
        font-weight: 600;
        src: url("${ browser . runtime . getURL ( "Nunito-SemiBold.ttf" ) }") format("truetype");
    }

    @font-face {
        font-family: "FontAwesome";
        src: url("${ browser . runtime . getURL ( "fontawesome-webfont.ttf" ) }") format("truetype");
        font-weight: normal;
        font-style: normal;
    }

    @keyframes ripple {
        from {
            opacity: 0.3;
            transform: scale(1);
        }

        to {
            opacity: 0;
            transform: scale(2);
        }
    }

    @keyframes highlight {
        from {
            opacity: 0;
            transform: scale(1.1);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .ripple {
        position: absolute;
        z-index: 9999999;
        border-radius: 8px;
        background: #3bb7f9;
        animation: ripple 0.8s both;
        pointer-events: none;
        will-change: transform, opacity;
    }

    .highlight {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9999999;
        border-radius: 8px;
        border: solid 2px #3bb7f9;
        box-sizing: border-box;
        pointer-events: none;
        will-change: transform, width, height, opacity;
        animation: highlight 0.3s both;
    }

    .highlight.out {
        animation-direction: reverse;
    }

    .drag-element {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9999999;
        border-radius: 8px;
        background: #3bb7f9;
        color: white;
        padding: 6px;
        cursor: grabbing;
        will-change: transform;
        font-family: "Nunito";
        font-size: 14px;
    }

    body.dragging {
        cursor: grabbing !important;
    }
` ; class ExtensionContent { async init ( ) { const style = document . createElement ( "style" ) ; document . head . appendChild ( style ) ; style . type = "text/css" ; style . appendChild ( document . createTextNode ( css ) ) ; browser . runtime . onMessage . addListener ( ( msg ) => this . _handleMessage ( msg ) ) ; } private _handleMessage ( msg ) { switch ( msg . type ) { case "fillActive" : return Promise . resolve ( this . _fill ( msg . value ) ) ; case "hasActiveInput" : const activeInput = this . _getActiveInput ( ) ; return Promise . resolve ( ! ! activeInput ) ; case "isContentReady" : return Promise . resolve ( true ) ; } } private _getActiveElement ( doc ) { const el = doc . activeElement ; return ( el && el . shadowRoot && this . _getActiveElement ( el . shadowRoot ) ) || el ; } private _isElementFillable ( el ) { return ( el instanceof HTMLInputElement && [ "text" , "number" , "email" , "password" , "tel" , "date" , "month" , "search" , "url" ] . includes ( el . type ) ) ; } private _getActiveInput ( ) { const el = this . _getActiveElement ( document ) ; return el && this . _isElementFillable ( el ) ? ( el as HTMLInputElement ) : null ; } private async _fill ( value , input = this . _getActiveInput ( ) ) { if ( ! input ) { return false ; } input . value = value ; input . dispatchEvent ( new KeyboardEvent ( "keydown" , { bubbles : true , key : "" } ) ) ; input . dispatchEvent ( new KeyboardEvent ( "keyup" , { bubbles : true , key : "" } ) ) ; input . dispatchEvent ( new KeyboardEvent ( "keypress" , { bubbles : true , key : "" } ) ) ; input . dispatchEvent ( new Event ( "input" , { bubbles : true } ) ) ; input . dispatchEvent ( new Event ( "change" , { bubbles : true } ) ) ; return true ; } } if ( typeof window . extension === "undefined" ) { window . extension = new ExtensionContent ( ) ; window . extension . init ( ) ; }