読者です 読者をやめる 読者になる 読者になる

Chrome Web Storeで公開している拡張を自分のサイトから直接インストールできるようにする(Inline Installation)

Using Inline Installation - Chrome Web Store — Google Developers

の内容を知らなかったので共有(日本語検索してもSNSやメーリングリストや掲示板の言及しかなかった)。

ウェブマスターツールで自分のサイトの管理者証明の設定をしておく。

ウェブマスター ツール - ホーム

サイトの確認 - ウェブマスター ツール ヘルプ

こんな感じ

デベロッパーダッシュボードからインストールする拡張の公開設定で「確認済みのウェブサイト」に上記のサイトを追加する

デベロッパー ダッシュボード - Chrome ウェブストア

こんな感じ(なんかアートワーク再登録しろって怒られてる)

準備OK。HTMLを書く

HTMLヘッダのlink要素追加とJavaScriptの呼び出しを書く。

こういう感じ。

https://chrome.google.com/webstore/detail/nakgoooocefjaghfafdcdefhbhalodle の "nakgoooocefjaghfafdcdefhbhalodle" の部分は拡張ごとに自分のやつに置き換える。

// index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/nakgoooocefjaghfafdcdefhbhalodle">
    </head>
    <body>

        <button id="install">インストール</button>

        <script>
            window.onload = function(){
                function success(){
                    alert("成功");
                }

                function fail(error){
                    alert(error);
                }

                document.getElementById('install').onclick = function(){
                    chrome.webstore.install('https://chrome.google.com/webstore/detail/nakgoooocefjaghfafdcdefhbhalodle', success, fail);
                }
            }
        </script>
</body>
</html>

ユーザーの操作のイベントから呼び出さないと呼び出しエラーになる(自動でインストールポップアップを出す悪質なのを防止しているんだと思う)。

デバッグ用に冗長に書いたけどHTMLヘッダのlink要素設定してればスクリプト部分は以下でもいいみたい

        <button id="install" onclick="chrome.webstore.install()">インストール</button>

ローカルでインストールできるかテストしてみる

ホストを見てる && ポートはなんでもいいっぽいので/etc/hosts かHTTPプロクシでサイトをlocalhostを見るようにしてテストしてみる。

# /etc/hosts
lai.so	127.0.0.1

配信するサーバー起動。python入ってれば以下で。

XAMPPとか使っても、もう本番に直接上げてデバッグしてもなんでもよし。

python -mSimpleHTTPServer 9000

http://lai.so:9000/index.htmlChromeから開く。

インストールボタンを押したらこんな感じにポップアップが出れば成功。

あとは、これをそのまま公開するだけ。

冒頭のドキュメントにはあと、既にインストール済みかどうかの判定なんかも載ってる。

デモ

http://lai.so/misc/chrome-ext-using-inline-installation/

実際のソース

laiso.github.com/misc/chrome-ext-using-inline-installation/index.html at master · laiso/laiso.github.com · GitHub

https://github.com/laiso/laiso.github.com/blob/master/misc/chrome-ext-using-inline-installation/index.html