Manifest CSS not loading

Question

我的Chrome擴展程序中的CSS由於某種原因未加載。我做了瀏覽器告訴我要做的所有事情，解決這個問題，解決這個問題，做到了，但仍然無法正常工作。

{ 
    "manifest_version": 2, 

    "name": "Emoticons", 
    "description": "A collection of emoticons for Social Media, directly accessible in your browser!", 
    "version": "1.0", 
    "content_scripts": [{ 
     "js": [ 
       "js/jquery.min.js", 
       "js/jquery-ui.min.js", 
       "js/load.js" 
       ], 
     "css": [ 
       "css/emoticon.css", 
       "css/style.css" 
       ], 
     "run_at": "document_end", 
     "matches": ["http://*/"] 
    }], 
    "browser_action": { 
    "default_icon": "images/icon.png", 
    "default_popup": "popup.html" 
    } 
} 

我的代碼有什麼問題？

Answer 1

你確定它沒有加載你指定的match pattern實際上應該工作？

您的匹配模式，"http://*/"匹配，比如說http://example.com/，但不匹配http://example.com/some/path或https://example.com/。

捕捉「任何http或https頁面」的匹配模式將爲"*://*/*"。請注意，在這種情況下，第一個通配符具體爲http或https。

甚至還有一個更簡單的匹配模式來捕獲每個支持的頁面，"<all_urls>"。

Answer 2

也許問題匹配模式，看到@Xan答案的話......

在情況下，如果JS加載和css不遵循以下建議...

可能您的CSS正在加載但未應用的情況。 嘗試將!important添加到每個css規則。

另一種選擇是通過內容腳本注入CSS，做下面的代碼添加到load.js：在控制檯

var style = document.createElement('link'); 
style.rel = 'stylesheet'; 
style.type = 'text/css'; 
style.href = chrome.extension.getURL('css/emoticon.css'); 
(document.head||document.documentElement).appendChild(style); 
style.href = chrome.extension.getURL('css/style.css'); 
(document.head||document.documentElement).appendChild(style);