Chrome拡張機能で住所検索機能を作る - フリーランス　技術調査ブログ

はじめに

住所検索をする機会が多く便利なChromeの拡張機能があると思い調べてみたところ、なさそうだったので、自分で作ってみた。
APIに関しては下記のサイトのAPIを利用させていただく。 zipcoda.net

manifest.jsonファイルを作成する

manifest.jsonファイルを作成する。WebExtension API を使う拡張機能に必ず含めなければならない唯一のファイルです。 .これは JSON形式のファイルですが、１つ例外があります: " // "-形式のコメントが許可されています。

{ 
  "manifest_version": 2,
  "name": "Address Search",
  "version": "1.0",
  "description": "住所検索", 
  "browser_action": {
    "default_popup": "form.html",
  },
  "content_security_policy": "script-src 'self' https://zipcoda.net; object-src 'self'"
}

developer.mozilla.org

Chromeの拡張機能から外部サーバーにアクセスする場合、下記の指定が必要である。そのため、APIを利用させていただくサイトのURLを指定する

  "content_security_policy": "script-src 'self' https://zipcoda.net; object-src 'self'"

developer.mozilla.org

検索画面を作成する

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title> 

</head>
<body>
    <form method='post' action="#">
        住所入力：<input type="text" id="address" value="" placeholder="住所を入力してください">
        <button type="button" id="zipSearchButton">検索</button>
    </form>
    <div id="list"></div>
    <script src="jquery.min.js"></script>
    <script src="axios.min.js"></script>
    <script src="zipcodeSearch.js"></script>
</body>
</html>

検索フォームからAPIを呼び出すJSを作成する

$(function(){
    $('#zipSearchButton').on('click',function(){
      $.ajax({
        url: 'https://zipcoda.net/api',
        dataType: 'jsonp',
        data: {
          address: $('#address').val()
        }
      }).then(function(response){
        $('#list').empty();
        response.items.forEach(address => {
            console.log(`<li>${address.zipcode} ${address.pref} ${address.components[1]} ${address.components[2]}</li>`)
            $('#list').append(`<li>${address.zipcode} ${address.pref} ${address.components[1]} ${address.components[2]}</li>`);
        });
      })                  
   });
});