通過chrome擴展選項有條件地注入CSS

Question

我有一個帶有選項頁的chrome擴展程序，其中包含幾個復選框，用於啟用或禁用某些CSS樣式（在一個特定的匹配URL上）。

當前，復選框true或false值存儲在chrome.storage 。 存儲或獲取復選框已選中狀態沒有問題。

我的問題是：如何根據復選框的選中狀態將CSS注入特定頁面？

的manifest.json

"permissions": [
  "storage",
  "tabs",
  "management",
  "https://www.some-specific-website/home/*"
]

Answer 1

如果正確配置了清單，則內容腳本將僅在匹配的頁面上執行。 詳情請參閱此處： https ： //developer.chrome.com/extensions/content_scripts

至於注入CSS，取決於您要執行的操作。 您將需要從內容腳本中的存儲中讀取內容，以明顯了解復選框的狀態，如果找到，則需要注入。

您要注入的內容是否很小？ 如果是這樣，最好通過使用一些JavaScript來做到這一點，方法是在Dom中選擇所需的元素，然后使用要設置的屬性向它們添加一個類。 就其價值而言，添加類可能是更改某些元素的CSS而不是直接編輯其樣式的最有效方法。

如果它很大，您可以如上所述在選項卡上使用insertCSS方法。 您需要在清單文件中添加tabs權限（我認為它稱為activeTab或其他奇怪的東西）。 從那里，獲取當前選項卡，然后使用原始CSS代碼或更高級的CSS代碼調用insertCSS，該文件是對CSS文件的文件引用以及當前選項卡的ID（將其應用於其）。 請參閱此處以獲取更多信息： https : //developer.chrome.com/extensions/tabs#method-insertCSS

另外，這里的chrome擴展示例頁面中有一個包含相關示例的zip文件： https : //developer.chrome.com/extensions/examples/api/storage/stylizr.zip