Chrome Extensionを作ってみる

選択した語句をAmazonで検索するだけのシンプルなChrome Extension（拡張機能）をお試しで作ってみました。ソースはコチラです。

ソース

manifest.json

フォーマットはコチラです。今回は右クリックメニューを使用し、新しいタブでAmazonのページを開くので、permissions に、contextMenus, tabs を指定しました。

{
    "manifest_version": 2,
    "name": "Amazon.co.jp検索",
    "version": "1.0",
    "description": "選択したテキストをAmazon.co.jpで検索します。",
    "permissions": ["contextMenus", "tabs"],
    "background": {
        "scripts": ["background.js"]
    }
}

background.js

テキストを選択した状態の右クリックメニューなので、contextsにselectionを指定します。titleの値に%sをいれると、メニュー表示時には選択テキストが代入されます。

chrome.contextMenus.create({
    contexts: ['selection'],
    title: "'%s'を Amazon.co.jp で検索",
    onclick: function(info, tab) {
        var searchText = info.selectionText;

        if (searchText === void 0) {
            alert('選択されていません。');
            return;
        }

        chrome.tabs.create({
            url: 'https://amazon.co.jp/s?k=' + encodeURI(searchText)
        });
    }
});

インストール

拡張機能の画面（chrome://extensions/ ）で、デベロッパーモードONの状態で、「パッケージ化されていない拡張機能を読み込む」。そして、ソースのあるフォルダを指定すればインストールできます。

実行

適当な語句を選択して、右クリックするとメニューに「Amazon.co.jp で検索」と出てきます。

メニューを選択すると、Amazon.co.jpが新しいタブで開き、選択語句を検索した状態となっています。