與注入/刪除CSS

Question

彈出一個Chrome擴展的瀏覽器操作我想問的方式來注入的CSS或通過瀏覽動作刪除注入的CSS彈出窗口Chrome擴展。我試圖通過幾個地方來看看如何去做，但我不明白他們的理想。

我想提出的擴展，它類似於"A browser action with a popup that changes the page color"但點擊DIV在popup.html加載或卸載創建CSS文件。

這是使用內容腳本我目前的工作（https://github.com/Zhekoay/Self-Custom-Dark-Theme），它直接插入CSS。現在我想讓它能夠加載或卸載，而不是一次加載所有。

Answer 1

鉻API不能刪除通過manifest.json的CSS注入。

注入就像demo extension做的代碼，但使用file參數與您的內容腳本的名稱，將與id等於chrome.runtime.id和href指向document.documentElement下添加或刪除（如果存在）一個link元素一個web accessible CSS文件。

1. 從manifest.json的
2. 刪除"content_scripts"添加"web_accessible_resources": ["*.css"]到的manifest.json
3. 在popup.js
4. 單擊處理程序添加一個單擊處理程序div：chrome.tabs.executeScript({file: 'content.js'});

5. 內容。 js：

   (function() { 
       var styleElement = document.getElementById(chrome.runtime.id); 
       if (styleElement) { 
       styleElement.remove(); 
       return; 
       } 
       var css = ({ 
       'www.youtube.com': 'app_yt_HoveredImg.css', 
       'www.messenger.com': 'fb_messenger_styles.css', 
       'www.google.com': 'google_styles.css', 
       'translate.google.com': 'google_styles.css', 
       'apis.google.com': 'google_styles.css', 
       })[location.hostname]; 
       if (!css) { 
       return; 
       } 
       styleElement = document.createElement('link'); 
       styleElement.id = chrome.runtime.id; 
       styleElement.rel = 'stylesheet'; 
       styleElement.href = chrome.runtime.getURL(css); 
       document.documentElement.appendChild(styleElement); 
   })(); 
   

注意，在這個工作流程，你只需要"permissions": ["activeTab"]而不是"tabs"：優點是安裝擴展時activeTab沒有要求的權限。