擴展內容腳本中的CSS 注入問題

儘管在清單中定義了CSS 注入，您的CSS 文件在網頁中仍然不存在。以下是可能的原因和解決方案：

原因： CSS 規則衝突

樣式表已註入，但由於其他樣式覆蓋其規則而未應用。

解決方案：

• 增加CSS特異性： 為您的 CSS 規則添加更具體的選擇器。
• 使用 "!important": 在每個規則後面加上 "!important" 來覆寫現有樣式。

原因：內容腳本注入限制

Manifest 版本 3 限制內容腳本直接注入註入 CSS。

解決方案： 透過內容腳本注入CSS，如下所示：

myScript.js:

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);

manifest.json:

"web_accessible_resources": ["myStyles.css"]

注意： 使用Manifest 版本2 時，需要「web_accessible_resources」金鑰才能允許從非擴充頁面存取CSS 檔案。