GoogleChromeの拡張を作りたい④ はてブ、はてなブックマークのサムネに目線をつけたい

スポンサーリンク
スポンサーリンク

はてなブックマーク

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

スポンサーリンク
お品書き

試行錯誤

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

<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

 

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

 

 

こうなる。

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

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

 

スポンサーリンク

参考

style.backgroundImageプロパティ - JavaScript(ジャバスクリプト)リファレンス
JavaScriptにおけるDOMのStyleオブジェクトのstyle.backgroundImageは、要素のスタイル属性のbackground-imageプロパティの値を取得、もしくは、設定するプロパティ。background-imageプロパティは、要素の背景画像を指定することができる。
Element.querySelector() - Web API | MDN
対象要素の子孫の内、引数に指定したCSSセレクタにマッチする最初の要素を返します。
Cannot read property 'style' of undefined -- Uncaught Type Error
I would like to change the color, fontsize and font weight of the text in a span element of the html page. I am using the following code: if(window.location.h...
🤷🏽‍♀️ Page not found | MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
Why does elem.style.backgroundImage return empty rather than the CSS property?
Why does the following output an empty string for style.backgroundImage? How can I retrieve the height and width of the image so that I can set the dimensions o...
ループ内の非同期処理が完了した後に動作させる方法|teratail
前提・実現したいことNodeJSでディレクトリ内のファイル一覧を取得、各ファイル名の先頭文字だけをローマ字化した後、それらを一括表示するということをしたいと思っています 発生している問題ループが完了した後に一括出力をしようとしても、一括表示がされません。 以下のようなコードになっています。 (
JavaScript で繰り返し処理内の非同期処理を同期的に行いたい - Qiita
はじめに 最近Chrome拡張機能を作ろうと、JavaScriptを触り始めました。 漏れなく非同期処理というものにハマったので、繰り返し処理でPromiseしたいという初心者向けの覚書です。 Promiseやasync/aw...
画像のロードがなんかダルそうと思ったら風評被害だった - Hikware.Tech
JavaScript Mapオブジェクト - Qiita
今までMapオブジェクトをそんなに使ったことがないと気づいたので、調べてみました。 まとめます。 Mapオブジェクトとは ES2015(ES6)から導入された、キーと値の組み合わせを保持することができるオブジェクト。 以下のよう...
PromiseベースでImage().onloadする - Qiita
やりたいこと JavaScriptで、画像の width/height が知りたいとき、以下のようにする。 const img = new Image(); img.onload = () => { console...
画像とキャンバスをオリジン間で利用できるようにする - HTML: HyperText Markup Language | MDN
HTML では画像に crossorigin 属性を提供し、適切な CORS ヘッダーと組み合わせることで、 要素で定義されている他のオリジンから読み込まれた画像を、 の中で現在のオリジンから読み込まれた画像であるかのように扱うことができます。
Map - JavaScript | MDN
Map オブジェクトはキーと値のペアを保持し、キーが最初に挿入された順序を覚えています。
img 要素の src 属性と onload イベントリスナの設定タイミング
こういうふうに動的に画像をロードして、かつ onload のイベントを取りたい場合。三行目で src 属性に url を設定した時点で即座に非同期のリクエストが飛ぶ。画像のリクエストが完了する前に次の行へ処理が移る。よって src 属性に値をセットする前にイベントリスナの設定をしなくてはいけない。というのも、たぶん s...

コメント

タイトルとURLをコピーしました