我們今天繼續Chrome Extension系列，這玩意真的是低投入高回報的東西，我還記得第一次寫的擴充套件陪我耍廢了好久? 就算不發布也可以直接分享給朋友讓他們在自己的電腦上使用，今天的主題是瀏覽器紀錄清除，相信在立即死亡與公開自己的瀏覽器紀錄兩者之間，許多人應該會選擇立即死亡吧！但清除瀏覽記錄其實需要的操作還不少，不如寫個小套件一鍵清除吧！
我們今天要做的東西需要隱密一點，偷偷刪除掉指定區間的紀錄不留下任何證據，如以下的預覽圖一樣，連完成的提示都不給?
Step 1: 專案結構
相信經過前兩天的練習，開始的步驟你應該相當熟練了，但別急，這次稍微有些不同。
新建資料夾後，雖然我們一樣需要manifest.json檔案、一樣需要一個icon圖，不過在這個專案中我們並不需要一直在背景監聽事件或執行函式，因此不會需要background.js，取而代之我們需要以下的檔案。
是的，就是傳統的前端三元素，這次的套件中我們要依賴這三者的組合達成我們要的效果。
完成後你的專案結構應該是這樣的，新增的檔案都先留空沒有關係。
Step 2: 修改manifest.json
請在manifest.json中寫入以下的內容，特別注意這次我們不需要background的屬性，取而代之的是我們要將之前留空的action屬性填入一些東西。
{
"name": "Clear Your History",
"description": "Clear your broswer history with one simple click!",
"version": "1.0.0",
"manifest_version": 3,
"action": {
"default_title": "Click to clear your history",
"default_popup": "popup.html"
},
"icons": {
"16": "./32x32.png",
"32": "./32x32.png",
"48": "./32x32.png",
"128": "./32x32.png"
},
"permissions": ["history"]
}
介紹一下這次的重點, action屬性裡面新增的東西
你或許已經猜到了，新增的style.css & content.js就是要用在等等要寫的popup.html裡面，不用把它想得太複雜，這popup就是一個小小但完整的網頁！
Step 3: 修改popup.html
請在popup.html中寫入以下的內容，是一個非常簡單的結構，除了標題之外我們需要一個下拉選單與一個按鈕做提交，同時我們在這裏預先載入等等要編輯的js & css檔案。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css" />
<script src="./content.js" defer></script>
</head>
<body>
<div class="container">
<div class="title">Delete History</div>
<select name="timeRange" id="timeRange">
<option value="1" selected>Within 1 hour</option>
<option value="6">Within 6 hours</option>
<option value="12">Within 12 hours</option>
<option value="24">Within 24 hours</option>
<option value="all">All</option>
</select>
<button class="btn">Confirm</button>
</div>
</body>
</html>
注意我們在這邊option除了先寫入value之外，我們還要在其中一個選項加入selected屬性，避免使用者傳空值。
Step 4: 修改style.css
雖然不必要，但我會建議稍微做一點樣式，免得整個popup看起來太過於悲慘，請你將以下的程式碼寫入style.css檔案
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
padding: 0.5em 0.75em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 100px;
background: #f3e2c7;
}
.title {
font-size: 1em;
font-weight: bold;
}
select[name="timeRange"] {
background: transparent;
}
.btn {
padding: 0.25em 0.5em;
font-size: 0.75em;
}
Step 5: 修改content.js
終於到了最後一步，處理邏輯前我們一樣先釐清我們到底要做什麼．
點擊icon跳出popup的部分已經由extension本身替我們處理了，下一步我們希望點擊提交按鈕時刪除我們指定區間的歷史紀錄，而根據官方文件的說法，它有刪除區間以及刪除全部紀錄的方法讓我們使用，因此在處理時我們需要根據剛剛在html檔案寫的select元素數值去做到底要呼叫哪個方法的判斷．
這麼一來我們要做的事情就很簡單了，我們知道會需要在按鈕上掛上一個監聽器，接著這個監聽器以我們寫的函數作為handler，函數需要傳入select元素的值做為參數，這樣我們才有辦法知道要呼叫哪個google提供方法去刪除紀錄!
比較需要注意的有幾點
const button = document.querySelector(".btn");
const timeRangeSelect = document.querySelector("#timeRange");
const deleteHistory = (timeRange) => {
// 優先處理delete all的情況
if (timeRange === "all") return chrome.history.deleteAll();
// deleteRange函數需要傳入一個含有endTime & startTime的物件，而時間需要以毫秒(milliseconds)表示epoch time
return chrome.history.deleteRange({
endTime: Date.now(),
startTime: Date.now() - Number(timeRange) * 60 * 60 * 1000,
});
};
button.addEventListener("click", () => {
deleteHistory(timeRangeSelect.value);
window.close();
});
Step 6: 載入並實際使用擴充套件
懶得重複了，忘記的朋友請自己去看第一天的文章，我不兇，我只是懶。
今天我們利用了chrome.history提供的方法寫了一個簡單的刪除紀錄擴充套件，主要的目光集中在popup的使用，有許多常見的套件都有這樣的彈出式窗口設計，現在你也知道那些套件的基本是怎麼做的囉！比想像中簡單對吧？
文章中的範例程式碼可以在這邊取得，歡迎自行取用
Danny, 我看了看你說的那些課程，也了解了薪資的部分，我很想要這樣穩定的薪水但我覺得我好像對寫程式沒有熱情，這樣我是不是不該當工程師啊？
uhhh..又來了，我不太喜歡把這個職業跟錢綁得太緊，但事實就是很多人都是因為薪水相對優渥才會動了轉職的念頭，這類的問題坦白講很難避免，我還是說一說我的看法吧！
先從結論說起，我不認為你需要熱情才能成為一個合格的工程師，雖然我自己很喜歡寫code，但與此同時我也並不覺得對於工作一定要有熱情，當然對自己的工作有熱枕是件好事，但你可以對生活的很多事情有熱情，然後把工作當作生活下去的必須行為而已，為了錢而工作...說實在我個人覺得這並沒有什麼不對，不過在此之前你當然需要具備能做好你工作的能力?
至於你打算爬到多高的位置則是完全看你個人，更高的位置沒有熱情去支撐自己不斷地進修的話我想是很困難的，不過每個人目標並不同，僅追求混口飯吃的話是肯定沒有問題的，人生還有許多有趣的事情，你不見得需要把工作當作你的重心！
本文章同步發布於個人部落格，有興趣的朋友也可以來逛逛~!
iThome鐵人賽
看影片追技術