太棒了！
最近，我有一個客戶，我必須為他製作一個登陸頁面（將在另一個部落格中討論這一點）。
我一直最討厭的事情是為網站選擇字體。我什至看了幾個小時有關排版的影片，但仍然發現很難選擇字體。哦！相信我，您選擇的字體類型會產生很大的差異，並且在某種程度上它會為頁面增添個性。它可以將您的頁面從 🤮 帶到 🤯。
例如，讓我們在 NYT（紐約時報）頁面上測試 2 種不同的字體
左邊的是《紐約時報》預設的「切爾滕納姆」和「喬治亞」。右邊的是“italiana”，猜猜哪個更具可讀性？您會在哪一頁停留更久？
或者
看看Awwwards上的一些網站，您總是會注意到幾乎所有網站都有與頁面相符的精美版式。
提出這個想法
現在在網站上測試不同的字體需要花費很多時間，這也是因為我們大多數人沒有在我們的網站上快速預覽字體。 （尤其是當你自己編碼時）
這時我意識到直接在網頁上快速預覽字體可以節省我數小時的猜測工作。
我想在任何網站上預覽 Google 字體（我的主要字體來源）並直接複製程式碼。實現這一目標的唯一方法是製作瀏覽器擴充功能。
因此，我休息了一個星期，開始建立一個名為Font tester 的工具並將其開源，以便在建置擴充功能時可以參考。
為什麼我從 chrome 開始？
毫不奇怪，我決定從 chrome 擴充功能開始，因為它佔據了市場主導地位。 Chrome 的市佔率為 65.41%，其次是 Safari - 18.39%，Edge 為 5.24%。 （來源）
儘管我的主要瀏覽器是Edge，但我決定為Chrome 製作擴展程序，以便更多的人可以使用我的擴展程序，現在不要誤會我的意思，我仍然使用Chrome，但有時它會佔用我的計算機記憶體的很大一部分。
另外，將 Chrome 擴充功能移植到 Edge 或基於 chromium 的瀏覽器並不是那麼困難（至少我是這麼讀的）
注入小部件與彈出窗口
現在，當您開始瀏覽 Google 的開發人員指南時，您會發現有多種方法可以顯示您的擴充功能。
我將重點關注彈出視窗並將小部件注入到頁面中。
彈出視窗就是彈出的如下圖。
它執行在一個隔離的容器中，具有獨立的 DOM 和 JS 上下文。
現在，雖然這對大多數用例來說可能是理想的，但我不希望擴展位於一處。我想讓人們在頁面上移動小部件，這樣它更容易使用並且不那麼煩人
這就是為什麼我選擇將小部件直接注入網頁，使其看起來如下所示
使用 Vanilla JS VS 函式庫
我開始使用純 Js 進行開發，但很快就意識到使用這種方法會花費更多時間來開發原型，因此我決定使用 React.js。
最初使用 React.js 進行擴充設定花了我一些時間（主要是因為我找不到 React+chrome 擴充功能的太多幫助），但是，我能夠在開發階段更快地進行。
我還決定選擇元件庫antd ，這樣我就不必重新發明輪子，並且可以更快地進行原型設計。
因此，如果您的擴充功能使用 React + Webpack 設置，請隨時參考Github
ShadowDOM 🦇
因此，將擴充功能注入到不同網頁的主要問題之一是，網頁樣式可能會影響擴充功能的外觀。
這是我遇到ShadowDOM的時候，這對我來說是一個全新的概念，以前從未聽過。
因此本質上，如果您將其加入到 ShadowDOM 中，頁面上的任何樣式或 JS 都不會影響您的擴充功能的樣式。
因此，一旦我理解了它是什麼，我就重寫了部分程式碼以附加到 ShadowDOM 而不是 wepage 的 DOM。這樣，小部件的樣式就不會受到頁面樣式的影響。
發佈到 Chrome 應用程式商店。
最後，經過測試，是時候將擴充功能發佈到 Chrome 商店了。
發佈到 Chrome 商店有點不同，它設定了許多安全問題，以確保您不會發布惡意軟體。發布後，我覺得發佈到 Chrome 比發佈到 Play 商店具有更高的安全標準，這是有充分理由的。
現在，根據您的manifest.json中的權限，您必須證明為什麼您需要其表單中的權限。
審核過程可能會從幾個小時到一周不等。我的第一次審查花了大約 2 天的時間，此時我注意到樣式沒有應用在小部件中。所以我不得不重建它和样式，並在發布之前重新提交，這次花了不到 24 小時，終於發布了我的第一個 chrome 擴展 😎
這就是我寫第一個 Chrome 擴充功能的過程。
我是誰？
對於那些不認識我的人來說，我是 Paul，我大部分時間都在寫開源程式碼。
如果你想看更多開源內容，可以在Github和Twitter上關注我
哦！並且不要忘記查看擴展並讓我知道您的反饋🙃。即將推出的功能可以在路線圖上找到。
https://chromewebstore.google.com/detail/font-tester/deachoodakeofjlfikfkohihnpcgiaim
原文出處：https://dev.to/paul_freeman/heres-what-i-learned-from-building-a-chrome-extension-1986
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式