SEワンタンの独学備忘録

IT関連の独学した内容や資格試験に対する取り組みの備忘録

ストアからの直接インストールができないブラウザに拡張機能(アドオン)をインストールする


タイトルが分かりにくいですが、インターネットに繋げない環境などでストアから直接インストールができない場合の暫定的対処方法です。
勘違いがあって当初の想定とちょっと変わってしまったのでかなりニッチな場合になりました。

背景

ブラウザの拡張機能について

各種ブラウザには拡張機能というものが存在します。
chrome、Edge、firefoxなど、これら一般的なブラウザにはすごい人が開発した拡張機能がストア(?)上に公開されているのでそこからダウンロードすることができます。

以下はGoogle Chromeの例。

f:id:wantanBlog:20210223153359p:plain

本記事の対象

本記事の対象はタイトルにもつけた「ストアからの直接インストールができないブラウザ」の場合に限ります。

なので、インターネットから断絶された環境など必要となるのは比較的特殊なケースになると思います。

端末の制限には詳しくないですが、貸与されたPCなどで拡張機能のインストールが制限されている場合などもあるのかな??但しブラウザの「デベロッパーモード」やその中の拡張機能の読み込みも制限されている場合には後述の手順でも実行できません。

また、ストアから直接インストールできる場合には本記事の手順は特に必要なく標準機能によるインストールを普通に実行した方が普通に早いです。
標準機能での拡張機能インストールについては、Edgeについては以下の記事も参考にどうぞ。

www.wantanblog.com

今回のケース

上記の記事にもありますが、私はブラウザの「Ctrl+I」信者です
ブラウザにおける「Ctrl+I」ショートカットはIE旧Edgeブラウザで有効だったお気に入り(ブックマーク)を表示するものです。

拡張機能が普通にインストールできるブラウザであれば上記記事の方法で対応できたのですが、ストアから直接インストールができないブラウザでも同様のことがやりたくなりました。
そこで、考えたのが今回の方法です。

なので、今回はストアから直接インストールができないブラウザで、「ブックマークサイドバー」という拡張機能のアドオンを半ば無理やり使えるようにします

対象ブラウザはGoogle Chrome、対象アドオンは「ブックマークサイドバー」としますが、他のブラウザでも自作の拡張機能取り込みが実行できるものであれば同様に実行できるはずです。

対象アドオンについては、別のアドオンであっても、後述するソースコードが入手できるものであれば同様のことが実施できるはずです。
今回はたまたま対象のアドオンがオープンソースとしてソースコードを公開していたので運が良かったという側面もあります。

また、簡易的なものの自作も検討してみましたが、片手間ではとてもできるものではなかったので諦め、辿りついたのが今回の方法です。拡張機能の自作に興味がある場合には以下もご参考までに。

www.wantanblog.com

拡張機能インストールが制限されたブラウザに拡張機能をインストールする

拡張機能のアドオンソースコードをダウンロードする

ここでは対象の拡張機能のソースコードを入手します。
ブックマークサイドバー」というアドオンを例に進めていくので、他のアドオンでは入手方法が違ったりそもそもオープンソースではなくソースコードが入手できなかったりする可能性があります。

逆にソースコードさえ入手できれば後は簡単です。
私と同じ「ブックマークサイドバー」でやる場合には、本項の最後の部分までとんでGitHubのリンクから直接ダウンロードすればよいです

とにもかくにもまずはGoogle Chromeで拡張機能の画面を表示します。

ブラウザ上の右上(・・・)から「その他ツール>拡張機能」を開きます。
またはURL入力欄に「chrome://extensions/」を入力してもOK。

f:id:wantanBlog:20210223162937p:plain

拡張機能ページから左上のメニューアイコンをクリックして、そこからさらに「Chromeウェブストアを開きます」をクリックします。

f:id:wantanBlog:20210223225654p:plain

ウェブストアの画面で目当ての機能名を検索して表示された拡張機能をクリックします。

f:id:wantanBlog:20210223230147p:plain

次からは対象とするアドオンによって変わってくると思います。
アドオンのダウンロードページで、右側の「ウェブサイト」リンクをクリックしてアドオンの公式サイトへアクセスします。

f:id:wantanBlog:20210223230638p:plain

ここからはふんわりいきます。
アドオンのウェブサイトでGitHubマークをクリックすると製作者様のGitHubページにアクセスすることができます。
GitHubページで「Bookmark_Sidebar」のリポジトリをクリック、開発ソースをそのままダウンロードしてもうまく動作させることができませんのでリリース版を参照します。

と、途中から説明が雑になったのは以下のリンクから飛んでもらえればいいからです。
Releases · Kiuryy/Bookmark_Sidebar · GitHub

リンク先で、任意のバージョンのzipファイルを選択します。
執筆現在では最新バージョンは「1.19.0」なので、「bookmark_sidebar_1.19.0.zip」をダウンロードしました。

f:id:wantanBlog:20210223232733p:plain

「bookmark_sidebar_1.19.0.zip」というファイルがダウンロードできれば、この項は完了です。

拡張機能の取り込み

まずは先ほどダウンロードしたファイルの配置を行います。
ファイルをZIPから展開したら、中身を分かりやすい任意の場所に配置します。

私の場合は以下ですが、基本的にはどこでもよいです。

C:\bookmark_sidebar_1.19.0

先ほども開いたGoogle Chromeの拡張機能画面を開きます。
そこでデベロッパーモードをオンにします。

f:id:wantanBlog:20210223170724p:plain

デベロッパーモードにすると、新しいバーが追加されると思うので、そこから「パッケージ化されていない拡張機能を読み込む」を選択します。

f:id:wantanBlog:20210223171204p:plain

ここで、さきほど配置した「bookmark_sidebar_1.19.0」のフォルダを選択します。

f:id:wantanBlog:20210223234126p:plain

読み込みが成功すると以下のように対象の拡張機能が追加されていると思います。

f:id:wantanBlog:20210223234407p:plain

ここまできて正常に動作しているようならば、ブラウザの拡張機能でインストールしたのと同じになるので後はすきに使いましょう。

ブックマークサイドバー」の機能やショートカット割り当てなどについては以下の記事も参考にしてください。

www.wantanblog.com


かなり限定的な状況だとは思いますが、どなたかのためになれば幸いです。