スポンサーリンク

Google Chromeの拡張機能で独自で製作した機能をインストールする方法

Google Chrome ブラウザーでは拡張機能を使って独自の機能を製作した際、ローカルで細んした拡張用のファイルをインストールする手順を備忘録的に投稿しておきます。

Google拡張機能で機能を追加

Chromeの機能拡張では、右クリックした際に表示されるコンテキストメニューをカスタマイズするなど自由に機能の追加が可能です。

製作した機能を公開して、Chromeにダウンロードして追加する方法が一般的です。

しかし独自に製作した機能の場合、公開せずにローカルに保存したファイルを取り込むことでインストールが可能です。

例えば、次のようなコードを用意して［拡張機能］に取り込むとコンテキストメニューをカスタマイズできます。

[manifest.json]
{
  "manifest_version": 3,
  "name": "Yahoo! JAPANで検索",
  "version": "1.0",

  "background": {
    "service_worker": "event.js",
    "persistent": false
  },

  "permissions": [
    "activeTab",
    "contextMenus"
  ]
}

[event.js]
'use strict';

{
  const _contextMenus = async () => {
    await chrome.contextMenus.removeAll();

    chrome.contextMenus.create({
      id: "search-yahoo",
      title: "Yahoo! JAPANで検索",
      contexts: ['selection']
    });
  };

  chrome.runtime.onInstalled.addListener(_contextMenus);
  chrome.runtime.onStartup.addListener(_contextMenus);
  chrome.contextMenus.onClicked.addListener((info, tab) => {
    var str = info.selectionText;
    chrome.tabs.create({url: "https://search.yahoo.co.jp/search?p="+str});
  });
}

実際に動作させると、こんな感じでコンテキストメニューが表示されます。

この際、保存した［event.js］と［manifest.json］ファイルを１つのフォルダー（例［SearchYahooJ］など）に保存して、Chromeへのドラッグ操作でインストールが可能です。

ローカルファイルを拡張機能にインストール

ローカルディスクに保存したファイルを、Chromeの拡張機能にインストールするには、フォルダーに保存した複数のファイルを［拡張機能］画面にドラッグアンドドロップします。

具体的には次の手順で行います。

1. 右上のメニューから［拡張機能｜拡張機能を管理］を選択します。

2.［拡張機能］画面が表示されます。

3. 右上の［デベロッパーモード］が有効になっていない場合にはトグル部分をクリックして有効にします。

4.［パッケージ化されていない拡張機能を読み込む］などが追加されます。

5. ローカルディスクに保存したファイルのフォルダーを［拡張機能］画面にドラッグします。

以上の手順でローカルディスクに保存した独自の機能をChromeにインストールできます。

まとめ

今回は、Google Chromeブラウザーに独自の機能を追加する［拡張機能］をローカルディスクからインストールする手順について書きました。

インストールの既定値では、ローカルディスクから機能拡張をインストールする設定は無効化されていて［拡張機能］画面の［デベロッパーモード］を有効にします。

その後に拡張機能用のファイルを保存したフォルダーを［拡張機能］画面にドラッグアンドドロップする操作でインストールが可能になります。

Chrome拡張機能をローカルディスクからインストールしたい人の参考になれば幸いです。

スポンサーリンク

最後までご覧いただきありがとうございます。

こちらも読まれてます

コメントを残すコメントをキャンセル

%d