From 98a95be9dc080143fe7c2b14c8f8bb9bf071e5b4 Mon Sep 17 00:00:00 2001 From: SnO2WMaN Date: Thu, 9 Jan 2025 23:39:39 +0900 Subject: [PATCH 1/3] Browser extension --- browser-extension/README.md | 5 ++ browser-extension/icons/512.png | Bin 0 -> 12023 bytes browser-extension/main.js | 92 ++++++++++++++++++++++++++++++++ browser-extension/manifest.json | 26 +++++++++ browser-extension/style.css | 39 ++++++++++++++ 5 files changed, 162 insertions(+) create mode 100644 browser-extension/README.md create mode 100644 browser-extension/icons/512.png create mode 100644 browser-extension/main.js create mode 100644 browser-extension/manifest.json create mode 100644 browser-extension/style.css diff --git a/browser-extension/README.md b/browser-extension/README.md new file mode 100644 index 0000000..df92c05 --- /dev/null +++ b/browser-extension/README.md @@ -0,0 +1,5 @@ +# OTOMADB Browser Extension + +## Disclaimer + +Code is heavily inspired from lachrymaLF/otodb. diff --git a/browser-extension/icons/512.png b/browser-extension/icons/512.png new file mode 100644 index 0000000000000000000000000000000000000000..508c05ea2db21c7c7b9b6e2776c93eab29d3c182 GIT binary patch literal 12023 zcmd6NcR1Gl`}ch`Guj}xG+UcsE3r4nxq5sJ$!;50!A)~9DuB(Qlg{#M{+vb>uhX=p4gRP6{ zEhlq+$J>_iGZ&dKj001=BCF|{Fx~Ivde|+AMAFeZa_IpPz z%!@_MWhLSrC8;aiF#e`cBbBWI9_E9cT1 zzH9{!`mvjO+RTdfoLps0R2b$FsVF`rs`|>l*N3J4ROI3-b3GFlvD=&y($WF=_*;CP zyE!B!C6zkNqs_x2gw;E|BKT63$uKGbTv{t%qy7)kmJMfTXZ9S!w*@W3mrT*uRmt|f z7nI6-oD+n?_{gvn^YuFCgiq1tRnOz&Hy%FREh~VHkB?vGQpx9=jFDyChXqRe+39sB zz#orbF=4CSDFLMI4|cu&njN(%`zSC>K`%OrYdi_wyUE59`p5-6=LUz%%gY&YL)RkB zC{G;1FwtWQ9WUeJ;-p1ZUcR$997winkD<9kgA_T4uJYlB!ht42jtNp<|YFibXv z`M`ns?3|n&N2Y}|`NM&sp`k_V>+8Rw&D|VbFJjnDr5jhSe9VLoa%uf81=GlowzqtG zOR5aj@29831a(u?6y&KQcHgeIJ)yjiiS1(%ee-xol>IS70ES&6O7)i9x3IKiNSX=C z@ar|M@!#r^z!hGrT-}AyPxMfd2fZ3F!FwoW@a^pV@PPyQn(E;xaxn2pH#e5iX&U}A zj&)5sadWb(*RCb-o|4SW$FM+a#$1EaB$wBe35!ffD4Y5n11f2t-gROn_M~;Q3pC=l z$i@hGlZ^)t9td!9#j8?cSg6>bXiMww-@lhh3yukMhXU<;>2`Mc-pHW0#4>s80#1Vb zNm7#3*Mgk$5quXS$S^FGe4ysM)0SF|XWs#=v0&s8I+gxj33{rF-hB)K>+HMs>?_mk zkRcq0k1yAsU_(Jpm3>dqc-ie= zU&IX}PM!-}kMLkW6%dR`9~hfW2yvyH$m_?=lSBNt7{j*j0#8%TN@VYW2W zztJ={HYWLVL>j|ZgN8&~V%=R`7dhsC(qVxny11cz1zcNAlbjeLw{$_s(e+^!SSuo!RaC3olH{hRh$B?`FKld?D z$0Qa=-QM1=q^cUt85JGx0QYm+m8_7Dltv(mqx_ znM;g|V}g7AJbAQM(U}%|uRl=jx3sy?n*93{DTA-EL%@HY=8S&PRnRg)=Ka;t$;tQ= z3OG+#<`gW`T^qD(>El5)o>Ql?+FQfI!wH*f3sFf)4jhae`?pRE-@xdj)ipHE`z+hZ z$%}09X=`dmZf}lC^Kx-$x0^51ygkle|~nDoqb?RjGCIdd}F2}_zBf& z`-{u>7k|Z=c*A<=qn6fyZ5LW*5k9L0(9pjVJ-&O%##0WDjGU&YLVMczre?FThQck$ zT#re};@Wk~_XDD&a3>iunQzo1Y9#5SQof#TmhWr+d8qp^EUZh>)jgP`A-a|1q4>a_q1^w z!a@?^N_obF2swHO7h~txTSzAou4DA>(E=uHi?O7Q8WJ-+PVVb7#Gk-u<>3^c8yjgR z?rO6KZ01X?4L?h14wlx^(czVr9+*5T6O1H2(vrv=>9QOZ73DpZUw`KbmH*0T?&Qq$ z^tyk)s9vAoZGL_>Rd2YME$>Fvw5guL@l_W55SlPP4eWbMB)uI;ejCeKMMc6q$*tehRhSb4w%3}If)8eA zW>PgWbihkzZp9GR9Si<=9_;vk!_tQTEH1j%PtrSpp5D;ck0YFIyOJp3 z(Y=fA;!U&V#qmxpLqj_=ktQYy_nf@)iPI+vYc_u?ORf$E%UhgqJ#_eRR(W~Pd8&W!Nc`Mp@+8xf~L8PmcG4t<&6RZJJi1i+z& z6o-cHGc9zveLJ*yPo+E=MqkoXVxR5MU(Oicx)xAm2LAUJ?}-zaqs=u?86EiUwvGlsecD@)Gmc4q<;Nm zdinDBbbkfmn=i+qoiUxGq@ZXVImR({ML{9kaiF?x#ATJ;Uj{bgzP>zdJGET1w6xSy z=A8PJD8ust&M0w`j^y~gQV(pXZe-VsJ7}!ahDpjAgpc=1w{I7ed(1l6NiksW1<;c( z;0MF{w^!zVd{_tP8P>Gt676nGM)$1OsQIKPaAR^iG}{~;a4;Q zm2KaA_me(2q7A&i%V3<@oom1xJ1vU4?c#!Va2V}C&}%iIx5QrDX)q9G<3aaFb5Z~s zo(`Bh0aHDRdH&pLak(aebe|nvR;6t4p3f!Cn{HYL2H7g{B8+eo=g@bSzc&N?{j0$n zgf>&|Ox?gNcr!4c2qR6<$Rd8D^0A!4mUAM>3#2(-G{ypM&&%sAKnWVtg`n%`?mMm> z2?SrZo1E<5Cj}7xzLq+gm@bHI(n+Vn{`CCT7jM|v<>ap!VpM;gz-`1tMp}UzMsh?q zX*NG!6DS5kJa+2XFKO_cp2i&O->jy1uZ}0LUH>wLuW9^p(YBmf0fAs+%gS5=d zt6g1P#`R8GX#}!9Z6l-HGX^CP5iv~78F|D1H(2Mt@LI>K_G7~G*RF+jbaYhWg6L6L zl;KE$|Gs=tQdD~+^3stdvWA=cNzXEA%x^%#s_3#`8sQBYU%*@%}zUjgpCj53D@ZZRFpZ%T-*9Z|q(^7jE>3ZCEBLI;EQxZpAwOgV$Q&YGIz*;0<_oG3 zMW9o^hKI*e!==>S-9;GKj_06Ih9evcyaxf2fr0EeC##gNu9%pZe*WKgweiNea8@5y zYEdp6hRM)>tgEvDRN?+_48kwd?@-`qROb(l|6OY4{0#X(V6l&Sy#b*gzvdAWYJ z4!%2rOF1$ohP(bp3h$*|fN%FfkZ8}mkt%HSm1nx|t%hl@F3b28LPN!TffIZ?knXOo1Y&ag47no|I!x) zJq&pQ7uD}M6z09qe8FvNiIA<8t!=DuiAIhLB5!15WLm{cxw2!;R!LnrJHFv6Kk&r+chh62#&p zeNc3ogy)Rt`CDcFw^#5r+vWaC*(P4ByKjLD$Ii(3`c|f^CFj*_{t{rJl?k4!Qy=u{ z%uv&DcAh`Q-kGJr-5htmv0*z_$kGNpxx7WGX0$nLm8r3-Yti3-|9yy+H8&)Lf{T-r z=j_=V4<9~+%s^X7=~2tYg=<9j#_hM)zf$lrIX*4x7hTJ$qIN*2#nc3N$2>fxXVtI;~3jWs$&Kv=Lh-Yb{OL=R3 zsdMmMa2L!Ycjby_Lcu)R6N8EG4G9w68h-f?BK8MoyB~2qQ!f{E1@}MN`?gFpjH`iWdF- zX)i)K0Qf^4YPQ^~mbwkVX)K8A2kS<^qCR+XEWe)3_69*BWgOI??J7hDz?j}+FYXI_ zFIx3`jV7+oeV~JoH|bW?$#l{4O;W(N*Q@k&Z`R#x5Rqhrz7hzwaHjIv>J8VmUop1Z zn``SJ{wkcCQlhw9hfAwuMlxx0)L0=1<(KrFlyq!gU&=jRj33yPFCFl&fXK{U?_7y< zyQHY7=>7XM_tImN&G(Z$b5vlccbc48K>QPV6*C=OIwrZ0)NpeSJRW$h#VfhkcDWpo zc@>VF4viL_)wdgVM+XFdP((=iyq z9k5*Ut4D(39m*9~zWX>nuF*Q@|1nt@E3=yYUKJ|e`h5sB!ZcMlm#^RQP0!nQ^U2BIPA)@u3S&FX!_(G$VIT*o zI?yu4^-npCyvJX~iMgCqAlDb&b|tGd1!+Sfk%TN7WFf(+N@M6wG>;Q^d(GGQTYT?6 zKsYiFR+oDnmj;9BCb|tAwE+4MoQ2(|bhqZi0~W>i{P~1fWc@6!X4@Om(S`-O8AfUU zi;f5EULb+r!Lf+FgrwFM+)YoZV{(R`L;3hgha+Ffcf1Ek*Jg8dUccJ+ZHCzP+W252BMjKXv9z*T;tk zmr854nxAcrCi(DR*lROHR*F^Z_Q$1u$g>{b+s`_&ZcIT5m;Ao((P7@jS7)?bcWsckV7lN z;x9OM+n4sIcXX)htkl)l+k$s{gu}VJ3B-jXANCPca%p3L^nFQ!av7XC($Z{+b`#v)7(H2e5Uwr&{h2Z|u3t1NV zG_g~BneYBz`+$xfN+4@Z2ffMp$zZ(TS;2lzuCs$ltT<0MtCpQlF zB2rBmrU1c^y{FQvaHKVP_DkNa5BHqo2k8;hl(l`;e1g_cz|VHUVj-zo5!<)rNmAmHYW4xYSr9c5XwvOA+j3knOD z;4T;kI;;JBjJ$qD)vcu5g41GKOZb2;@b{s!Z^zT)4;?&c>Px4JF8MkjD_F~XQ&R>~ z0JknJ9mf8kd!UpUry{Tv`sJ=!^O6_7d#37_I@rUQFc>2`0j{$1T`*rj38 z1#xz6B;SNKm^ZZMj1v$jN=i!S%6D-?DuE?@6>7bh+S8+Nx{&(vC34Hm@!`+FU1O@R z)6%ZM)VOw59Yg24e2p-qe&@wFkZK6Wu# zg`Rr*+>|=jCJCF837#IPF+r4zh%_X~ph9&cLkj3c>hnsWn}9<2%Ld6!7v>?8!%}W^ z<4y3tf8RD;5E6onvMwB5fqYhOZdcrS+tB7we{3cNEz&%k8|1S*l?6ryLlIY!(taDV z^Ta)G>Y3^a0-h zSK??Vf;MZhI#t-JsiR|Q<_;)7tm%^ndU`VZ^=ozT4^N5HJ;fU8>Jd+g=p1pUfbse^ zwZkJ!dmy0{KIg-L5j`)`JG(R6S+~71KgF?UJHHT%ZDUaK+N7$iEOd?meJ=z!!hWE- zzhMgWiz$`{_QXL|V&7|F<^ZbzPz!BZhI|rBAzou8d&8#;{GhzW1}nNjI|+{&VUZ2k zu82r)>&^nbRX(NpL>4l^V07^%5fOih;Y`g$cGrep#qS!_&DAefkKs3}#2qL=Fm-%N zHBp?gH(=)NC{sm-coXmG(~t+bUAOpDU!M(!h)4qmkzHANk;g>^w%q{+8I_R0vPcBD zD4R^ZSEfNxMFnxcRk$C@bQk9WGd3)np8pv47jAV7*f6js7QFi0s-~t!fCRv`U59w_Zm5W zI;>ygUj-pA8*p&Xr$|~2eSI4L)#NcT8V3Haatuahf_j}S z;;s!1hB)lGET{wBK4y_?JAv`%Po}LtNCG6m5r1iF5`L01{^iS;(57EhfsAk|PI{33 zfzRUVbyzof2T1(IeYOr@uMd7SYc`#rLdYA;`P`1o2MazwV)*0D@Kv-b1^$rxLt#mRhouY&?PGoj3FF!|T``$Em!+(gf=_y zJR2QXVKYK(2@EbM=xCsEQ&fD|UOIUG&_C>kpuQ&Z6iR0f7dwD-&IJyqh4raKx zy)k?LQ&V~h7Q%oguX}DxM%C3km zUm6>iR)@kVkKJ&3zW%jZhC_x-Fc1j?80QUXz=2vpGAW;hAk%Og@LNFyxa_s=i|Ko1 zpw{y^faVngI$99Ob`oH#O~=zfNaYb)(^OT(1(~VDJb7}{EH5jZamRu@IeB@NA<&qn z=27cbc^3nUTTd}opyxXoj&ZCadI0k;F|FUP5+|$(zNQ_8bKljuAqU1vk6Ghfy+V2A z7=GGVnr&51F)?C8A9%SFE?YQq`oG<0`mzSLmrIT7sr3F=Ce-&!z3aqR#X^hba|Hn- zO|d=IeicuNg80nLOubh4qXT>vJWd591b5mJ!HGfu7~5X?D?{q)>i_6uAic|Q!vQd; zPm@QhH4P1Ydq^ul7S=5XK>E5#yc_`;xm(XUCY!%aO#v{OA(P*i2O1_mtJ`t)R|M>>otI#=uGYbwo3JDULh1_YdmJDIQ z2D=&*#o|6eFdy&u)L^%t6u;wam2GTZqZn=`vQj6AV2)KZo22*AconjLeuHZD(fBI+ zUJ=tm5F2{GLmy5-4U;MUkN14`sjludP#W?Uv%RI^;p8HS%&{tf>Zc3@9(fCw)qy`= zdwprr(ry{izW;dbqmVG=6W7+(>MVAA-^;W#&ZQ}0XTuaQJdn3B$A-;<2|=ugjXl*X zvT#lvNCluf{>SImb|Uvl&FFMYXHK7fv_QJGv&|ylj=>``$FfpU0J#Ct1xgPflpgaK zBMZCb=racCg%a8rw%-%=0=Ui%%KjVDZb068-tL>A=>j3wz|!uYabEynp(tgy4X5}| zjAR75Jf8>vejOZoXmkBe$-$9*OO1?7nkB zfHTk|C;ck#C3Q%y^Vbd^J`4`=+&_pywQ*66#H*ciT}36Vo%PSRN)U+3ha;3jXLJk9 z9{!6|lu&-qUb+p(0~V|Hn{UEVG_g8jcs74GhRt|_c89gpKSYt38^L>Ec$nf%G&E9y zr(yaRI%PsGg3{=AR=}PeP<{)Ysr@rV7%Gg!5@O85PmdXx6aOGBoY2i$jFw%hZw$A& z>1+SJk~p?M0YO=(&<78w0QVAClVVK#iL3uU<;7R3BMmP%g#slUx)=@xr2}j*6O^Xk zz1O~OrSkU|-n|s$bt{9zD6poUR7=VMx+GNsila-wQvrtUM2fq^$Im~)56D`-qr9)6KK!wpzMxn@r1Up{> zxDR;#ap!qn)v`V<+r@8DMhhd&Lw=+khC~X{DJlt~?NLVPCXJ1gAggc!y_t&zv|)o1 zv(QlC>g|II2MK6=#gflfLHsHwLFvrq)>2AE<3IO0;4FZ7HG$bLr4fll;|VwCz6! z2y!wjBk8sq_n+KW2Gy`pRr>7N_O2>(bMtawKY-L9oiG+=hhx3(15{K5ThqZW$5czq zO567c@8r4+?{00Ura%veq2E$hoUnC-UGG-%Xp--5MJTOTR5QE-EE6br2ne@R8tG$? zc=P7WNKhwT{P|eGyMX!6Ta=wOCrKJW9Gf>I>6rMv+L)~|!3}v9u)li;B}saDs5oWE z7<+#%WFP^^n}keK+uZyW_r`&XK&=J}LROtuy>5e8sYjuUBlwxuuTO&|#XjEFr-HMG zl!2vejRtII+@ob4(Ywb!vsemcyw-CZWneD!@AuHLl_BO?#>`z|!2`sVTD$18Czp#+lvBLt4_Z}}l(=7(;H5A6*8 z_?cmk({MOposEraV}12w2|w)^!u(fJ(U$`wl_p^VAo>qe)l+mg^2Z* zL_K}_g4v-=7BZnZ@fJlbEiG#xhx7|A!U#78$>0Jg6f4}P7qd;al!ofUG{B7kGp0nj zpQSBL@mX1EO*r`16h;(%tlBujSS7T9)uDY$v!RM=G{BTIBu|XGfGn-j8XB(BvWQ*> zRmi$W$DSwDBKl$SDs74Pl1+aAY3p@n=A8K6ivVE*_n=HXMK(AR92I!v9bWfp*k4o> zi_)Y8Y40C*89d|JIbq$w5Xf3wx7S9qq0tM_^;gg#Zs?T4b#VgO(NSdGiAwBlheGJ# z90P^+1_+RNLoNvTAk$;^JCsB$uU6aR^P#=uC8)SlHG4fZY1RR=N&zhzhv=vc=Z%Vs zdku8MYbd==bi8^DxTgxopb0D=VqKEFCr)*BcY6b84FJLy58))k?^=dxV(7H=N}mf@ zp{1R_GLRIhKotWwoC(F0h%`tDxK5rt4eS{-e<)qOdL0t57O4%pV*B3ip^r1)Dm?Ir zX@YzRpUM%U2c;B4+Bjs1bR;Dw=NdTT zPUtPD#N83xvEEWU;yFYngIh3GkUa{{ROUG>+&)DtEQa(H=HCaB?$ShliBLWbxKB>Eww z;lW2x@!*&hI45*vi$Hj0qm~R&s~}{!mmumFS+yTOV_d1LfMb~#->)x-%smib?L?H0 z@lNdq^(73|?%2W$f$G&uh|>r6f?r?vhUW^%MhYM)$u+Lh$5$;wUq{cd8_Vh;FnvSR z)&N9})p*A%anHFFg7YBKLcz>}0(D-UysuC_TD4|Bb{DoN>%Ka7E7zz(8vzuEZuPyZ z^bu%_6abOFeE!@Hlw~F)bI*C#4*Z7aZC8L0Lk0pYLXq>3JQO0mSgEbh?uBJI=-Z(9 zR&3pQ5{Nt=sG7Zc^~$)OJPryP7&ij8s7eR9iuRu(fTo__xEmjb6-?`!TU4Y8$aoz} zK1Cp4)Ib6>){woo6(afcS?Zl38oe0WKE=!1385R++@`-*8Nd(#@xR6S2dSZM*FP^# z(RTgp*|UHi7R2{lx?*oX-Oe!g=+Ry=oJ$h{OJGsJ=(YdT3jr1QLX?hReJBb1f8Qv}&U@$K61LgRl1*sNW?(zeyl8lCE_}FXj?t(Jy?B>)p{sgh>wAr_2b4BYN?_kL}3I%K97u9aqqPTlPMmkGHX0szURgvDTR}06W&ycdebr%fZ7$tZ%I^(J++n~9EAb}HV=+cCv zrWJ#geehr3y+J`&uF%Iwj|D~_r>COWUTihFn1?|}Suqjq`i*CowUl5DNM@Rbk8Yd7xDOF^P$O@7c%HbTLkA z7(c71f0GaT7zM}kD=RBY)t2MA&tMUn+S<$9if?7ZK}?|_O7IaA)f$o`k-Kj~j8%ZV zSs-T7{Q5Jv1&xy462DK7FzG|PXkr0&wWBVKd4*UaDX*^B_7XlgsASh$EzHY1S;Ri) z(L>Im2+cNfK{7Xs(j=R4a97uOprKOJ-QE4hWwyQ)c+V_i$MYaGv?)^a+prbLBm_?$ zR4WG}jb~mD*~5S-0%hap3{A6g5x1FGX(47Mn(OI7)*1|5vTt(Fw%TfvJxN0yw{Vm9 zbfeEJ^l^g*;6M}I+1&DFiamLMz9GYTEbu-@qT(N88eBL@PLzce&7?4uwL zS7Ks`3<9mr=vFG{zHs3J58=n|Tx=7%oBcA=PQm);GK0ymxs32Ljd9POJzH=PyuYUk z+eA&n4B|MK)HGYpL~}E^#50|2iuj(At-nDo)em>q?X9KTX<7w0stnSwYAldfDwl~c zcLmG&@yVGbqqZO?DoAE<3qqIwDirSs@rG8F*k+;s)_QR%AMc6d$A4M^=W*X$Pm*>bGHn@W^yta=vmic9 NQBL(r-ldy&{u| { + let t = get_target([]); + if (t) return resolve(t); + + const observer = new MutationObserver((records, observer) => { + let target = get_target(records); + if (target) { + resolve(target); + observer.disconnect(); + } + }); + observer.observe(mutation_host, mutation_props); + }); +} + +async function init() { + console.log("otomadb: Init"); + + switch (window.location.hostname) { + case "www.nicovideo.jp": { + const $target = await waitForTarget(records => document.getElementsByClassName('grid-area_[meta]')[0]?.firstElementChild, { subtree: true, childList: true }); + await injectContainer( + $container => $target.insertAdjacentElement('afterend', $container), + ); + } + case "www.bilibili.com": { + await injectContainer( + $container => document.querySelector('.video-desc-container').insertAdjacentElement('afterend', $container), + ); + } + break; + } +} + +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', init); +} else { + init() +} diff --git a/browser-extension/manifest.json b/browser-extension/manifest.json new file mode 100644 index 0000000..d4c314f --- /dev/null +++ b/browser-extension/manifest.json @@ -0,0 +1,26 @@ +{ + "manifest_version": 3, + "name": "OTOMADB Browser Extension", + "version": "1.0", + "description": "-", + "icons": { + "512": "icons/512.png" + }, + "content_scripts": [ + { + "matches": [ + "*://*.bilibili.com/video*", + "*://*.nicovideo.jp/watch*" + ], + "js": [ + "main.js" + ], + "css": [ + "style.css" + ] + } + ], + "host_permissions": [ + "*://localhost/*" + ] +} \ No newline at end of file diff --git a/browser-extension/style.css b/browser-extension/style.css new file mode 100644 index 0000000..ca8453b --- /dev/null +++ b/browser-extension/style.css @@ -0,0 +1,39 @@ +#otomadb-container{ + padding: 12px 16px; + background: #272727; +} + +#otomadb-container .otomadb-title { + font-size: 12px; + color: white; + margin-bottom: 8px; +} + + + +#otomadb-container .otomadb-otomad-title { + color: white; + margin-bottom: 8px; +} + +#otomadb-container .otomadb-otomad-title > a { + color: white; + font-size: 24px; + font-weight: bold; +} + + +#otomadb-container .otomadb-otomad-taggings { + display: flex; + flex-wrap: wrap; +} + +#otomadb-container .otomadb-otomad-tagging{ + display: block; + font-size: 14px; + padding: 2px 8px; + color: #2f2f2f; + background-color: #f0f0f0; + border: 1px solid #2f2f2f; + border-radius: 4px; +} From 5aaba823e43b22d91796a1b919f4bb3316247bbf Mon Sep 17 00:00:00 2001 From: SnO2WMaN Date: Fri, 10 Jan 2025 05:14:10 +0900 Subject: [PATCH 2/3] platfrom crossing --- browser-extension/main.js | 33 ++++++++++++++++++++++-------- browser-extension/style.css | 40 ++++++++++++++++++++++++++++++------- 2 files changed, 58 insertions(+), 15 deletions(-) diff --git a/browser-extension/main.js b/browser-extension/main.js index 5fff137..e1e49fc 100644 --- a/browser-extension/main.js +++ b/browser-extension/main.js @@ -26,27 +26,44 @@ async function injectContainer(inject) { const $title = document.createElement('p'); $title.setAttribute("class", "otomadb-otomad-title"); - const $titleLink = document.createElement('a'); - $titleLink.innerText = data.title; - $titleLink.setAttribute("href", new URL("/otomad/" + data.serial, "http://localhost:5173").toString()); - $titleLink.setAttribute("target", "_blank"); - $titleLink.setAttribute("rel", "noopener noreferrer"); + $titleLink.innerText = data.otomad.title; + $titleLink.setAttribute("href", new URL("/otomad/" + data.otomad.serial, "http://localhost:5173").toString()); + // $titleLink.setAttribute("target", "_blank"); + // $titleLink.setAttribute("rel", "noopener noreferrer"); + $titleLink.setAttribute("lang", data.otomad.titleLang); $title.appendChild($titleLink); $container.appendChild($title); + const $taggings = document.createElement('div'); $taggings.setAttribute("class", "otomadb-otomad-taggings"); - for (const { tag } of data.taggings) { + for (const { tag } of data.otomad.taggings) { const $tagging = document.createElement("a"); $tagging.innerText = tag.name $tagging.setAttribute("class", "otomadb-otomad-tagging"); $tagging.setAttribute("href", new URL("/tags/" + tag.serial, "http://localhost:5173").toString()); - $tagging.setAttribute("target", "_blank"); - $tagging.setAttribute("rel", "noopener noreferrer"); + // $tagging.setAttribute("target", "_blank"); + // $tagging.setAttribute("rel", "noopener noreferrer"); + $tagging.setAttribute("lang", tag.nameLang); $taggings.appendChild($tagging); } $container.appendChild($taggings); + + const $sources = document.createElement('div'); + $sources.setAttribute("class", "otomadb-otomad-sources"); + for (const source of data.otomad.sources) { + const $source = document.createElement('a'); + $source.innerText = `${source.platform}`; + $source.setAttribute("class", "otomadb-otomad-source"); + $source.setAttribute("href", new URL(source.url)); + // $source.setAttribute("target", "_blank"); + // $source.setAttribute("rel", "noopener noreferrer"); + $sources.appendChild($source); + } + $container.appendChild($sources); + + inject($container); } diff --git a/browser-extension/style.css b/browser-extension/style.css index ca8453b..ebe5562 100644 --- a/browser-extension/style.css +++ b/browser-extension/style.css @@ -1,22 +1,23 @@ -#otomadb-container{ +#otomadb-container { padding: 12px 16px; - background: #272727; + background: #252525; + border-radius: 8px; } #otomadb-container .otomadb-title { + font-family: sans-serif; font-size: 12px; color: white; margin-bottom: 8px; } - - #otomadb-container .otomadb-otomad-title { + font-family: sans-serif; color: white; margin-bottom: 8px; } -#otomadb-container .otomadb-otomad-title > a { +#otomadb-container .otomadb-otomad-title>a { color: white; font-size: 24px; font-weight: bold; @@ -26,14 +27,39 @@ #otomadb-container .otomadb-otomad-taggings { display: flex; flex-wrap: wrap; + column-gap: 4px; } -#otomadb-container .otomadb-otomad-tagging{ +#otomadb-container .otomadb-otomad-tagging { display: block; + font-family: sans-serif; font-size: 14px; padding: 2px 8px; color: #2f2f2f; - background-color: #f0f0f0; border: 1px solid #2f2f2f; border-radius: 4px; + background-color: #f0f0f0; } + +#otomadb-container .otomadb-otomad-tagging:hover { + background: #c2c2c2; +} + + +#otomadb-container .otomadb-otomad-sources { + display: flex; + flex-wrap: wrap; + column-gap: 8px; + margin-top: 16px; +} + +#otomadb-container .otomadb-otomad-source { + display: block; + font-family: sans-serif; + color: white; + font-size: 12px; +} + +#otomadb-container .otomadb-otomad-source:hover { + text-decoration: underline; +} \ No newline at end of file From 10f48dddb1de9cddd471a8ab921c1048e4fbbd5d Mon Sep 17 00:00:00 2001 From: SnO2WMaN Date: Mon, 13 Jan 2025 10:38:00 +0900 Subject: [PATCH 3/3] youtube support --- browser-extension/main.js | 103 +++++++++++++++++++------------- browser-extension/manifest.json | 3 +- browser-extension/style.css | 5 +- 3 files changed, 69 insertions(+), 42 deletions(-) diff --git a/browser-extension/main.js b/browser-extension/main.js index e1e49fc..4bbffa5 100644 --- a/browser-extension/main.js +++ b/browser-extension/main.js @@ -11,6 +11,8 @@ async function injectContainer(inject) { $status.innerText = "Fetching..."; $container.appendChild($status); + inject($container); + const apiUrl = new URL("/api/extension", "http:localhost:5173"); apiUrl.searchParams.set("url", window.location.toString()); @@ -24,47 +26,60 @@ async function injectContainer(inject) { const data = await res.json(); $status.remove(); - const $title = document.createElement('p'); - $title.setAttribute("class", "otomadb-otomad-title"); - const $titleLink = document.createElement('a'); - $titleLink.innerText = data.otomad.title; - $titleLink.setAttribute("href", new URL("/otomad/" + data.otomad.serial, "http://localhost:5173").toString()); - // $titleLink.setAttribute("target", "_blank"); - // $titleLink.setAttribute("rel", "noopener noreferrer"); - $titleLink.setAttribute("lang", data.otomad.titleLang); - $title.appendChild($titleLink); - $container.appendChild($title); - - - const $taggings = document.createElement('div'); - $taggings.setAttribute("class", "otomadb-otomad-taggings"); - for (const { tag } of data.otomad.taggings) { - const $tagging = document.createElement("a"); - $tagging.innerText = tag.name - $tagging.setAttribute("class", "otomadb-otomad-tagging"); - $tagging.setAttribute("href", new URL("/tags/" + tag.serial, "http://localhost:5173").toString()); - // $tagging.setAttribute("target", "_blank"); - // $tagging.setAttribute("rel", "noopener noreferrer"); - $tagging.setAttribute("lang", tag.nameLang); - $taggings.appendChild($tagging); - } - $container.appendChild($taggings); - - const $sources = document.createElement('div'); - $sources.setAttribute("class", "otomadb-otomad-sources"); - for (const source of data.otomad.sources) { - const $source = document.createElement('a'); - $source.innerText = `${source.platform}`; - $source.setAttribute("class", "otomadb-otomad-source"); - $source.setAttribute("href", new URL(source.url)); - // $source.setAttribute("target", "_blank"); - // $source.setAttribute("rel", "noopener noreferrer"); - $sources.appendChild($source); + console.dir(data.status); + + switch (data.status) { + case "source_not_registered": { + console.log("Source not registered"); + } break; + case "otomad_not_registered": { + console.log("Source registed, but otomad not registered"); + } break; + case "ok": { + console.log("Otomad registed") + const { otomad, originalSource } = data.data; + + const $title = document.createElement('p'); + $title.setAttribute("class", "otomadb-otomad-title"); + const $titleLink = document.createElement('a'); + $titleLink.innerText = otomad.title; + $titleLink.setAttribute("href", new URL("/otomad/" + otomad.serial, "http://localhost:5173").toString()); + // $titleLink.setAttribute("target", "_blank"); + // $titleLink.setAttribute("rel", "noopener noreferrer"); + $titleLink.setAttribute("lang", otomad.titleLang); + $title.appendChild($titleLink); + $container.appendChild($title); + + + const $taggings = document.createElement('div'); + $taggings.setAttribute("class", "otomadb-otomad-taggings"); + for (const { tag } of otomad.taggings) { + const $tagging = document.createElement("a"); + $tagging.innerText = tag.name + $tagging.setAttribute("class", "otomadb-otomad-tagging"); + $tagging.setAttribute("href", new URL("/tags/" + tag.serial, "http://localhost:5173").toString()); + // $tagging.setAttribute("target", "_blank"); + // $tagging.setAttribute("rel", "noopener noreferrer"); + $tagging.setAttribute("lang", tag.nameLang); + $taggings.appendChild($tagging); + } + $container.appendChild($taggings); + + const $sources = document.createElement('div'); + $sources.setAttribute("class", "otomadb-otomad-sources"); + for (const source of otomad.sources) { + const $source = document.createElement('a'); + $source.innerText = `${source.platform}`; + $source.setAttribute("class", "otomadb-otomad-source"); + $source.setAttribute("href", new URL(source.url)); + // $source.setAttribute("target", "_blank"); + // $source.setAttribute("rel", "noopener noreferrer"); + $sources.appendChild($source); + } + $container.appendChild($sources); + } break; } - $container.appendChild($sources); - - inject($container); } function waitForTarget(get_target, mutation_props, mutation_host = document) { @@ -84,7 +99,7 @@ function waitForTarget(get_target, mutation_props, mutation_host = document) { } async function init() { - console.log("otomadb: Init"); + console.log("Init"); switch (window.location.hostname) { case "www.nicovideo.jp": { @@ -93,12 +108,20 @@ async function init() { $container => $target.insertAdjacentElement('afterend', $container), ); } + break; case "www.bilibili.com": { await injectContainer( $container => document.querySelector('.video-desc-container').insertAdjacentElement('afterend', $container), ); } break; + case "www.youtube.com": { + const $target = await waitForTarget(records => document.querySelector('#bottom-row'), { subtree: true, childList: true }); + await injectContainer( + $container => $target.insertAdjacentElement('afterend', $container), + ); + } + break; } } diff --git a/browser-extension/manifest.json b/browser-extension/manifest.json index d4c314f..5ffe0bc 100644 --- a/browser-extension/manifest.json +++ b/browser-extension/manifest.json @@ -10,7 +10,8 @@ { "matches": [ "*://*.bilibili.com/video*", - "*://*.nicovideo.jp/watch*" + "*://*.nicovideo.jp/watch*", + "*://*.youtube.com/watch*" ], "js": [ "main.js" diff --git a/browser-extension/style.css b/browser-extension/style.css index ebe5562..a56fb0d 100644 --- a/browser-extension/style.css +++ b/browser-extension/style.css @@ -1,5 +1,6 @@ #otomadb-container { padding: 12px 16px; + margin: 8px 0; background: #252525; border-radius: 8px; } @@ -21,9 +22,9 @@ color: white; font-size: 24px; font-weight: bold; + text-decoration: none; } - #otomadb-container .otomadb-otomad-taggings { display: flex; flex-wrap: wrap; @@ -39,6 +40,7 @@ border: 1px solid #2f2f2f; border-radius: 4px; background-color: #f0f0f0; + text-decoration: none; } #otomadb-container .otomadb-otomad-tagging:hover { @@ -58,6 +60,7 @@ font-family: sans-serif; color: white; font-size: 12px; + text-decoration: none; } #otomadb-container .otomadb-otomad-source:hover {