自作しているRSSリーダに搭載している機能で閲覧したページでのRSSをどのように検出しているかをご紹介します。https://zenn.dev/harurow/articles/812dabf395797fChrome拡張について自作しているRSSリーダはChome拡張で作っています。JavaScriptを使ってChromeに機能を追加する仕組み[1]です。作成するにはGoogleさんが公開している仕様に従って作る必要があるのですが、他の方々がが分かりやすく記事を書いてくださっているので、この記事では省略いたします。自分で試したいだけであれば「拡張機能」タブの「パッケージ化されていない拡張機能を読み込む」で自分のChromeを拡張できます。ご興味がある方は是非お試ししてみてはいかがでしょうか。あらすじ処理のあらすじです。コンテンツスクリプトでRSSを検索サービスワーカーへRSS候補を送るサービスワーカーでRSS候補を受け取るRSSを検出したタブにバッチをつけるこれでローカルストレージへRSSの候補が保存されます。1.コンテンツスクリプトでRSSを検索コンテンツスクリプトとは検出にはコンテンツスクリプトという機能を利用しています。この機能は指定したパターンに一致するURLのページを開いたときにDOMにアクセスできるプロセスでJavaScriptを実行することができます。この機能を利用するにはマニフェストで設定する必要があります。今回の処理では全てのURLに対して動作[2]JavaScriptではjQueryを事前に読み込ませて自分の処理で利用しています。xmlがRSSフォーマットか確認!XMLビュワーの判断方法についてこの判断方法はChromeのバージョンアップによって変わる恐れがありますので今後もメンテしていく必要がありそうです。2.0とあり形式が異なります。他にもATOMという形式もあります。これらは全て情報発信のためのXMLフォーマットです。これらはXMLのルートのタグを確認すればほぼ判断できます。XMLビュワーでなければ、aタグを探すWebページでは開いた後にJavaScriptを使ってDOMの操作をする恐れがあります。それを考慮してページを開いてから3秒待ち、その後aタグを検索します。!なぜ3秒?経験則で3秒としました。5秒とか7秒でもよかったのですがなんとなくです。DOMの変更監視を行なって処理する方法もありますが、それはちょっとやり過ぎかと思いましてやっておりません。できるだけ負荷をかけたくないのでRSSの検索が終わったらコンテンツスクリプトを終了してます。aタグを見つけたらhref属性を確認し指定されているURLが以下の場合にRSSの候補としています。クエリ文字を排除したURLの終わりが次のいずれかであればRSSの候補とする。3000=3秒!正規表現を変数にしたのはなお、正規表現のregexをmatchに直接書いていないのはパフォーマンスを考慮してのこと最適化されて影響がないのかもしれないですが、一応正規表現のオブジェクトがmatchの度に生成されないように考慮しました。i.match(/(\.|\/)(rss|rdf|atom|feed|xml)([?].+)?$/i))!誤検知について今回の検出ロジックでは誤検知することがあります。.xmlを候補にしていますのでRSS以外のXMLのリンクがあれば候補に上がります。/rssの候補はRSSを発行しているURLの場合もあればRSS一覧ページの場合もあります。これらは実際にRSSをリスト表示したときにフォーマット未対応として表示しています。2.サービスワーカーへRSS候補を送るRSSの候補を見つけたらバックグラウンドのサービスワーカーへメッセージとしてRSSのURLリストを送ります。})3.サービスワーカーでRSS候補を受け取るそもそもサービスワーカーって?バックグラウンドで動作するJavaScriptです。DOMがない環境で動作します。コンテンツスクリプト等はタブごとに複数立ち上がり動作しますが、これは唯一のプロセスとして動作します。コンテンツスクリプトとの通信はメッセージを送りあってやりとりします。こちらもマニフェストで設定することで利用できます。サービスワーカーを利用するためのマニフェストの設定サービスワーカーは以下のマニフェストで動作定義します。サービスワーカーのJavaScriptファイルはマニフェストファイルと同じフォルダに含める必要があるそうです。...バックグラウンドのロジックメッセージのリスナを登録します。メッセージは汎用性がありRSSの検出以外の用途にも使います。このアプリでは必ずtypeにそのメッセージがなんなのか、dataにそのデータを入れるようにしています。false})!サービスワーカーについてサービスワーカーは何もすることがないと勝手にシャットダウンします。必要になったら自動的に立ち上がります。これを実現するためにルールがあります。それは、メッセージ等のリスナ登録は関数ないではなく直接呼び出すです。chrome.runtime.onMessage.addListener(...略...)}init()正常に動作する例chrome.runtime.onMessage.addListener(...略...)4.RSSを検出したタブにバッチをつけるコンテンツスクリプト本体では自身にバッチをつけることができません。サービスワーカーにつけてもらいます。さっきのbackground.jsのソースの続きでバッチをつけるロジックを追加します。...略...!タブのIDについてchrome.runtime.onMessage.addListenerに指定するコールバック関数の第二引数に送信元情報が入っている。sender.tab.id=送信元のタブID=RSS検出したタブ最後にRSSの検出方法とロジックのご紹介でした。他にも時間があればChrome拡張の記事を書いていこうと思います。!ここで紹介しているコードは解説のために変数名を変えたり不要なところは削除しています。Chrome拡張本体のバージョンアップでのそもそものロジックが変わるっていることもありますのでご承知おきください。今はChromeだけでなくEdgeでも利用できます。↩︎ツイートwww.harurowおっさんぷろぐらま。いろんな言語をちょこちょこかじる雑食。C#とTypeScriptが特にお気に入り。最近は昔作ったchrome拡張のメンテ中でその記事を書いてます。バッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフト券が還元されます。約6,000字www.harurowおっさんぷろぐらま。いろんな言語をちょこちょこかじる雑食。C#とTypeScriptが特にお気に入り。最近は昔作ったchrome拡張のメンテ中でその記事を書いてます。今回紹介する内容Chrome拡張についてあらすじ1.コンテンツスクリプトでRSSを検索コンテンツスクリプトとはコンテンツスクリプトを利用するためのマニフェストの設定方法コンテンツスクリプト本体XMLビュワーか判断XMLがRSSかの判断XMLビュワーでなければ、aタグを探すaタグを見つけたら2.サービスワーカーへRSS候補を送る3.サービスワーカーでRSS候補を受け取るそもそもサービスワーカーって?サービスワーカーを利用するためのマニフェストの設定バックグラウンドのロジック4.RSSを検出したタブにバッチをつける最後にZennエンジニアのための情報共有コミュニティAboutZennについて運営会社お知らせ・リリースGuides使い方Publicationよくある質問LinksTwitterGitHubメディアキットLegal利用規約プライバシーポリシ。