SVGmodal
https://gyazo.com/b5e51b9551265fb02366d85ee7fa4807
概要
モチベーション
ScrapboxにおいてSVGはimgタグで埋め込まれる
SVGそのものにアクセスするには新しいタブでいちいち開く必要がある
でもその場で開きたいんですけお!
実装
要素がONになった瞬間中身をimgではなくSVGに差し替える
element.insertAdjacentHTML(position, text);を使って挿入する
第二引数にSVG(というよりXML)を入れるのだがContentScriptからはリソースを取得できない
なのでSVGはbackgroundScriptから取得する
Chrome.tabs.sendMessage()でContentScriptへSVGを送信する
体験コーナー
SVGがその場で展開される便利さを体感していただくコーナー https://svgscreenshot.appspot.com/o/02078638d189e9e4f80a347bd29516bf.svg
課題
すべてのSVGを展開できるわけではない
ホスティングしている側がリソースに対してCORS設定をしている必要がある 'Access-Control-Allow-Origin' : '*'みたいな
拡張からfetchする場合originはchrome-extension://hogehogeとなる
WindowsのChromeでたまに展開されないことがある
現在調査中takumin.icon