為什麼我注入的 CSS 在我的內容腳本中不起作用？

排查內容腳本中的CSS 注入問題

透過內容腳本將自訂CSS 注入網頁可能是擴展瀏覽器功能的有用技術。但是，如果注入的 CSS 不可見或不應用，則可能會令人沮喪。本文旨在解決此問題可能發生的原因並提供潛在的解決方案。

症狀：

您已將內容腳本配置為注入 CSS 文件，但它確實如此不會出現在目標網頁上。

可能原因：

1. 規則特異性： CSS 規則依其特異性應用。如果網頁上的其他樣式覆蓋了您注入的規則，您的CSS將不會被套用。
2. CSS應用：確保注入的CSS被正確解析和執行。 CSS 程式碼中的錯誤或與其他腳本的衝突可能會導致樣式無法套用。

解：

1.提高規則特異性：

在CSS 規則中加入額外的選擇器或唯一的類別名稱以提高其特異性。這將確保它們覆蓋網頁上任何衝突的規則。

2.使用「!important」規則：

在 CSS 規則後加上「!important」將強制它們覆蓋所有其他樣式。但是，應謹慎使用，因為它可能會導致不良副作用。

3.透過內容腳本注入 CSS：

使用內容腳本動態注入 CSS，而不是在清單中聲明它。這使您可以更好地控制何時以及如何套用樣式。

var style = document.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = chrome.extension.getURL('myStyles.css');
(document.head||document.documentElement).appendChild(style);

4. Web 可存取資源：

在某些情況下，您可能需要在manifest.json 中提供web_accessible_resources 鍵，以允許在使用清單版本2 時從非擴充頁面存取CSS 檔案。

"web_accessible_resources": ["myStyles.css"]

透過實作這些解決方案，您可以使用內容腳本成功注入和應用 CSS，從而使您能夠擴展網頁的功能和外觀：想要的。

以上是為什麼我注入的 CSS 在我的內容腳本中不起作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！