JavaScript
Chrome
chrome-extension

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


はじめに

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

URL横のiconボタンを押すとポップアップが表示され、テキストボックス、ボタンが表示される

基本的な形のchrome拡張のサンプルになればと思います。


作ったもの


  1. Browser Actionボタンを押すとテキストボックス、ボタンが表示されます。

    スクリーンショット 2019-01-02 14.39.33.png


  2. 検索ワードを入力後SEARCHボタンを押すと履歴検索結果を表示します。

    スクリーンショット 2019-01-02 14.39.49.png


  3. DELETEボタンを押すと表示されているリストを履歴から削除します。

    スクリーンショット 2019-01-02 14.40.10.png



やりたかったこと

普段chromeの検索バーの補完機能を多用しています。

ですが、必要ないURLや間違えたURLも候補であがってきてしまうので、どうにか削除したいです。

スクリーンショット 2019-01-02 14.24.41.png

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

chromeバージョン:71.0.3578.98

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


結果

消えませんでした


構成

スクリーンショット 2019-01-02 14.55.05.png


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"
]
}


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>


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のドキュメント

Chrome拡張 備忘録 1から10まで

Chrome拡張の開発方法まとめ その1:概念編