Chromeの拡張機能について | 株式会社ヘキサドライブ | HEXADRIVE | ゲーム制作を中心としたコンテンツクリエイト会社

HEXA BLOG

ヘキサブログ

プログラム

HEXA BLOGプログラム2019.10.10

Chromeの拡張機能について

こんにちは！
Apex Legendsを一緒にやってくれる人を常に募集してます、東京プログラマーのしぶです。
共にチャージライフルで敵を焼き、敵のチャージライフルに焼かれましょう。

入社してからツーリング記事しか書いてなかったのですが、引っ越しをしてから夢の国にしか通ってなかったのでネタが切れました…。
なので今回はChrome拡張の紹介をしようと思います。

ヘキサブログの新作記事内に、入力した日付のブログがあるかどうか教えてくれるツールを作りました。
JQueryを使用しています。

まずmanifestを書きます。
permissionsに”tabs”,”notifications”を書かないと後述する機能を使用することが出来ません。
background内の”persistent”はfalseにするとイベントページ、trueにするとバックグラウンドページになります。
今回はイベントを受け取り処理を行うだけなのでfalseにしています。
(詳しい事はググってください)

右上のアイコンを押したら出てくるポップアップ用のhtmlとjavascriptです。
適当に日付を指定できるようにしただけです。

ヘキサブログ上で動かすjavascriptです。
新着記事内の日付欄を探してます。
その後、後述するbackground.jsの通知用関数を呼んでます。

chrome.tabsや、notifications等が他のhtml上で動かしているjavascriptからは呼び出せないため、拡張用のバックグラウンドスクリプトを動かしリクエストを行っています。
各javascriptからはaddListenerでしか受け取れないため、typeという変数を用意してSwitchで分岐してあげるのが良さそうです。
chrome.notifications.createだけでよく見る右下に出てくる通知が出せるのはかなり強いですね…！

日付を選んで検索を押すと…

新着記事にその日付があるか教えてくれます。

わああああ、これは…！！！！！
毎日使いたいくらい便利ですね！！！！！！！！

それでは。