Feedly にはてなブックマーク数を表示する Chrome 拡張

2020/05/15

公開された

Chrome Store に Publish してほしいとコメントが付いたので Chrome Store に投げました。審査通り次第公開されます (多分)

この記事はチームスピリット Advent Calendar 2019 の 24 日目の記事です。

最近毎日巡るサイトが多くなってきて Feedly にすべてまとめたので、はてブの人気記事も Feedly から覗いています。

そうなるとはてブのブックマーク数がサイトに行くまでわからず、燃えてる記事を見逃してしまうので表示させようと思った次第です。

調べてみたらそういう拡張はすでに Chrome ウェブストアに存在しました。

ただ、メンテされてなく正常に動作せず、自分で作ることにしました。

コードはここです。

使えそうなところがあったので既存の拡張の Repository を Fork させてもらいました。

今回言語は JavaScript ではなく TypeScript を使用しました。

最近はたいしたことないものでも TypeScript で書くことが多いですね。

基本的には manifest.json に必要なものを記載して、それを chrome にあげるだけです。

今回 chrome 拡張でやりたいことは、Feedly の DOM の参照・編集です。

これには manifest.json の content_scripts を使います。

  "content_scripts": [
    {
      "matches": ["https://feedly.com/*"],
      "css": ["css/style.css"],
      "js": ["js/script.js"]
    }
  ]

とすると、matches に記載された URL にマッチすると指定した css と js を読み込ませることが可能です。

Feedly は初期表示時からすべての content が表示されているサイトではないので、DOM の変更の検知をする必要があります。

これには Mutation Observer を使います。

DOM の変更を検知したら、今回使いたいノードを探していき、見つけたらそこにはてブ数の画像を差し込んでいきます。

はてブのユーザー数の画像ですが、簡単にとれます。

でとれます。

こんな感じです。google のはてブ数すごい...。

img タグの src にこの URL を設定して、そのノードを Feedly の記事の横に差し込めば終わりです。

f:id:yuni3s:20191221233649p:plain

表示位置はタイトルの後ろにしました。

Hatena Bookmark の Chrome 拡張入れて Google 検索するとタイトルの後ろに出てくるので...。

Chrome 拡張はいろいろな API が用意されていて、本当にいろんなことができるので結構楽しいです。おすすめです。

今回記事を書くために azu さんの textlint を初めて使用してみたのですが、めちゃくちゃ良いです。