Zenn
⬜

バックグラウンドから自前で用意したカスタムページを開く

2023/11/10に公開
Chrome拡張
tech

カスタムページを開こうとしたのにHTMLファイルに書いた内容が反映されず空白のままのときの対処法

  • /から始まる絶対パスを書かなければいけない
  • カスタムページからJSファイルを呼び出すときも/から始まる絶対を書かなければいけない
  • オプションページやポップアップなら相対パスでも大丈夫だったのに。
  • manifest.jsonでweb_accessible_resourcesは定義しなくていい。
background.js
chrome.action.onClicked.addListener(() => {
  chrome.tabs.create({ url: "/src/tinder/tinder.html" }); //絶対パスだった
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tinder</title>
</head>
<body>
  <h1>セーブするたぶ</h1>
  <script src="/src/tinder/tinder.js"></script> // ここも絶対パス
</body>
</html>

Discussion