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

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

やりたいこと#

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

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

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <link rel="stylesheet" type="text/css" href="popup.css">
5
  </head>
6

7
  <body>
8
    <h3>Chrome Extension Template</h3>
9
    <a href="https://google.com">https://google.com</a>
10
  </body>
11
</html>

実現方法#

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

1
$(function () {
2
  $('#link').on('click', (e) => {
3
    chrome.tabs.create({url: $(e.target).attr('href')});
4
  });
5
});

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

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <link rel="stylesheet" type="text/css" href="popup.css">
5
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
6
    <script type="text/javascript" src="popup.js"></script>
7
  </head>
8

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

参考：

https://teratail.com/questions/93432