この問題はこれまで見たことがありませんが、私のウェブサイトで複数の Chrome 拡張機能のインライン インストールを管理するために使用するセットアップの内訳を提供しようと思います。
head
すべてのページ (オプションで、1 つ以上のインストール リンクを含むページのみ)のノード内に、Chrome Web ストアの各拡張機能/アプリ ページに必要なリンクを追加します。これにより、さまざまな拡張機能/アプリのインストール リンクをページのどこにでも簡単に追加できます。JavaScript は、DOM の読み込みが完了すると、イベント ハンドラーを各インストール リンクにバインドするだけです。このイベント ハンドラーの唯一の目的は、クリック時にリンク先の拡張機能/アプリをインストールし、その状態を変更してそれ以上のインストール試行を防ぐことです。
<!DOCTYPE html>
<html>
<head>
...
<!-- Link for each extension/app page -->
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/dcjnfaoifoefmnbhhlbppaebgnccfddf">
<script>
// Ensure that the DOM has fully loaded
document.addEventListener('DOMContentLoaded', function() {
// Support other browsers
var chrome = window.chrome || {};
if (chrome.app && chrome.webstore) {
// Fetch all install links
var links = document.querySelectorAll('.js-chrome-install');
// Create "click" event listener
var onClick = function(e) {
var that = this;
// Attempt to install the extension/app
chrome.webstore.install(that.href, function() {
// Change the state of the button
that.innerHTML = 'Installed';
that.classList.remove('js-chrome-install');
// Prevent any further clicks from attempting an install
that.removeEventListener('click', onClick);
});
// Prevent the opening of the Web Store page
e.preventDefault();
};
// Bind "click" event listener to links
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', onClick);
}
}
});
</script>
...
</head>
<body>
...
<!-- Allow inline installation links to be easily identified -->
<a href="https://chrome.google.com/webstore/detail/dcjnfaoifoefmnbhhlbppaebgnccfddf" class="js-chrome-install">Install</a>
...
</body>
</html>
このシステムが完全に機能するためには、ユーザーが拡張機能/アプリをインストールした後に Web サイトに戻った場合のシナリオもサポートする必要があります。公式ドキュメントではchrome.app.isInstalled
、単一のページから複数の拡張機能/アプリをインストールできる場合、これを使用しても機能しないことが示唆されています。この問題を回避するには、次の install.js ファイルのようなコンテンツ スクリプトを拡張機能/アプリに追加するだけです。
// Fetch all install links for this extension/app running
var links = document.querySelectorAll('.js-chrome-install[href$=dcjnfaoifoefmnbhhlbppaebgnccfddf]');
// Change the state of all links
for (var i = 0; i < links.length; i++) {
links[i].innerHTML = 'Installed';
// Website script will no longer bind "click" event listener as this will be executed first
links[i].classList.remove('js-chrome-install');
}
次に、manifest.json ファイルを変更して、このコンテンツ スクリプトがドメインで確実に実行されるようにする必要があります。
{
...
"content_scripts": [
{
"js": ["install.js"],
"matches": ["*://*.yourdomain.com/*"],
"run_at": "document_end"
}
]
...
}
これにより、Web サイトの JavaScript の前にコンテンツ スクリプトが実行されるため、js-chrome-install
クラスが実行されるまでにクラスとのインストール リンクが存在せず、イベント ハンドラーがバインドされません。
以下は、私がこのシステムをどのように使用しているかの例です。
ホームページ: http://neocotic.com
プロジェクトのホームページ: http://neocotic.com/template
プロジェクトのソース コード: https://github.com/neocotic/template