Chromeの拡張機能を作ろう！

リンクを新しいタブで開いて選択状態にするメニュー項目をマウスの右クリック メニューに追加するChromeの拡張機能の自作

　ChromeやEdgeはデフォルトでは、リンクを新しいタブで開いても、新しいタブを選択状態にしてくれないので、新しいタブを選択する手間がかかります。

　仕事でEdgeで新しいタブを何回も開くのは、とても大変です。

　また、「小説家になろう」の小説の各話の編集リンクを新しいタブで開くのも、とても大変です。

　そのため、リンクを新しいタブで開いて選択状態にするメニュー項目をマウスの右クリック メニューに追加するChromeの拡張機能を自作してみました。

　Chromeの拡張機能はEdgeでも利用できます。

　パブリック ドメインです。

　この拡張機能をインストールしてから、リンクの上にマウス カーソルを合わせて右クリックすると、多分、マウスの右クリック メニューの下から2番目に、「リンクを新しいタブで開いて選択状態にする」が追加されて表示されます。

　その「リンクを新しいタブで開いて選択状態にする」をクリックして選択すると、文字通り、リンクのウェブ ページが新しいタブで開かれて、そのタブが選択状態に成ります。

　2024年1月18日の時点の最新のChromeで動作を確認しました。

　2024年1月22日に、仕事で利用しているパソコンのEdgeで動作を確認しました。

　Githubでパブリック ドメインで公開しました。

　Bing検索で「github eliphas1810-tools」などで検索してみてください。

　Google検索では検索できません。

　コピーする場合は、2文字の全角空白を4文字の半角空白に置換してください。

　UTF-8という文字コードでファイルに保存してください。

　①

　Chromeで自作のChromeの拡張機能をディレクトリ単位で指定するので、Chromeの拡張機能のファイルを置くディレクトリを新規作成します。

　ただし、Chromeに指定して読み込んでいるディレクトリを削除すると、その自作のChromeの拡張機能も削除されてしまうので、「ドキュメント」のディレクトリの下などにディレクトリを新規作成します。

　ちなみに、Chromeのストアに公開するためには、著作権などの問題が無いアイコンの画像ファイルを用意したりする必要が有るので、少し面倒です。

　著者は、「SelectNewTab」という名前でディレクトリを新規作成しました。

――――――――――――――――――――

SelectNewTab

――――――――――――――――――――

　②

　右クリック メニューの権限を得る設定やバック グラウンドで実行する.jsファイルの指定が書かれているmanifest.jsonを用意します。

　ちなみに、マニフェストのバージョン3では、サービス ワーカーは、デフォルトで、必要な場合にだけ起動され、必要が無い場合は終了されてメモリーが解放されるそうです。

/SelectNewTab/manifest.json

――――――――――――――――――――

{

　　"name": "SelectNewTab",

　　"version": "0.1.0",

　　"manifest_version": 3,

　　"description": "リンクを新しいタブで開いて選択状態にします。",

　　"permissions": ["contextMenus"],

　　"background": {"service_worker": "SelectNewTab.js"}

}

――――――――――――――――――――

　③

　Chromeの拡張機能の本体であるJavaScriptをmanifest.jsonに書いた名前で用意します。

/SelectNewTab/SelectNewTab.js

――――――――――――――――――――

//マウスの右クリック メニューに、この拡張機能が追加した自作のメニューが存在する場合は、それだけを削除

//

//これを起動しないと、Chromeを閉じてから再び開いた場合に、自作のメニューの追加の重複エラーが発生してしまいます。

//

//chrome.runtime.onInstalled.addListener(() => {});を利用すると、Chromeを閉じてから再び開いた場合に、この拡張機能が起動されないので、自作のメニューは存在するが、動作しなく成ってしまいます。

//

chrome.contextMenus.removeAll();

//マウスの右クリック メニューに、自作のメニューを追加

chrome.contextMenus.create({

　　id: "SelectNewTab",

　　title: "リンクを新しいタブで開いて選択状態にする",

　　contexts: ["link"]

});

//マウスの右クリック メニューで、自作のメニューがクリックして選択された時の処理を追加

chrome.contextMenus.onClicked.addListener((info, tab) => {

　　//マウスの右クリック メニューで、自作のメニューがクリックして選択された場合

　　if (info.menuItemId == "SelectNewTab") {

　　　　//リンクを新しいタブで開いて選択状態にします。

　　　　chrome.tabs.create({url: info.linkUrl, selected: true});

　　}

});

――――――――――――――――――――

　④

　Chromeで「拡張機能」をクリックして選択してから「拡張機能を管理」を選択します。

　⑤

　「デベロッパー モード」をクリックしてオンにします。

　⑥

　「パッケージ化されていない拡張機能を読み込む」をクリックして選択します。

　⑦

　自作のChromeの拡張機能のファイルを置いているディレクトリを選択して「Select」ボタンをクリックします。

　※

　くり返しに成りますが、Chromeに指定して読み込んでいるディレクトリを削除すると、その自作のChromeの拡張機能も削除されてしまうので、注意してください。