import './style.scss' ; import * as JSZip from 'jszip' ; import * as $ from 'jquery' ; let timeHandler ; $ ( 'body' ) . append ( `
<div style="display: none;" class="_dawangraoming_popup-mask" id="__dawangraoming_mask__">操作中，请稍后。。。</div>
` ) ; const mask = $ ( '#__dawangraoming_mask__' ) ; param svg { string } param size { number } param type { string } return { Promise < string > } function createPNG ( svg , size = 200 , type ? ) { return new Promise ( resolve => { const img = new Image ( ) ; const canvas = document . createElement ( 'canvas' ) ; canvas . style . cssText = 'position:absolute;left:0;top:0;display:block;' ; document . body . appendChild ( img ) ; document . body . appendChild ( canvas ) ; canvas . width = size ; canvas . height = size ; const ctx = canvas . getContext ( '2d' ) ; ctx . imageSmoothingQuality = 'high' ; let compileType ; switch ( type ) { case 'webp' : compileType = 'webp' ; break ; case 'jpg' : case 'jpeg' : compileType = 'jpep' ; break ; case 'png' : default : compileType = 'png' ; } compileType = 'image/' + compileType ; img . onload = function ( ) { ctx . drawImage ( img , 0 , 0 , size , size ) ; resolve ( canvas . toDataURL ( compileType ) ) ; $ ( canvas ) . remove ( ) ; $ ( img ) . remove ( ) ; } ; img . src = `data:image/svg+xml,${ encodeURIComponent ( svg ) }` ; } ) ; } param element { Element | JQuery } param index { number } function getSVGFromNode ( element , index = 0 ) { const dom = $ ( element ) ; const name = dom . find ( 'span.icon-name' ) . text ( ) ; const svg = dom . find ( 'svg.icon' ) ; const data = `<svg xmlns="${ svg . attr ( 'xmlns' ) }" viewBox="${ svg . attr ( 'viewBox' ) }" version="${ svg . attr ( 'version' ) }">${ svg . html ( ) }</svg>` ; return { data , name } ; } param type { string } param size { number } return { Promise < void > } async function download ( type ? , size ? ) { const iconList = document . querySelectorAll ( ".block-car-container .block-icon-list>li" ) ; if ( ! iconList || iconList . length < 1 ) return ; let zipFile = new JSZip ( ) ; for ( let index = 0 ; index < iconList . length ; index ++ ) { let { data , name } = getSVGFromNode ( iconList [ index ] ) ; name = name + ' ' + index ; if ( type === 'svg' || ! type ) { name += '.svg' ; zipFile . file ( name , data ) ; } else { name += '.' + type ; let pngFile = await createPNG ( data , size , type ) ; pngFile = pngFile . replace ( /^data:image\/\w+;base64,/ , '' ) ; zipFile . file ( name , pngFile , { base64 : true } ) ; } } zipFile . generateAsync ( { type : "blob" } ) . then ( function ( content ) { const url = window . URL . createObjectURL ( new Blob ( [ content ] , { "type" : "application\/zip" } ) ) ; const a = document . createElement ( "a" ) ; document . body . appendChild ( a ) ; a . setAttribute ( "class" , "svg-crowbar" ) ; a . setAttribute ( "download" , "大王饶命.zip" ) ; a . setAttribute ( "href" , url ) ; a . style [ "display" ] = "none" ; a . click ( ) ; setTimeout ( function ( ) { window . URL . revokeObjectURL ( url ) ; } , 10 ) ; } ) ; } param type function select ( type ) { mask . show ( ) ; clearTimeout ( timeHandler ) ; timeHandler = window . setTimeout ( function ( ) { const iconList = document . querySelectorAll ( "#magix_vf_main .block-icon-list > li" ) ; Array . from ( iconList ) . forEach ( ele => { if ( type === 'all' ) { if ( /selected/ . test ( ele . className ) ) return ; } ( ele . querySelector ( '.icon-gouwuche1' ) as HTMLSpanElement ) . click ( ) ; } ) ; mask . hide ( ) ; } , 300 ) ; } param color { string } function setIconColor ( color = '' ) { $ ( '#magix_vf_main .block-icon-list > li svg path' ) . css ( 'fill' , color ) ; } chrome . runtime . onMessage . addListener ( function ( request , sender , sendResponse ) { switch ( request . type ) { case 'select-all' : select ( 'all' ) ; break ; case 'select-invert' : select ( 'invert' ) ; break ; case 'download-svg' : download ( 'svg' , request . size ) ; break ; case 'download-png' : download ( 'png' , request . size ) ; break ; case 'download-jpg' : download ( 'jpg' , request . size ) ; break ; case 'download-webp' : download ( 'webp' , request . size ) ; break ; case 'set-icon-color' : setIconColor ( request . color ) ; break ; } sendResponse ( 'over' ) ; } ) ; param str return { Promise < void > } function alertMessage ( str ) { const dom = $ ( `<p class="_dawangraoming_alert-message">${ str }</p>` ) ; $ ( 'body' ) . append ( dom ) ; return new Promise ( resolve => { dom . delay ( 800 ) . fadeOut ( 300 , function ( ) { dom . remove ( ) ; resolve ( ) ; } ) ; } ) ; } const observer = new MutationObserver ( function ( ) { const domList = $ ( '#magix_vf_main .block-icon-list > li .icon-cover' ) ; if ( domList . length > 0 ) { observer . disconnect ( ) ; domList . each ( function ( ) { $ ( this ) . append ( `
            <span title="复制图标(SVG)" class="cover-item iconfont cover-item-line _dawangraoming_copy-button">复制</span>
            ` ) ; } ) ; $ ( "#magix_vf_main .block-icon-list" ) . on ( 'click' , '._dawangraoming_copy-button' , function ( ) { const { data , name } = getSVGFromNode ( $ ( this ) . closest ( 'li[p-id]' ) ) ; const id = '_dawangraoming_copy' ; $ ( 'body' ) . append ( `<input readonly="readonly" id="${ id }" />` ) ; const $input = $ ( `#${ id }` ) ; $input . val ( data ) ; $input . select ( ) ; document . execCommand ( 'copy' ) ; $input . remove ( ) ; alertMessage ( `${ name }, 复制成功` ) ; } ) ; } } ) ; observer . observe ( document . querySelector ( '#root' ) , { subtree : true , childList : true , attributes : false , characterData : false , } ) ;