Twitter 新UIで画像をドラッグ＆ドロップできるようにした

タイトルの通り。

2019年4月24日からの新UIになったそうですが、最近まで自分の環境は旧UIのままだった。

が、いつの間にか新UIに変わってた。

めっちゃいい。ダークモード欲しかった。

ただ細かい部分として、投稿された画像をドラッグ&ドロップでデスクトップに保存みたいな事ができなくなってた。

たぶん著作権保護理由なのかと思ってたが、スマホアプリなら保存普通に出来ちゃうんだよなぁ…。何故PCだけ…。

なんか、きっとchromeプラグインが頑張ってくれそうと思ったが、chromeのデベロッパーツールでどうにか拾えないかなぁと考えて、試してみた。

デベロッパーツールで画像URL取得(手動)

めんどかった。WindowsだとF12キーで出てくるデベロッパーツールで対象の画像URLを見ていく。しんどい。

そもそも何でドラッグできないのか

<img alt="画像" draggable="false" src="画像URL" class="css-9pa8cd">

このように、HTMLのIMGタグ内にdraggable属性でドラッグできるか可否を決めている。
なかなか使わないなぁ、この属性…。

Javascriptで操作してみる

draggable属性をJavascriptで変えたらいいのでは？と思いやってみた。

const imgs = document.getElementsByTagName('img');
for(let i=0;i<imgs.length;i++){
  imgs[i].setAttribute('draggable','true');
}

デベロッパーツールのコンソールにJavascriptを流し込んだら上手いこといった。ちゃんとドラッグできるようになりました。

毎回ページ開く度にこれ入れるの辛くない？って思ったけど、時々使う程度だったからこれでいいかな。

拡張機能で出来るかなーと試したけど、なんか上手いこと動かなかったので、出来たら追記しますー。