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

我有一個Chrome擴展，其中包含幾個用於啓用或禁用某些CSS樣式的複選框（在一個特定的匹配URL上）。通過Chrome擴展選項有條件地注入CSS

當前複選框true或false值存儲在chrome.storage。存儲或檢索複選框選中狀態沒有問題。

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

的manifest.json

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

來源

2016-01-29 captainrad

嘗試添加'style'元素來記錄？ – guest271314

當我只希望它發生在匹配的網址上時，我該怎麼做？ – captainrad

_「目前複選框的真或假值存儲在chrome.storage中，存儲或撤回複選框選中狀態沒有問題。」_在複選框的onchange事件中檢查'location.href'？ – guest271314

如果你已經正確配置清單，那麼你的內容腳本將只匹配的網頁執行。詳情請看這裏：https://developer.chrome.com/extensions/content_scripts

至於注入CSS，它取決於你想要做什麼。您需要從內容腳本的存儲中讀取以明確獲取複選框的狀態，如果找到，則需要注入。

是你想要注入相當小？如果是這樣，最好只用一點JavaScript來完成，方法是在Dom中選擇你需要的元素，然後用你想要設置的屬性向它們添加一個類。對於什麼是值得的，添加一個類可能是改變某些元素的CSS的最有效的方法，而不是直接編輯它的樣式。

如果它相當大，您可以像上面提到的那樣在選項卡上使用insertCSS方法。您需要將標籤權限（我認爲它稱爲activeTab或其他奇怪的東西）添加到您的清單文件中。從那裏，獲取當前選項卡，然後使用原始CSS代碼或更好的方式調用insertCSS，將CSS文件的文件引用連同當前選項卡的ID一起應用於其上。在這裏看到更多的信息：https://developer.chrome.com/extensions/tabs#method-insertCSS

此外，還有在這裏的Chrome擴展樣本頁面相關的例子一個zip文件： https://developer.chrome.com/extensions/examples/api/storage/stylizr.zip

來源

2016-01-30 05:28:38 eholder0

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

回答

相關問題