크롬 검색 기록을 검색하여 일괄 삭제하기 크롬 확장 만들기
13999 단어 Chrome자바스크립트chrome-extension
소개
Chrome 검색 기록을 검색하여 일괄 삭제하는 Chrome 확장 프로그램을 만들었습니다.
URL 옆의 아이콘 버튼을 누르면 팝업이 표시되고 텍스트 상자, 버튼이 표시됩니다.
기본적인 형태의 chrome 확장의 샘플이 되었으면 합니다.
만든 것
하고 싶었던 일
평소 Chrome 검색 바의 보완 기능을 많이 사용하고 있습니다.
하지만 불필요한 URL이나 실수한 URL도 후보로 올라 버리므로 어떻게든 삭제하고 싶습니다.
완성 후보를 shift + (fn)delete로 삭제할 수 있다는 기사도 몇 가지 발견했지만 삭제할 수 없었습니다.
크롬 버전: 71.0.3578.98
그래서 이력에서 삭제하면 후보에서 사라질 것이다! 라고 생각 작성했습니다.
결과
사라지지 않았다
구성
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.jslet 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: 개념편
Reference
이 문제에 관하여(크롬 검색 기록을 검색하여 일괄 삭제하기 크롬 확장 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/jimpei/items/eb09f4af122198952ffd
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
사라지지 않았다
구성
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.jslet 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: 개념편
Reference
이 문제에 관하여(크롬 검색 기록을 검색하여 일괄 삭제하기 크롬 확장 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/jimpei/items/eb09f4af122198952ffd
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
{
"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"
]
}
<!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>
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: 개념편
Reference
이 문제에 관하여(크롬 검색 기록을 검색하여 일괄 삭제하기 크롬 확장 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/jimpei/items/eb09f4af122198952ffd
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(크롬 검색 기록을 검색하여 일괄 삭제하기 크롬 확장 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/jimpei/items/eb09f4af122198952ffd텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
