はてなブックマーク

はてブをよく見る。よく見るんだけど、トップに顔画像がある率が高い。それを隠したい。ていう拡張を作りたい。

試行錯誤

はてブのエントリーイストのサムネ画像のところのタグは

<p class="entrylist-contents-thumb">
    <span style="background-image:url('https://example.com/image.jpg');" data-gtm-click-label="entry-info-thumbnail"></span>
</p>

みたいなんで、とりあえず

var cls = document.getElementsByClassName('entrylist-contents-thumb');
var imgurl = "";

for (const c in cls) {
  if (!cls.hasOwnProperty(c)) { continue; }
  const s = cls[c].querySelector('span');
  if (!s) { continue; }
  imgurl = s.style.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0];

  console.log(imgurl);

}

こんなコード書いたら、URLとれた。

こっから最高に行き詰まり、非同期処理やらimgの扱いやら、さっぱり分かんねぇ。わかんねぇなりに頑張った結果、拡張ができた。

 

https://dalomo.net/app/HatebuARuFanize.zip

 

例えば今こんな感じだとして

 

 

こうなる。

全部確実にというわけにはいかないけれど、そこそこ隠れてるのではないだろうか。

特に政治経済カテゴリはおもしろ政治家写真が沢山サムネに使われており、それがちょっと苦手なので目が隠れるだけでも見やすくて良い。

 

参考

http://alphasis.info/2013/10/javascript-dom-styleobject-backgroundimage/

https://developer.mozilla.org/ja/docs/Web/API/Element/querySelector

https://stackoverflow.com/questions/42368773/cannot-read-property-style-of-undefined-uncaught-type-error

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for…in

https://stackoverflow.com/questions/21655367/why-does-elem-style-backgroundimage-return-empty-rather-than-the-css-property/21655410

https://teratail.com/questions/189045

https://qiita.com/reeeiimi/items/759eebcb61b49556261b#comment-b0533f37f0029f9ad4cf

http://tech.hikware.com/article/20180204d.html

https://qiita.com/chihiro/items/9965cd7eca0380cf288c#%E5%8F%8D%E5%BE%A9%E5%87%A6%E7%90%86

https://qiita.com/sin_tanaka/items/b17a099d2a6a5e9a94b7

https://developer.mozilla.org/ja/docs/Web/HTML/CORS_enabled_image

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map

https://please-sleep.cou929.nu/onload-handler-setting-timing-and-async-request-of-image-element.html