終於又到了鐵人賽的季節，坦白說今年的主題選擇讓我極為猶豫，有一部分的想法是想寫一些深度的技術文章，但最終還是秉持著我寫系列文章的初衷-想讓新手們少走點彎路並享受學習的樂趣，作為轉職者我很希望協助跟我一樣的學習者順利走完這個旅程，因此暫時系列文章我仍會以新手教學與協助轉職為導向，有興趣的可以看一下我過去兩年的參賽文章，說不定對你會有所幫助．
2021鐵人賽-每日挑戰，從Javascript面試題目了解一些你可能忽略的概念
這次的文章啟發有兩個重要的點。
其一來自於js30這個熱門的免費課程，當時還是初學者的我在裡面玩轉了許多有趣的小專案，不但磨練了熟練度且很樂在其中．同時間參加的讀書會也讓我意識到，即便才學程式幾週，當下的我其實已經有能力做許多有趣的東西並應用在自己生活上，這讓我更有動力繼續往下學習！
其二則是在我轉職後，其實我仍一直收到相當多關於轉職的問題，我基本上都會盡可能地用我的個人經驗去協助回答，反覆回答相同的問題幾次後，我意識到可能很多人有著相同的疑惑，雖然我單人的看法並不見得正確，但可以的話我希望能盡量去協助回答作為一個參考．
因此在本次系列文中，每篇文章主要會涵蓋兩個部分
第二部分我很樂意聽聽其他工程師的看法，很多時候幸存者偏差這種事情我並不會意識到，歡迎提出各種討論讓後續的轉職者有更多意見可以參考．
再繼續往下看這系列文之前，必須先聲明此系列文適合以下的客群
That's it! 前言到此為止，讓我們進入今天的主題吧！
簡單來說Chrome Extension(擴充套件)就是一些可以用來改變瀏覽器一些功能的程式，舉凡像是常見的Ad block、grammarly或是meta mask小狐狸都屬於擴充套件，也就是你瀏覽器右上方常見的那一整排．
妥善地利用各種擴充套件能幫助你過得更爽一些，甚至有不少套件可以協助增進你的開發體驗！
簡短的介紹就到這邊，雖然聽起來很了不起，但實際上寫一個擴充套件一點也不困難，很多時候甚至只是短短幾行js程式碼而已，今天我們就一起來寫個讓你不要再耍廢的小套件吧！
我們今天的目標相當的簡單，就是在你打算去一些容易變成精神時光屋的網站時，直接關掉該tab，像是youtube、netflix、disney+等或是任何你容易沈迷的網頁，就像預覽畫面展示的一樣，你可以看到youtube的頁面曾短暫被打開但又立刻被關閉，效果非常簡單暴力。
Step 1: 專案結構
首先請你先建立一個資料夾，並在裡面建立一個manifest.json檔案、一個background.js檔案，與此同時請先下載以下的圖片並同樣放在資料夾內。
background.js檔案我們暫時留空，manifest.json則寫入以下的內容，暫時看不懂沒有關係，下方我會一一做解釋。
{
"name": "Stop Wasting Time",
"description": "Go study!Stop wasting your time on some tabs!",
"version": "1.0.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"action": {},
"icons": {
"16": "./32x32.png",
"32": "./32x32.png",
"48": "./32x32.png",
"128": "./32x32.png"
},
"permissions": ["tabs"]
}
manifest.json其實就是瀏覽器用來識別你這個套件內容的檔案，它會從其中了解到你套件的用途、該從哪邊讀取你的檔案、需要的權限等，以下我們先針對這次的套件會用到的屬性做說明．
到此為止你的專案結構應該是這樣的．
Step 2: 修改background.js
在動手前我們要先釐清我們要做的事情，我們希望在每次更新分頁時檢查分頁當下的url，若url有著我們指定的關鍵字(youtube, netflix等)我們便透過google提供的方法強行關掉該頁面，在先前的manifest檔案中我們有開啟"tabs"這個權限，因此我們可以從chrome tabs的文件中找到以下兩個我們需要的方法
同時，我們也要在監聽器內做個判斷決定當前的頁面是否要關掉，這麼一來大致的結構就出來囉！ 請你在background.js中貼上以下的內容，看不懂一樣沒有關係，我會做說明
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
if (tab.url.includes("youtube")) {
chrome.tabs.remove(tabId);
}
});
當然，假設你想要阻擋的並不只一個網頁，那麼用陣列的方式來處理也是完全可以的
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
const forbiddenKeywords = ["youtube", "netflix", "disney"];
for (let i = 0; i < forbiddenKeywords.length; i++) {
if (tab.url.includes(forbiddenKeywords[i])) {
chrome.tabs.remove(tabId);
}
}
});
想再fancy一點可以用es6的some語法，這邊不額外做說明，之後的文章會提到
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
const forbiddenKeywords = ["youtube", "netflix", "disney"];
const isPageForbidden = forbiddenKeywords.some((keyword) =>
tab.url.includes(keyword)
);
if (isPageForbidden) {
chrome.tabs.remove(tabId);
}
});
程式碼其實相當的單純，我們在chrome.tabs.onUpdated這樣的事件上掛了一個監聽器，這個監聽器需要傳入一個callback函數，其中包含以下的三個參數
我們做的僅是比對更新後的tab.url是否包含我們指定的關鍵字，若有包含的話則呼叫chrome.tabs.remove這個函數，並把需要的tabId傳進去這樣瀏覽器才知道要關掉哪一個tab！ 程式碼的部分就到此為止而已！ 寫擴充套件沒有想像中這麼困難對吧？
Step 3: 載入並實際使用擴充套件
套件的部分到此為止就寫完了，真的就這麼簡單！ 接著我們需要到開發者頁面載入我們剛剛做的套件確認功能是否正常，首先請你拜訪chrome://extensions/ 接著打開右上角的開發人員模式，這樣能讓你從本機中載入一些測試用的套件．最後請你點選載入封裝項目的按鈕，並選擇你剛剛建立的資料夾，它會確認其中是否有需要的manifest.json檔案。
載入完成後你應該會在頁面中看到我們剛寫好的套件，右上角如果沒有看到的話可以打開擴充功能選單並將我們寫的套件釘選起來，這麼一來一切就都結束囉！擴充套件順利的照我們的預想運作了！
我們今天寫了一個極端簡陋的擴充套件，還有非常多的地方可以優化，也沒有談到發布的問題(未發布的情況下你目前只能在本地使用測試用的套件)，但這僅僅只是一個開頭，主要是想表達這一切並沒有這麼遙不可及的概念，只要肯用心研究，即便是初學者也能做出好玩、有用的東西！
文章中的範例程式碼可以在這邊取得，歡迎自行取用
接著我們就進入最後的部分，轉職常見Q & A！
Danny, 聽說你現在在做工程師啊？ 是不是真的這麼好賺啊？ 你們這樣的轉職者薪水大概怎麼樣啊？
這應該是最多人在乎但沒幾個人有那個臉皮直接問的，很慶幸的是我周邊不缺乏這樣的人?
談錢真的很庸俗，不過確實是非常值得在乎的一個問題，這邊我們就來談一談吧。
因為之前辦過活動的關係，許多人有向我討論過offer的問題，加上也接觸過其他轉職的朋友，對於第一份jr工作的薪資我自己心裡確實已經有把尺，以過去兩年在台中、台北且完全沒經驗的jr為例，樣本數約30，起薪介於38k-80k⬆️ ，年薪則介於45w-90w⬆️ ，中位數大致落在每個月45k、年薪60w左右。由於jr水準落差極大加上每個公司對於jr要求不同，造成級距落差不小，因此有些極端值我就先藏一下，但基本上還是各憑本事的世界，有能力的人可以盡量爭取更好的價碼，第一份就破百的也不是沒聽過。
隨著年資增加與跳槽自然可以讓這個數字不斷的攀升，但天花板也是存在的．在台灣純軟體工程師即便資深工程師都很難跨過年薪200這道坎，除非是外商或是你有負擔一些管理的責任，想靠寫程式大富大貴我是覺得很有難度，但可以讓你有一份足以溫飽且有挑戰性的工作，持續的精進你的技能也會開拓更多的機會，對有些夢想出國工作的人更是相當不錯的踏板，全看你怎麼看待這職業囉，各行各業都有自己的酸甜苦辣?
本文章同步發布於個人部落格，有興趣的朋友也可以來逛逛~!
iThome鐵人賽
看影片追技術