【Chrome拡張開発】ポップアップに表示したリンクが開けない場合の対処

前回、Chrome拡張機能のポップアップの表示について書きました。このポップアップにhrefでリンクを追加したのですが、リンクをうまく開けなかったので、その対応メモです。

やりたいこと
実現方法

やりたいこと

ポップアップにリンクを追加して、リンククリック時に新しいタブで開きたいです。

こんな感じでポップアップのhtmlにリンクを追加するだけでいけるかなと思ったのですが、リンクは出現するもののクリックしても何も起こりません。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="popup.css">
  </head>

  <body>
    <h3>Chrome Extension Template</h3>
    <a href="https://google.com">https://google.com</a>
  </body>
</html>

実現方法

ポップアップのリンクを新しいタブで開くには、chrome.tabs.createを使用します。下記のようなjavascriptを用意します。

// popup.js
$(function () {
  $('#link').on('click', (e) => {
    chrome.tabs.create({url: $(e.target).attr('href')});
  });
});

このjsファイルをポップアップのhtmlで読み込めば、ポップアップのリンクをクリック時に、新しいタブで開くようになります。JQueryを使っているのでJQueryも読み込んでいます。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="popup.css">
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="popup.js"></script>
  </head>

  <body>
    <h3>Chrome Extension Template</h3>
    <a id="link" href="https://google.com">https://google.com</a>
  </body>
</html>

参考：