リンクを新しいタブで開く拡張機能を自作してみる

リンクは右クリック等から新しいタブで開く事が出来ますが、通常の左クリックや Enter キーでもとにかくリンクを新しいタブで開く拡張機能を自作してみました。

ネット上では querySelectorAll や、getElementsByTagName を使い a タグを操作する方法が多く紹介されていますが、これだと追加で表示されるコンテンツやボタンで開閉されるリンク要素を取得する事が出来ません。

そこで、要素の取得はクリックされた時に行う方法を取りました。
動作としては、クリックしたリンク要素に target="_blank" を付加するというシンプルなものです。

manifest.json

{
  "name": "Open Link in New Tab",
  "version": "1.0",
  "manifest_version": 3,
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["contentscript.js"]
  }]
}

manifest.json は content_scripts の使用を宣言しただけの最低限の構成です。
全てのページに適用したい為、<all_urls> となっていますが、ここで適用するサイトを指定したり、"exclude_matches"で除外したりも出来ます。

contentscript.js

document.addEventListener('click', (e) => {
  const link = e.target.closest('a');
  if(link !== null) {
    if(link.href.includes('http') === true && link.getAttribute('href') !== '#') {
      e.stopImmediatePropagation();
      link.setAttribute('target', '_blank');
    }
  }
}, true);

contentscript.js では、まず最初にクリックした要素の直近の祖先の a 要素を取得しています。

条件文は色々と記述の仕方がありますが、要素の取得が出来ているかの判定を行い、取得しているならば、そのリンク先の url に"http"が含まれ、かつ href 属性の値が"#"ではない場合に target="_blank" を付加するものとしています。

拡張機能として読み込ませる

Microsoft Edge の場合、拡張機能の管理ページを開き、「開発者モード」にチェックを入れて、上記作成した2つのファイルをフォルダに入れ、展開して読み込みから選択します。