2016-06-24 83 views
0

我有這樣的代碼的manifest.json:如何切換css樣式谷歌瀏覽器擴展(清單)

{ 
    "name": "Simple Css Modification", 
    "description": "Simple Css Modification", 
    "version": "0.1", 
    "browser_action": { 
    "default_icon": "icon.png" 
    }, 
    "content_scripts": [ 
    { 
    "matches": ["*://localhost/*"], 
    "css": ["style.css"] 
    } 
    ], 
"manifest_version": 2 
} 

的造型工作正常,就像在style.css中。

我沒有任何類型的背景.js文件或擴展文件夾中的任何js文件。 所以,我的問題是,如何通過點擊圖標來切換「style.css」文件? 我知道有https://developer.chrome.com/extensions/browserAction,但我不知道如何正確實施它。 謝謝。

回答

1

這裏是一個非常簡單的JS另外,應該讓您的基本功能:

manifest.json中,你可以添加一個JavaScript文件類似toggleCss.js

"content_scripts": [ 
    { 
    "matches": ["*://localhost/*"], 
    "css": ["style.css"], 
    "js": ["toggleCss.js"] 
    } 
], 

你也想爲browser_action圖標和標題添加一些配置(按照您鏈接的指南,忽略default_popup)。

toggleCss.js,添加對瀏覽器操作圖標上單擊處理程序,並簡單地切換頁面的body元素自定義類:

chrome.browserAction.onClicked.addListener(function(){ 
    document.body.classList.toggle('customCssClass'); 
}); 

然後基地所有的自定義的CSS與某一類的機構。假設你希望所有spans是紅色:

body.customCssClass span { 
    color: red; 
} 

根據您的目標,它可能是更好的性能,直接在你想用JavaScript來影響元素切換類,但使用body可以讓你保持你的邏輯在CSS ,如果那是你喜歡的。