すなばいじり

はてなブログを使って、トンピーを揃えるまで止めないブログ。ふっくらかわいい。

Chrome拡張機能を自分のサイトからインストールできるようにする

いちいちWebストアに行かせるのは面倒である。という解決法。

 

キーボードショートカットをカスタマイズするブラウザ拡張 - ✘╹◡╹✘

インラインインストールをブログエントリーに導入してうっかりインストールできるようにしたい

2016/11/10 10:22

インラインインストールをブログエントリーに導入してうっかりインストールできるようにしたい - psne のコメント / はてなブックマーク

 

Chrome拡張機能のインラインインストール

デベロッパーダッシュボードの拡張機能の設定で、インライン インストールの使用を開始する。

インラインインストール を開始する

 

 

はてなブログ設定の headに要素を追加 に挿入(headタグの中に入れるもの)

<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/ (アイテムID)">

 

 

エントリー本文に挿入(HTML)

<p> </p>
<div id="not-install-extension">Chromeではないようです。お手数ですが、下のリンクからインストールを行ってください。</div>
<div id="install-extension" class="entry-link" data-detail-url="https://chrome.google.com/webstore/detail/ (アイテムID)">
	早速インストールする
	<script>
		// <![CDATA[
		(function () {
			var installButton = document.getElementById("install-extension");
			var notinstallButton = document.getElementById("not-install-extension");
			function chromeExtInstall() {
				chrome.webstore.install(installButton.getAttribute("data-detail-url")
				, function () {
					//成功
					installButton.style.display = "none";
					//alert('インストールしました。');
				}
				, function (code) {
					//失敗
					alert("インストールできませんでした。\n" + code);
				}
				);
			}
				installButton.addEventListener("click", function () {
				chromeExtInstall(this);
			});
			if (typeof chrome === "undefined" || typeof chrome.webstore === "undefined") {
				installButton.style.display = "none";
			} else {
				notinstallButton.style.display = "none";
			}
		})();
		// ]]></script>
	(クリックで開始します)
</div>
<p> (拡張機能のリンク)</p>

何故divタグの間にscriptがあるのかキモい。と思うかもしれませんが、うっかりエディタで消してしまう事故が無いように書いた気がします。(定型文の内側であれば、うっかり消す確率が低い)

 

サンプル(デモ)

はてブロimageTitleがインストールできます。
Chromeではインストールボタン、その他はリンクの紹介をします。

 

Chromeではないようです。お手数ですが、下のリンクからインストールを行ってください。
早速インストールする (クリックで開始します)

 

chrome.google.com

 

実際のやつは、1ページ上で複数の拡張機能をインストールできるようIDがぶつからないようにしています。

一時期、良くない拡張機能が悪用していたので淘汰されましたが、便利ですね。

NEW リズムでともだち こぐまのトンピー ぬいぐるみ