はてなブックマーク
はてブをよく見る。よく見るんだけど、トップに顔画像がある率が高い。それを隠したい。ていう拡張を作りたい。
試行錯誤
はてブのエントリーイストのサムネ画像のところのタグは
<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
dalomo.net
例えば今こんな感じだとして
こうなる。
全部確実にというわけにはいかないけれど、そこそこ隠れてるのではないだろうか。
特に政治経済カテゴリはおもしろ政治家写真が沢山サムネに使われており、それがちょっと苦手なので目が隠れるだけでも見やすくて良い。
参考
style.backgroundImageプロパティ - JavaScript（ジャバスクリプト）リファレンス
JavaScriptにおけるDOMのStyleオブジェクトのstyle.backgroundImageは、要素のスタイル属性のbackground-imageプロパティの値を取得、もしくは、設定するプロパティ。background-imag...
alphasis.info
Element: querySelector() メソッド - Web API | MDN
querySelector() は Element インターフェイスのメソッドで、呼び出された要素の子孫要素の中で、指定されたセレクター群に一致する最初の要素を返します。
developer.mozilla.org
Attention Required! | Cloudflare
stackoverflow.com
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for…in
developer.mozilla.org
Attention Required! | Cloudflare
stackoverflow.com
ループ内の非同期処理が完了した後に動作させる方法
### 前提・実現したいことNodeJSでディレクトリ内のファイル一覧を取得、各ファイル名の先頭文字だけをローマ字化した後、それらを一括表示するということをしたいと思っています###
teratail.com
JavaScript で繰り返し処理内の非同期処理を同期的に行いたい - Qiita
#はじめに最近Chrome拡張機能を作ろうと、JavaScriptを触り始めました。漏れなく非同期処理というものにハマったので、繰り返し処理でPromiseしたいという初心者向けの覚書です。P…
qiita.com
画像のロードがなんかダルそうと思ったら風評被害だった - Hikware.Tech
tech.hikware.com
JavaScript Mapオブジェクト - Qiita
今までMapオブジェクトをそんなに使ったことがないと気づいたので、調べてみました。まとめます。##MapオブジェクトとはES2015(ES6)から導入された、キーと値の組み合わせを保持すること…
qiita.com
PromiseベースでImage().onloadする - Qiita
#やりたいことJavaScriptで、画像の width/height が知りたいとき、以下のようにする。const img = new Image();img.onload = () => …
qiita.com
画像とキャンバスをオリジン間で利用できるようにする - HTML: ハイパーテキストマークアップ言語 | MDN
HTML では画像に crossorigin 属性を提供し、適切な CORS ヘッダーと組み合わせることで、 要素で定義されている他のオリジンから読み込まれた画像を、 の中で現在のオリジンから読み込まれた画像であるかのように扱うことができま...
developer.mozilla.org
Map - JavaScript | MDN
Map オブジェクトはキーと値のペアを保持し、キーが最初に挿入された順序を覚えています。キーや値には任意の値（オブジェクトとプリミティブ値）を使用することができます。
developer.mozilla.org
img 要素の src 属性と onload イベントリスナの設定タイミング
こういうふうに動的に画像をロードして、かつ onload のイベントを取りたい場合。三行目で src 属性に url を設定した時点で即座に非同期のリクエストが飛ぶ。画像のリクエストが完了する前に次の行へ処理が移る。よって src 属性に値...
please-sleep.cou929.nu
コメント