Chrome擴展程序：如何刪除注入後的內容腳本CSS？

我需要刪除從content_scripts（manifest.json中）注入的CSS文件styles.cssChrome擴展程序：如何刪除注入後的內容腳本CSS？

"content_scripts": [{ 
    "matches": ["*://*.youtube.com/*"], 
    "css": ["styles.css"], 
    "js": ["jquery-3.1.1.min.js", "content.js"] 
}],

一些解釋，因爲我想在我的擴展做。

起初styles.css被加載，它改變了頁面上的一些代碼。有用。

然後，用戶想要點擊按鈕並關閉擴展。有用。

但是然後styles.css必須被刪除。它不起作用。

並且在用戶想要打開分機並且需要再次添加styles.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);

它沒有很好地工作，因爲當擴展入門然後頁面會在幾毫秒內閃爍。

來源

2016-11-23 Lestoroer

問題已關閉。我很沮喪。謝謝。 – Lestoroer

「問題已關閉」是否意味着您不再在意這個主題，因爲您不再在意（除了您找到解決方案之外的其他原因），還是您找到了問題的解決方案或其他內容？如果你發現問題的解決方案，那麼你應該回答這個問題。 [鼓勵自我回答的問題]（http://stackoverflow.com/help/self-answer）。 – Makyen

所以。是。我稍後再介紹解決方案:) – Lestoroer

我看了一下，發現了這個問題的解決方案。

的manifest.json

manifest.json 

    "content_scripts": [{ 
    "matches": ["*://*.youtube.com/*"], 
    "js": ["jquery-3.1.1.min.js", "content.js"], 
    "run_at" : "document_start" // It runs content.js first until page loads 
    }], 

    "web_accessible_resources": ["styles.css"] // It provides styles.css for use in content.js

和content.js

function loadCSS(file) { 
    var link = document.createElement("link"); 
    link.href = chrome.extension.getURL('css/' + file + '.css'); 
    link.id = file; 
    link.type = "text/css"; 
    link.rel = "stylesheet"; 
    document.getElementsByTagName("html")[0].appendChild(link); 
} 

function unloadCSS(file) { 
    var cssNode = document.getElementById(file); 
    cssNode && cssNode.parentNode.removeChild(cssNode); 
}

content.js僅加載file.css（styles.css的將其提供），以html標籤直到頁面加載

來源

2016-11-24 09:48:51 Lestoroer

所以「不建議像X這樣的代碼」和你的代碼之間唯一真正的區別是'run_at'？ – Xan

是的。起初，我用''run_at'：「document_end」'（這是默認值）運行代碼併發生閃爍。然後我發現了''run_at'：'document_start''，並且所有的作品都很好。只是我不知道我最近遇到了谷歌API。 – Lestoroer

我更新了這個問題，以更好地反映這一點，我將upvote你的答案。 – Xan

Chrome擴展程序：如何刪除注入後的內容腳本CSS？

回答

相關問題