Google插件：页面显示i18n的原始key，救了pm
时间：2023-04-05 12:55:18
HTML5
鍚庡彴锛屽浗闄呭寲椤圭洰浼氱敤鍒板緢澶歩18n_keys鏉ュ鐞嗘枃妗堬紝鐪嬩笅闈㈢殑渚嬪瓙锛氫絾瀹為檯涓婃垜浠殑浠ｇ爜鍙兘鏄繖鏍风殑锛?pclassName="home_title">{t("page_home_title_welcome")}
}/div>甯屾湜鍋氫竴涓胺姝屾彃浠讹紝鍙互璁╃綉绔欓殢鎰忓垏鎹㈠埌浠ヤ笅鍐呭锛?銆佽繖涓彃浠剁敤鍦ㄤ粈涔堝満鏅紵闅忕潃椤圭洰鐨勪笉鏂．澶э紝涓婂浘涓殑page_home_nav_switch_language绛塱18n_keys宸茬粡杈惧埌浜嗘暟鍗冧箣澶氾紝鑰屼笖姣忔鍔熻兘鐨勫悎骞舵垨鑰呮敼鐗堬紝閮藉彲鑳芥秹鍙婂埌i18n_key鐨勯噸鍐欍€傚鏋滀竴涓綉绔欏悓鏃跺吋瀹瑰绉嶈瑷€锛屾瘮濡傛彁渚?涓浗瀹剁殑璇█锛岄偅涔堜笌缈昏瘧鏂囨鐨勫憟鐜扮浉鍏崇殑闂灏变細婵€澧炪€傚疄闄呴亣鍒拌繃寰堝娆＄殑闂鏄煇涓ā鍧椾腑鏌愪釜鎸夐挳鐨剎x鍥借鏂囧瓧鏈夐棶棰樸€傝繖鏃跺€欎骇鍝佸悓瀛﹀氨浼氱湅鍚戞垜锛岃鎴戝府蹇欑湅鐪嬭繖涓猚opy瀵瑰簲鐨刱ey鏄粈涔堬紝瀵绘壘key銆傜炕璇戠殑杩囩▼骞朵笉瀹规槗锛屽洜涓虹炕璇戞枃妗堜腑閲嶅鐨勫湴鏂瑰お澶氫簡锛屾瘮濡備竴涓寜閽枃妗堟槸鈥渙k鈥濓紝閭ｄ箞鍏ㄥ眬閿兘瀵瑰簲鈥渙k鈥濓紝page_home_title_model_ok锛氣€渙k鈥濓紝page_user_nav_create_model_ok锛?ok",page_user_title_error_ok:"ok",user_detail_model_ok:"ok",//...鎴戜竴鑸渶瑕侀€氳繃涓氬姟鏉ョ‘瀹氫唬鐮佹墍鍦ㄧ殑鏂囦欢锛岀劧鍚庝竴涓€妫€鏌ャ€傚彧鏈夌粡杩囪繖涓繃绋嬶紝鎴戞墠鑳界煡閬撯€滃ⅷ姘粹€濇湁澶氬皯锛屾墍浠ユ垜蹇呴』鍋氫竴涓猂escuepm鎻掍欢锛屾嫰鏁戣嚜宸便€傛彃浠跺埗浣滃畬鎴愬悗锛屾敹鍒颁簡浜у搧鍚屽鐨勫己鐑堟劅璋煒侊紒2銆佹惌寤轰竴涓畝鍗曠殑i18n宸ョ▼涓轰簡婕旂ず鎻掍欢鐨勬晥鏋滐紝鎴戣繖閲屽疄闄呮惌寤轰竴涓畝鍗曠殑react_i18n宸ョ▼锛歯pxreact-react-appreact_i18n杩涘叆鍒涘缓鐨勫伐绋嬶紝瀹夎i18n鐩稿叧鍖咃細yarnaddi18nextreact-i18next鍦╯rc涓嬫柊寤篿18n鏂囦欢澶癸紝瀛樻斁鍥介檯鍖栫浉鍏抽厤缃細閰嶇疆index.js鏂囦欢锛歩mporti18nfrom"i18next";import{initReactI18next}from"react-i18next";importenTranslationfrom"./en.json";浠?./zh.json"瀵煎叆zhTranslation;constlng="zh";i18n.use(initReactI18next).init({resources:{en:{translation:enTranslation},zh:{translation:zhTranslation},},lng,fallbackLng:lng,鎻掑€?{escapeValue:false},});瀵煎嚭榛樿i18n;浠ヤ笂i18n浠ｇ爜鍦╥ndex.js鍏ュ彛鏂囦欢涓垵濮嬪寲涓€娆★細importi18nfrom"./i18n/index";鍦ㄧ粍浠朵腑鍙互姝ｅ父浣跨敤锛岃繖閲屼互react鐨勫姛鑳界粍浠舵潵婕旂ず锛歩mporti18nfrom"./i18n/index";浠庘€渞eact-i18next鈥濆鍏useTranslation}锛沠unctionApp(){const{t}=useTranslation();杩斿洖锛?"zh"?"en":"zh");}}>{t("home_page_nav_switch_language")}
{t("home_page_main_content")}
);}exportdefaultApp;宸茬粡瀹夎浜唘seTranslation鎸傞挬3銆乮18n鍑芥暟鐨勫皝瑁呭皝瑁卛18n鍑芥暟鐨勫ソ澶勬槸鍙互缁熶竴绠＄悊涓€浜涢粯璁ゅ€硷紝鎴栬€呯粺涓€绠＄悊鍚勭鎶ラ敊鐐癸紝鍙互閰嶅悎鎴戜滑鐨勬彃浠跺垱寤轰竴涓猽sei18nformat.js鏂囦欢鍦╯rc涓嬶細浠庘€渞eact-i18next鈥濆鍏useTranslation}锛沞xportdefault()=>{const{t}=useTranslation();return(key,defaultVal)=>{constvalue=t(key);杩斿洖鍊?==閿?榛樿鍊硷細鍊硷紱};};涓婇潰鎴戠户缁娇鐢ㄩ挬瀛愮殑妯″紡銆傛坊鍔犳帴鏀禿efaultVal鐨勯粯璁ゅ€硷紝杩欐牱褰搃18n_key缈昏瘧澶辫触鏃讹紝鍙互鏄剧ず搴曢儴鐨勫壇鏈€備环鍊?==鍏抽敭锛焏efaultVal:value杩欓噷姣旇緝鏄洜涓簉eact-i18next鍦ㄦ棤娉曠炕璇戠殑鏃跺€欓粯璁よ繑鍥瀒18n_key锛屼絾鏄繖鏍风殑澶勭悊寰堜笉鍙嬪ソ锛屽け鍘讳簡鍙鎬с€傜炕璇戝け璐ョ殑鍦烘櫙鍖呮嫭锛氬墠绔啓閿欎簡i18n_key锛屾洿鏂颁簡i18n_key浣嗗墠绔病鏈夋洿鏂帮紝闅忕潃缈昏瘧娆℃暟鐨勫鍔狅紝i18n鏂囦欢澶逛笅鐨勬枃浠堕兘鏄粠鏈嶅姟鍣ㄥ紓姝ヨ幏鍙栫殑锛屾墍浠ョ綉缁滈棶棰樹細瀵艰嚧缈昏瘧澶辫触銆?.鍒涘缓涓€涓胺姝屾彃浠舵渶鍚庯紝鈥滆嫳闆勨€濆嚭鐜颁簡銆傛病鏈夊紑鍙戣繃璋锋瓕鎻掍欢鐨勫缓璁厛鐪嬬湅鎴戠殑浠嬬粛鏂囩珷锛?{"manifest_version":2,"name":"Chooseapluginname","description":"Displayi18nkey","version":"0.1","browser_action":{"default_icon":"images/logo.png"},"permissions":["contextMenus"],"background":{"page":"background/background.html"},"content_scripts":[{"matches":["
"],"js":["content/index.js"],"css":["content/index.css"]}]}鍒繕浜嗗紑鍚紑鍙戣€呮ā寮忥紝鐒跺悗浣犲彲浠ュ鍏anifest.json鎵€鍦ㄧ殑鏂囦欢澶癸細5.content_scripts鐢变綘鍐冲畾content_scripts鏄胺姝屾彃浠舵彁渚涚殑鑳藉姏銆傚紑鍙戣€呭彲浠ュ彂閫佸埌鈥滀换鎰忕綉绔欌€濇垨鈥滄寚瀹氱綉绔欌€濄€嬪湪html浠ｇ爜涓彃鍏ヤ竴涓猻cript鏍囩锛屽嵆寮€鍙戣€呯紪鍐欑殑涓€娈礿s浠ｇ爜鍙互鍦ㄤ换鎰弚eb涓繍琛岋紝骞朵笖鍙互鑾峰彇褰撳墠缃戠珯鐨刣om鍜寃indow淇℃伅鍙互鍚憌eb涓敞鍏s浠ｇ爜瀹炵幇鍏ヤ镜code濂戒簡锛屽彲浠ヨ皟鐢╳eb椤圭洰涓凡鏈夌殑鏂规硶銆傛垜鎯冲埌鐨勬柟寮忔槸鍦╥18n椤圭洰涓殑useTranslation鏂规硶涓坊鍔犲垽鏂紝褰搘indow.xxx鐨勫€间负true鏃讹紝浼氱洿鎺ヨ繑鍥炵殑鍊糼ey锛岃繖涓嶆槸瀹炵幇椤甸潰鏄剧ずi18n_key鍚楋紵杩欓噷鏈変竴涓緥瀛愶紝鍦╮eact_i18n椤圭洰涓細import{useTranslation}from"react-i18next";exportdefault()=>{const{t}=useTranslation();return(key,defaultVal)=>{constvalue=t(key);杩斿洖鍊?==閿?榛樿鍊硷細鍊硷紱};};鏀瑰啓涓猴細import{useTranslation}from"react-i18next";exportdefault()=>{const{t}=useTranslation();return(key,defaultVal)=>{//鏂颁唬鐮?----鈫搃f(window.GlobalShowI18nKey===true){returnkey;}//鏂颁唬鐮?----鈫慶onstvalue=t(key);杩斿洖鍊?==閿?榛樿鍊硷細鍊硷紱};};濡備綍璁﹔eactrefresh寮哄埗react鍒锋柊寰堥毦銆傞鍏堬紝react鏈韩涔熸槸涓€涓棴鍖呮搷浣滐紝鍐呴儴鐨勫€兼槸娌℃湁鏆撮湶鐨勶紝鎬濊矾鏄皟鐢╮eact鐨勫唴閮ㄦ柟娉曘€傝繖閲屾垜瀵箇indow瀵硅薄閲囩敤浜嗏€滃垏鎹㈣瑷€鈥濈殑鏂规硶锛岃繖鏍锋瘡娆′慨鏀箇indow.GlobalShowI18nKey鐨勫€硷紝閮戒細涓诲姩璋冪敤涓€涓垏鎹㈣瑷€鐨勬柟娉曪紝鍏蜂綋浠ｇ爜濡備笅锛歩mporti18nfrom"./i18n/index";window.GlobalChangeLanguage=()=>i18n.changeLanguage(i18n.language);锛屾瘮濡傚綋鍓嶆槸'English'锛屽垏鎹㈠埌'English'浠嶇劧鍙互璁﹔eact鍒锋柊銆傚湪韬綋涓娿€傜幇鍦ㄥ垱寤轰竴涓甫鏈変袱涓寜閽殑瀹瑰櫒锛屾寜閽槸鈥淪howi18n_keybutton鈥濆拰鈥淪howtranslationresults鈥濄€傜偣鍑诲睍绀篿18n_key棣栧厛灏佽浜嗕竴涓垱寤烘寜閽殑鏂规硶锛屽苟闄勪笂涓€浜涘熀鏈牱寮忥細functioncreateBt(config){constoBt=document.createElement("div");oBt.classList.add("am-i18n_key-bt");oBt.setAttribute("id",config.id);oBt.innerText=config.text;oBt.style.display=config.display||鈥滄病鏈変换浣曗€?returnoBt;}鍒涘缓涓や釜鎸夐挳constoShowI18nKeyBt=createBt({id:"am-i18n_key_show_key-bt",text:"Display:i18n_key",display:"block",});constoHiddenI18nKeyBt=createBt({id:"am-i18n_key_hidden_鈥嬧€媖ey-bt",text:"鏄剧ず锛氱炕璇戠粨鏋?,});鎸夐挳鏍峰紡鐨刢ss鏈樉绀恒€傚彲鑳藉欢杩熺敤鎴峰彲鑳戒笉浼氱珛鍗冲皢GlobalChangeLanguage鎸傝浇鍒扮獥鍙ｏ紝鍥犳闇€瑕佸娆″垽鏂槸鍚︽湁鈥滄洿鏂扮炕璇戔€濈殑鏂规硶銆傛垜杩欓噷閫夋嫨鐨勬槸鐩戝惉瀹瑰櫒缁勪欢鐨刴ouse-in鎿嶄綔銆傞紶鏍囩Щ鍏ュ悗锛岀‘瀹氭寜閽殑鍙鎬с€俹TipWrap.addEventListener("mouseover",()=>{//...纭畾榧犳爣鎮仠鍚庢寜閽殑鍙鎬);7.window鍏跺疄鏄€樻矙鐩掑寲鈥欑殑鎴戞病娉曠洃鎺э紝涔熸棤娉曚慨鏀箇indow瀵硅薄鐨勫€兼潵鍙嶉缁欑湡姝ｇ殑window锛屼篃灏辨槸鎴戝緱鍒扮殑window瀵硅薄鏄竴涓猚opy瀵硅薄锛屽氨鏄繁鎶勨€︹€︾悊瑙ｈ胺姝屾彃浠跺widnow鑳藉姏鐨勯檺鍒讹紝姣曠珶瀹夊叏鏃犲皬浜嬶紝浣嗚繖绉嶆儏鍐典笅寮€鍙戜細姣旇緝璐瑰姏銆傝В鍐虫柟妗堜篃鍗冲皢鍑虹幇銆傛垜鍙互鍔ㄦ€佸湴灏嗚剼鏈爣绛炬彃鍏ユ鏂囥€傝繖涓彃鍏ョ殑鏍囩鍙互鑾峰緱鍏ㄥ眬鐪熷疄鐨剋idnow瀵硅薄銆傜己鐐规槸寰堝閫昏緫蹇呴』鍐欏湪杩欎釜script鏍囩閲屻€傛垜浠潵鐪嬬湅涓嬮潰杩欐鎺у埗鎸夐挳鈥滄樉绀哄拰闅愯棌鈥濈殑鏂规硶锛氣€嶁€嶁€嶇涓€姝ワ細瀹氫箟榧犳爣杩涘叆澶栧眰瀹瑰櫒锛歰TipWrap.addEventListener("mouseover",()=>{createScript();creatScript2updataBtStyle();bodyAppendChildScript();});鍒涘缓鑴氭湰letscript=null;functioncreateScript(){if(script)script.remove();script=document.createElement("鑴氭湰");script.type="鏂囨湰/javascript";script.innerHTML="";}insert鑴氭湰鍑芥暟bodyAppendChildScript(){document.body.appendChild(script);}绗簩姝?涓鸿剼鏈祴鍊糺s鎬荤紪杈?functioncreatScript2updataBtStyle(){script.innerHTML+=`varGLOBAL_SHOW_KEY=I18N_KEYGlobalShowI18nKey';varGLOBAL_CHANGE_LANGUAGE='GlobalChangeLanguage';vari18nKeyShowKeyBt=document.getElementById("am-i18n_key_show_key-bt");vari18nKeyHiddenKeyBt=document.getElementById("am-i18n_key_hidden_key-bt");if(window[GLOBAL_CHANGE_LANGUAGE]){i18nKeyHiddenKeyBt.onclick=()=>{window[GLOBAL_SHOW_I18N_KEY]=false;window[GLOBAL_CHANGE_LANGUAGE]()changeBtStatus()};i18nKey.onclick>ShowKeyBt(绐楀彛[GLOBAL_SHOW_I18N_KEY]=true;window[GLOBAL_CHANGE_LANGUAGE]()changeBtStatus()};functionchangeBtStatus(){if(window[GLOBAL_SHOW_I18N_KEY]){i18nKeyShowKeyBt.style.display="none";i18nKeyHiddenKeyBt.style.display="block";}else{i18nKeyShowKeyBt.style.display="block";i18nKeyHiddenKeyBt.style.display="none";}}}`;}涓婇潰浠ｇ爜鐨勯€昏緫鏄紝褰揼lobalGlobalShowI18nKey涓簍rue鏃讹紝姝ゆ椂搴旇鏄剧ずi18n_key"RestoreButton鈥濅箣绫荤殑鎸夐挳鐨勭偣鍑讳簨浠舵斁鍦ㄨ繖閲屾槸鍥犱负鎬曟湁浜沬tem浼氫氦缁檞idnow.GlobalChangeLanguage鏂规硶鏄紓姝ョ殑銆?.鏈€傞厤椤圭洰鐨勫吋瀹瑰ぇ閮ㄥ垎缃戠珯閮芥病鏈夐€傞厤杩欎釜鎻掍欢锛屾墍浠ユ垜浠渶瑕侀€傞厤杩欑鎯呭喌锛岄鍏堝垱寤轰竴涓€滈」鐩湭閫傞厤鈥濇寜閽細constoGlobalNoConfigurationBt=createBt({id:"am-global_no_configuration-bt",text:"鏈」鐩湭鏀圭紪",});鐐瑰嚮杩欎釜鎸夐挳鍚庯紝浼氬嚭鐜颁竴涓彁绀烘锛屼細鏄剧ず鈥滄彃浠剁殑瀹樻柟缃戠珯鈥濓紙铏界劧娌℃湁锛夛紝浣嗘槸姣斿鎶婂綋鍓嶆枃绔犵殑鍦板潃澶嶅埗鍒扮敤鎴风殑鍓创鏉裤€俹GlobalNoConfigurationBt.addEventListener("click",()=>{constaux=document.createElement("input");aux.setAttribute("value",`xxxxxxxxxx瀹樼綉鍦板潃`);document.body.appendChild(aux);aux.select();document.execCommand("copy");document.body.removeChild(aux);alert(`鎻掍欢鏂囨。url:宸插鍒跺埌鍓创鏉縛);});涔濄€佸鍔犻」鐩俊鎭睍绀轰粎鍒囨崲璇█鐨勫姛鑳芥湁鐐瑰ぇ鏉愬皬鐢紝鎵€浠ョ洰鍓嶆柊澧炰簡灞曠ず椤圭洰淇℃伅鐨勮兘鍔涳紝濡傚浘锛氬師鐞嗕篃姣旇緝鐩寸櫧銆傝瘑鍒玾eb鐨剋indow.GlobalProjectInformation涓婄殑鍊硷紝鐒跺悗浠ヨ〃鏍肩殑褰㈠紡灞曠ず鍑烘潵锛岄鍏堝睍绀篿18n椤圭洰鐨勯厤缃細window.GlobalProjectInformation={title:['name','Version','user','env'],context:[['涓婚〉','v2.13.09','lulu','娴嬭瘯鐜'],['鐢ㄦ埛椤甸潰','v3.8.06','lulu','娴嬭瘯鐜']]};鍦ㄨ繖閲屾坊鍔犱竴涓В鏋愰」鐩俊鎭殑鏂规硶锛歰TipWrap.addEventListener("mouseover",()=>{createScript();creatScript2updataBtStyle();//Newcode----鈫搒howProjectInformation();//Newcode----鈫慴odyAppendChildScript();});鍔ㄦ€佹彃鍏ヨ〃鍏冪礌锛屽鏋滀娇鐢ㄧ敤鎴锋湭閰嶇疆鍒欎笉鎿嶄綔:functionshowProjectInformation(){script.innerHTML+=`varGLOBAL_PROJECT_INFOR='GlobalProjectInformation';vardata=window[GLOBAL_PROJECT_INFOR]if(data){varoProjectInfor=document.getElementById("am-project-information-wrap");oProjectInfor.style.display="block"vartdTitleListString=""data.title.forEach((item)=>{tdTitleListString+=""+item+" | "})vartdContextListString=""鏁版嵁.context.forEach((trItem)=>{varstr=""trItem.forEach((tdItem)=>{str+=""+tdItem+" | "})tdContextListString+=""+str+"
"})oProjectInfor.innerHTML=\`\${tdTitleListString}
\${tdContextListString}\`}`;}end杩欐灏辨槸杩欐牱浜嗭紝甯屾湜鍜屽ぇ瀹朵竴璧疯繘姝?/p>
