Hi Dai Gei Ho~ 我是Winnie ~

想到當初在開發Chrome Extension 時，除了遇到在 Content Script 中使無法用 ES6 Module 的巨坑之外(差點爬不出來，同時 在 Content Script 中使用 CSS 相關 frameWork ，像是 Tailwind CSS 、Bootstrap等 或是 自定義CSS 樣式時 也是一大需要小心的坑。

為什麼呢？

這就需從 CSS 開始說起了，當我們在使用css自定義樣式時，通常會使用 class、id 等來撰寫 style 樣式，

像是

<style>

.btn{

    background:red;
    width:100px;
    height:30px;
}

</style>

<button class="btn">按我!</button> // 為紅色

但一個不小心，當 Class名稱相同的時候，此時後者定義的Class樣式會蓋掉前面Class所定義的樣式，這個相信大家都很熟了。

<style>

.btn{

    background:red;
    width:100px;
    height:30px;
}

.btn{

    background:blue;
}

</style>

<button class="btn">按我!</button> // 為藍色

那如果是 透過Content Scirpt注入的CSS呢？

如果重複，會不會覆蓋原本網站的樣式？

答案是 不會，因為Content Script injection 的 css 優先權較低，就算它是後面載入的，當遇到相同Class 還是會被原本主網站所覆蓋。

那有什麼解決辦法？ 這還是只能回歸於Css基本的權重來下手了。

先來看看 優先權順序 :

!important > inline style > ID > Class/psuedo-class(偽類)/attribute（屬性選擇器） > Element

解決方法

• inline Style
• !important
• 增加 Class的獨特性

但以上方法除了!important，大多都只適用於 自定義css樣式時，

那如果是使用 CSS 相關 frameWork 呢？

先讓我們來看看以下情境：

假設以下為原本網站存在於網站中的Div元素，而其網站在 CSS frameWork 中將 font-size 相關base字體大小設置為 18px，依照常理，下方的 text 文字大小沒任何意外都會是18px。

// 當前網站
<div class="text-base">text</div>

// content script
<div class="text-base">content script 的 text</div>

但問題來了，假使 Extension 也使用了相關css frameWork，其中 text-base 設置為 16px， 那字體大小會是16px嗎?

登愣！是18px， 為什麼呢？

因為Content Script injection 的 css 優先權較低

所以依照情況 解決方法有幾種:

• 透過 content script 注入 iframe
• 假使是使用 Vue， 可以 使用 vue scoped 概念來隔絕
• 假使是使用 tailwindCss 或者 Windicss 開發，可以採用 prefix 方法來定義樣式。
• !important

那今天文章先到這邊了，謝謝願意花時間看此篇文章的你，如果文章有錯誤的地方，再麻煩不吝嗇的給予指教，感謝!!

今日有感而發

最近越寫到後面，越覺得下一篇的內容 要爆了...(如下圖)

今日分享 -> 종현 - 하루의 끝 End Of A Day