如何在Chrome擴展中使用內容腳本文件注入CSS？

我試圖注入從JavaScript我的CSS將其注入爲內容腳本：如何在Chrome擴展中使用內容腳本文件注入CSS？

"content_scripts": [ 
    { 
     "matches": ["http://www.google.com/*"], 
     "js": ["script.js"] 
    } 
],

我發現similar question約注射CSS，但我同時使用來自accepted answer代碼中遇到的一個問題。這裏是我的script.js內容：

var link = document.createElement("link"); 
link.href = chrome.extension.getURL("style.css"); 
link.type = "text/css"; 
link.rel = "stylesheet"; 
document.getElementsByTagName("head")[0].appendChild(link);

我加載一些頁面出現在控制檯此消息後：鉻擴展的

否認負荷：//phkgaaiaakklogbhkdnpjncedlbamani/fix.css。資源必須按照的順序列在web_accessible_resources清單中，以便通過擴展之外的頁面加載。

有什麼辦法解決這個問題嗎？或者，也許，從該JavaScript文件注入CSS的其他方法？

注：我不能直接從清單包含樣式表。

來源

2012-07-19 Roman

您可以添加到清單的權限字段;見web_accessible_resources。所以，你想補充一點的清單：

, "web_accessible_resources": [ 
     "fix.css" 
    ]

又見"Programmatic injection"。和insertCSS()。

對於大多數應用，忘記所有的createElement代碼和公正的CSS文件添加到清單：

"content_scripts": [ 
    { 
     "matches": ["http://www.google.com/*"], 
     "css":  ["fix.css"], 
     "js":   ["script.js"] 
    } 
],

，雖然我知道你不想做，在這個確切的實例。

來源

2012-07-19 04:50:29

但是我需要在JavaScript中做一些與此樣式表相關的事情，所以對我來說這不是一個解決方案。 – Roman 2012-07-19 05:34:30

實際上，問題中顯示的代碼至少在最新的Chrome *發行版*（20）上不會生成該錯誤。缺少某些東西。「fix.css」是一個實際的文件嗎？它位於哪裏？鏈接到完整的擴展代碼。你使用的是什麼版本的Chrome？ ...添加到清單的權限添加應該無視工作（第一個鏈接）。你嘗試過嗎？ – 2012-07-19 05:35:20

以下是源代碼 - [https://github.com/Tsukanov/CleanTube/tree/activation-feature](https://github.com/Tsukanov/CleanTube/tree/activation-feature）。我在版本20和22中測試了它，得到了相同的結果。我不確定要在清單中添加什麼。 – Roman 2012-07-19 05:50:08

如何在Chrome擴展中使用內容腳本文件注入CSS？

回答

相關問題