新しくページ（タブ）開く機能を実装します。
今回は、サイドパネルから素早く「Yahoo! JAPAN検索」ができる拡張機能を作ってみます。
検索したいキーワードを入力してボタンを押すと、自動的に新しいタブで検索結果が開く仕組みです。
まずはデスクトップなど任意の場所に新しいフォルダを作成します。名前は yahoo-search-panel 等、何でも大丈夫です。
このフォルダの中に「manifest.json」、「background.js」、「sidepanel.html」、「sidepanel.js」という４つのファイルを作成します。
テキストエディタを開いて、以下のコードをコピー＆ペーストして保存してください。
manifest.json （設定ファイル）
{
"manifest_version": 3,
"name": "Yahoo検索パネル",
"version": "1.0",
"permissions": [
"sidePanel"
],
"action": {
"default_title": "検索パネルを開く"
},
"background": {
"service_worker": "background.js"
},
"side_panel": {
"default_path": "sidepanel.html"
}
}
１． permissions: [“sidePanel”]
サイドパネルを表示するために必要な権限です。
background.js （サービスワーカー）
chrome.runtime.onInstalled.addListener(() => {
chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
});
アイコンをクリックした時にサイドパネルを開くための設定です。
sidepanel.html （表示画面）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Yahoo Search</title>
<style>
body { padding: 10px; font-family: sans-serif; }
input { width: 95%; padding: 8px; margin-bottom: 10px; }
button { width: 100%; padding: 10px; cursor: pointer; background-color: #ff0033; color: white; font-weight: bold; border: none; }
</style>
</head>
<body>
<h3>Yahoo! JAPAN検索</h3>
<input type="text" id="keyword-input" placeholder="検索ワードを入力...">
<button id="search-btn">検索する</button>
<script src="sidepanel.js"></script>
１． <input id=”keyword-input” type=”text” …
検索したいキーワードを入力するためのテキストボックスです。
２． <button id=”search-btn”></button>
検索を実行するボタンです。Yahoo!のブランドカラーに合わせて赤色にスタイル調整しています。
sidepanel.js （ロジック）
document.getElementById("search-btn").addEventListener("click", function() {
const keyword = document.getElementById("keyword-input").value;
if (!keyword) {
return;
}
const searchUrl = `https://search.yahoo.co.jp/search?p=${encodeURIComponent(keyword)}`;
chrome.tabs.create({ url: searchUrl });
});
１． document.getElementById(“search-btn”).addEventListener
「検索する」ボタン（IDが search-btn）がクリックされた時に、以下の処理を開始するという設定です。
２． const keyword = document.getElementById(“keyword-input”).value
テキストボックス（IDが keyword-input）に入力されている文字を取得して、keyword という箱（変数）に入れます。
３． if (!keyword) { return; }
もしキーワードが空っぽだった場合は、ここで処理を中断（return）します。何も入力せずにボタンを押した時に、空の検索タブが開くのを防ぐための記述です。
４． const searchUrl = …
Yahoo!検索の結果ページへ飛ぶためのURLを作成します。
encodeURIComponent(keyword) を使うことで、日本語やスペースなどの文字を、URLとして使える形式（例：%E6%9D%B1%E4%BA%AC）に変換して、正しいリンクを作っています。
５． chrome.tabs.create({ url: searchUrl })
作成したURLを新しいタブで開きます。
これで、ユーザーが入力したキーワードでのYahoo!検索結果がブラウザに表示されます。
実行
「拡張機能をインストールして実行する」を参考にして拡張機能インストールして、アイコンをクリックしてください。
サイドパネルが開いたらテキストボックスに「仙台 牛タン」など好きな言葉を入力して検索ボタンを押下します。
新しいタブが開いて、Yahoo!の検索結果が表示されれば成功です！
