シェアする

  • このエントリーをはてなブックマークに追加





【Chrome】拡張機能って作れるんだよ

シェアする

  • このエントリーをはてなブックマークに追加
  • 0

chromeユーザの比率は相変わらず多いですよね。

今回はそんなchromeについて。

chromeの便利なところに拡張機能の豊富さが

あると思います。

ホントにいろんなものがあります。

でも、こう思ったことないですか?

「ここがこうだったらなー」

それできますよ。というお話です。

chromeの拡張機能

今回の対象はあくまで個人利用。

今回ご紹介する方法は特にパッケージ化して、

たくさんのユーザに使ってもらおうといった趣旨ではなく、

あくまで個人利用を目的としたものです。

拡張機能を作るってどういうこと?

実はそんなに難しいことじゃなくて、

言語はjavascriptでイベント・ドリブンな実装です。

ちょっとハードルが高いのが、

chromeの独自のオブジェクト構成を

いろいろ調べないといけないことでしょうか。

今回紹介するものは、

僕が数年前に作ったもののうちの一つです。

それをベースに拡張機能を作って

実際に使ってみるまでをやってみましょう。

実装

現在となっては、機能が公式に実装されていて、

このサンプルの出番はないのですが、現在も動作する、

「簡易youtubeリピーター」のサンプルです。

以下で紹介するソースは一箇所(同じフォルダ)に保存しておいてくださいね。

manifest.json

他のフレームワークなんかにもある、

いわゆる設定ファイルですね。

chromeに読み込ませるときは、

これがあるか?をchrome側は見ています。

↓こんな感じ。

manifest_version:manifest自身のversion

name:拡張機能の名前

description:拡張機能の詳細

version:拡張機能のバージョン

permissions:拡張機能が使用する権限

今回は、コンテキストメニュー(右クリックメニュー)とタブ操作です。

設定できる一覧はこちら

icons:アイコンファイルの設定

16、48はサイズのピクセル値ですね。

backgound

scripts:読み込むjsファイル

manu.js

コンテキストメニュー実装です。

chrome.tabs.onCreated:タブ作成

chrome.tabs.onUpdated:タブ更新

chrome.tabs.onActivated:タブ有効(読み込み完了)

なところにイベントをリスナーに紐づけてます。

やってることは、開いてるタブがyoutubeだったら、

右クリックメニューを作って、再生ページとリンクの右クリックそれぞれに

リピートと指定秒ジャンプの処理を紐づけています。

youtubeじゃなかったら、メニューを削除しています。

test.js

実装してた当時はyoutuberepeaterというサイトで

実行させるのが主流でしたので、

今再生しているページの情報をyoutuberepeaterに送るってことを

していました。

↓こんな感じ。

指定秒ジャンプはURLパラメータに時間を入れて

再読込させるって手法ですね。

拡張機能の追加方法

chromeのメニュー→その他のメニュー→拡張機能と開き、

デベロッパーモードをonにします。

パッケージ化されていない機能を読み込む

パッケージ化されていない機能を読み込むというボタンがあると思います。

これをクリックし、先程のソース一式が格納されたフォルダを選択します。

すると・・・

こんな感じで拡張機能が追加されます。

youtube画面で右クリックしてみると、

おお!出ていますね。

まとめ

ここで紹介したものの、実際のAPIの詳細はこちら

いろいろ調べながらになるかもしれませんが、

是非、自身の作業が楽にできるような拡張機能を

自身の手で生み出してみるのも悪くないかと思います。

達成感に満ち溢れることができますよ!

また別の機会に他にも作ったものがあるので、

ご紹介したいと思います。

それでは!

ブログランキング・にほんブログ村へ
にほんブログ村


人気ブログランキング

20代前半までは東京で音楽をやりながら両手の指以上の業種でアルバイト生活をしていましたが、某大手プロバイダのテレアポのバイトでPCの知識の無さに愕然とし、コンピュータをもっと知りたい!と思ったことをきっかけに25歳の時にITの世界に未経験で飛び込みました。
紆余曲折を経て、現在は個人事業主としてお仕事させていただいており、10年ほどになります。
web制作から企業システム構築、ツール開発など、フロントエンドもバックエンドもサーバーもDBAも依頼があれば何でもやってきた雑食系エンジニアです。

今風にいうとフルスタックエンジニアということになるのかしら??

→ 詳細プロフィールというか、生い立ちはこちら

→スキルシートをご覧になる場合はこちら

→お仕事のご依頼やお見積りなどお問い合わせはこちらから!

シェアする

  • このエントリーをはてなブックマークに追加

フォローはいかがですか?