chromeの検索履歴を検索して一括削除するchrome拡張を作る

# はじめに
chromeの検索履歴を検索して一括削除するchrome拡張を作りました。

URL横のiconボタンを押すとポップアップが表示され、テキストボックス、ボタンが表示される
基本的な形のchrome拡張のサンプルになればと思います。

# 作ったもの
1. Browser Actionボタンを押すとテキストボックス、ボタンが表示されます。
<img width="618" alt="スクリーンショット 2019-01-02 14.39.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/263190/3c409d97-e37c-d443-279b-d9a23716688a.png">

2. 検索ワードを入力後SEARCHボタンを押すと履歴検索結果を表示します。
<img width="615" alt="スクリーンショット 2019-01-02 14.39.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/263190/123d34a4-1598-a1e5-842b-4c989e4a3c24.png">

3. DELETEボタンを押すと表示されているリストを履歴から削除します。
<img width="618" alt="スクリーンショット 2019-01-02 14.40.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/263190/3d730e19-0e6c-4180-ba24-a6393d573dbc.png">


# やりたかったこと
普段chromeの検索バーの補完機能を多用しています。
ですが、必要ないURLや間違えたURLも候補であがってきてしまうので、どうにか削除したいです。
<img width="668" alt="スクリーンショット 2019-01-02 14.24.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/263190/a335af2b-2c2e-5738-5a76-880cd7a90948.png">

補完候補をshift + (fn)deleteで削除できるという記事もいくつか見つけましたが、削除できませんでした。
chromeバージョン：71.0.3578.98

そこで履歴から削除すれば候補から消えるだろう！と思い作成しました。

# 結果
**消えませんでした**

# 構成
<img width="159" alt="スクリーンショット 2019-01-02 14.55.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/263190/a66c1c7c-629b-8bb2-2079-56790cd51e96.png">

```json:manifest.json
{
  "manifest_version": 2,
  "name": "Delete History",
  "version": "0.0.1",
  "description": "履歴をキーワード検索後削除します。",
  "author": "jimpei",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "history"
  ]
}
```

```html:popup.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <link rel="stylesheet" href="style.css">
    <title>Delete History</title>
  </head>
  <body>
    <input type="text" id='searchText'>
    <button id='searchBotton'>SEARCH</button>
    <button id='deleteBotton'>DELETE</button>
    <ul id='historyList'></ul>
    <script src='popup.js'></script>
  </body>
</html>
```

```js:popup.js
let deleteArray = []

document.addEventListener('DOMContentLoaded', function () {

  // SEARCHイベントのクリックイベント設定
  let divs = document.querySelectorAll('#searchBotton')
  divs[0] = divs[0].addEventListener('click', searchClickEvent)

  // DELETEイベントのクリックイベント設定
  divs = document.querySelectorAll('#deleteBotton')
  divs[0] = divs[0].addEventListener('click', deleteClickEvent)

})

// SEARCHクリックイベント
function searchClickEvent(e) {
  let ul = document.querySelector('#historyList')
  let searchText = document.querySelector('#searchText')
  let html = ''
  let microsecondsPerDay = 1000 * 60 * 60 * 24
  // とりあえず過去20年を対象
  let searchStartDate = (new Date).getTime() - microsecondsPerDay * 365 * 20 

  // TODO:startTime, endTimeをテキストボックスから指定
  let searchQuery = {
    text: searchText.value,
    startTime: searchStartDate,
    maxResults: 10000
  }

  deleteArray = []

  // 履歴取得
  chrome.history.search(searchQuery, function (historyItems) {
    let cnt = 0
    // 履歴の数だけループし、検索結果を表示する
    historyItems.forEach(function (historyItem) {
      cnt++
      deleteArray.push(historyItem.url)
      html += '<li><a href="' + historyItem.url + '" target="_blank">' + cnt + ':' + historyItem.title + '<br>' + historyItem.url + '</a></li>'
    })
    ul.innerHTML = 'target:' + cnt + html
  })
}

// DELETEクリックイベント
function deleteClickEvent(e) {
  deleteArray.forEach(function (url) {
    // このログはicon右クリック→ポップアップを検証で表示されるconsoleに表示される
    console.log('deleted:' + url)
    chrome.history.deleteUrl({url: url})
  })
}
```

# 最後に
chromeのURL欄の補完候補を削除する方法がわかる方教えてください。
(補完機能は使いたいです)

# 参考
[chrome history APIのドキュメント](https://developer.chrome.com/extensions/history)
[Chrome拡張　備忘録　１から１０まで](https://qiita.com/Tachibana446/items/696bb93bd4a23525cbb0)
[Chrome拡張の開発方法まとめ　その1：概念編](https://qiita.com/k7a/items/26d7a22233ecdf48fed8)