アル中プログラマの備忘録。もはやコーディングしてないけど。

酔いどれまさになう。プログラマとして就職し、システムエンジニア、プロジェクトマネージャーと立場を変えながら、システム開発に関わるとあるアル中の成長記録。

Chrome拡張

GoogleのブラウザChromeの拡張機能をChromebook(テキストエディタだけ)で作ってみる

投稿日:2017年7月10日 更新日:

Chrome

Google Chromeの拡張機能

GoogleのブラウザChromeには拡張機能があります。Chrome ウェブストアに色々公開されており、追加することで便利に使うことができます。
今回はそれを自分で作ってみます。(まずは簡単なサンプル程度ですが。)

完成品の説明と試し方

説明

Nya!と名前をつけました。猫の鳴き声です。機能は全く役には立たず、句点(。)とピリオド(.)を猫の絵文字(~(=^・ω・^)ノ☆)に置換します。少しでも癒しになれば良いですが、一部サイトでは適用したままですと上手く動かず、かえってストレスになります。(慌ててON、OFFできるようにはしました)

試し方

zip圧縮してGitHubに置いてありますので、ここからダウンロードしてください。ファイルへの直リンクはこっちです。Chrome ウェブストアに公開するには$500かかるので悩み中です。

ダウンロードできたら適当なところに解凍しておいてください。正規の拡張機能として配布していなので、開発中のデバッグ用として取り込みます。

chrome://extensions/を開きます。右上に「デベロッパー モード」というのがあるのでチェックを入れます。そうすると、「パッケージ化されていない拡張機能を読み込む」というボタンが出てきます。
拡張

コレを選んで、先程解凍したフォルダを選択すれば読み込まれます。ここまでで取り込みは完了です。
設定

Nya!は「有効」と「無効」の状態があり、最初に入れた時点では「無効」です。アドレスバー横の拡張機能アイコンの一覧に(よく見えないと思いますが、)Nya!のアイコンがあるのでクリックしてください。クリックすると有効無効を切り替えます。切替時にはポップアップが表示されます。(OKを押してください)
タブごとの設定には対応しておらず、全体に対して有効無効が影響します。既に開いているタブで適用されない場合はリロード(F5押下)してください。

試しに表示してみると、このようになります。
デモ
かわいいでしょう。もう一度アイコンをクリックすれば無効にしてリロードするので元の表示に戻ります。

気をつけていただきたいのが、HTMLを書き換えているので、いくつかのサイトでは有効のままでは正常動作をしないことと、ブログなどのテキスト入力時には必ず無効にしておくべきということです。この記事を書くときに有効のままだったために、下書き保存後のリロードで句点がすべて絵文字に変わってしまいました。(ツールの次の修正対象候補ですね、form内は対象外にしたほうが良さそうです)

開発

開発環境

普段使いのパソコンはChrome Bookですので、特別なツールはなくテキストエディタで作りました。今回程度の内容であれば、特に問題にならないですが、できればHTMLやjavascriptを書きやすい環境を用意するほうが楽そうです。Chrome Bookでも良い環境があれば教えていただきたいです。

内容

解凍先のフォルダを見ていただければわかると思いますが、拡張機能はいくつかのファイルで成り立っています。
それぞれについて説明します。

manifest.json

詳細は公式ドキュメントを見ていただきたいですが、要は何を利用するかが書かれています。

{
  "manifest_version": 2,
  "version": "1.0",
  "name": "Nya!",
  "description": "Replace from '。' and '.' to '~(=^・ω・^)ノ☆ '. 句点を~(=^・ω・^)ノ☆に置換するよ",
  "icons": {
    "16": "icon/16.png",
    "48": "icon/48.png",
    "128": "icon/128.png"
  },
  "content_scripts": [
    {
      "matches": ["https://*/*", "http://*/*"],
       "js": ["jquery-3.2.1.min.js", "nya.js"]
    }
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_icon": "icon/32.png",
    "default_title": "Nya!"
  },
  "permissions": [
    "tabs",
    "background",
    "storage",
    "http://*/*",
    "https://*/*"
  ]
}
  • manifest_version:これは現時点では2固定です。
  • version:拡張機能のバージョンをつけることができます。今回は初公開なので1.0としておきました。
  • name:拡張機能の名前です。
  • description:拡張機能の説明です。
  • icons:各サイズのアイコンを用意します。ストアなどの表示て使われます。
  • content_scripts:matchesに該当したページでjsに書かれたjavascriptを読み込みます。読み込むタイミングを指定するオプションもあります。今回はこのjavascriptにほとんど処理を書いています。
  • background:目に見える本来のページとは別に裏で動いているページです。content_scriptsは元のページと独立していて変数などが上手く参照できませんが、これを介して上手くやりくりします。
  • browser_action:アドレスバー横に出るアイコンとマウスオーバーで表示されるメッセージを設定しています。押下時にメニューをポップアップさせるようにもできます。
  • permissions:使いたいAPIが求めるパーミッションを記載します。例えばstorageはNya!のON/OFFの状態をローカルストレージに記録するために記載しています。

つまずいたのはmatchesの[“https://*/*”, “http://*/*”]です。最初[“https://*”, “http://*”]としていたらChromeへの取り込み時にエラーになってしまいました。[“https://*/”, “http://*/”]にすると取り込めるもののマッチしないため置換されませんでした。

background.js

ここではアドレスバー横に追加されたNya!のアイコンを押下するとそのイベントを後述のnya.jsに渡すようにしています。content_scriptsとして定義されたjavascriptでは直接このイベントが拾えないため回りくどいことをしています。
しかし、今回に限って言えばこのメッセージを受け取ってnya.jsでやっているON/OFFの切り替えと保存はここでもできるのでわざわざメッセージを送る必要は無いかもしれません。

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.sendMessage(tab.id, "Action");
});

nya.js

処理の本体です。といっても説明の通り、文字を置換しているだけです。

$(function() {
    //Replace from '。' and '.' to '~(=^・ω・^)ノ☆ '.
    var nya = '~(=^・ω・^)ノ☆ ';
    var body = $('body');
    
    chrome.storage.local.get(       
        {state: false},        
        function(data) {
            if(data.state) {
                //「。」か「'.'と空白」か「'.'と'<'(HTMLの開始タグ)」であれば置換
                body.html(body.html().replace(/。/g, nya).replace(/\.\s/g, nya).replace(/\.</g, nya + '<'));
            }
        }
    );
    
    //イベントリスナーをセット
    chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
        if (request == "Action") {
            //現在の設定値を取り出す
            chrome.storage.local.get(
                {state: false},
                function(data) {
                    if(data.state) {
                        alert('Change Nya! to invalid. \nNya!を無効にします');
                    } else {
                        alert('Change Nya! to valid. \nNya!を有効にします。')
                    }
                    //反転して保存&リロード
                    chrome.storage.local.set({state: !data.state}, function(){ location.reload(); });
                }
            );
        }
    });
});

「.」の置換は少し工夫しました。無条件で「.」を置換してしまうとバージョン番号の1.0のような部分も置換されてしまいます。ですので文末だけが対象になるように、その後に空白かHTMLタグの「<」が続く場合のみ置換するようにしています。

jquery-3.2.1.min.js

jQueryのサイトから持ってきました。今回のサンプル程度であれば特にどのバージョンでも問題ないと思います。(jQueryを使わなくても十分作れると思います。)

iconフォルダ

必ずしもフォルダーを分ける必要はなく、名前もiconでなくても大丈夫です。manifest.jsonに記載する際に相対パスで書いてあれば認識されます。

完成

これで完成です。最初の説明の通りChromeに取り込めば利用することができます。ストアーに登録する場合はお金を払って開発者として登録した後、指定されたとおりにアップロードすれば公開されます。(ここまではやっていないので、公式ドキュメントか他の人の記事を参考にしてください。)
まずは動くものができたので、他にも簡単なものであれば作れそうです。

酔いどれまさになう。

-Chrome拡張

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

関連記事はありませんでした

カテゴリー