CODEWITHSUNDEEP
javascriptgoogle-chrome-extension
Susantha
Susantha

Reputation: 41

changing page style sheet in chrome extension

i tried to make an extension that change the page style sheet. i change some style like background color but i can't change the whole style sheet

manifest.json file

{
  "name": "change stylesheet",
  "version": "1.0",
  "permissions": [
    "tabs", "http://*/*", "https://*/*"
  ],
  "browser_action": {
      "default_title": "Set this page's style",
      "default_icon": "icon.png",
      "popup": "popup.html"
  }
}

part where java script call in popup.htm

function click() {
  chrome.tabs.executeScript(null,
      {code:"document.getElementById('stylesheet').href = 'style1.css'"});
  window.close();
}

Upvotes: 4

Views: 4357

Answers (1)

Darin
Darin

Reputation: 2121

Susantha - you just need to include your css file in your manifest:

http://code.google.com/chrome/extensions/content_scripts.html

{
"name": "My extension",
 ...
  "content_scripts": [
{
  "matches": ["http://www.google.com/*"],
  "css": ["mystyles.css"],
  "js": ["jquery.js", "myscript.js"]
}
 ],
  ...
 }

You will need to override existing styles with !important and follow the precedents for styles as you normally would have to. If there is an inline style then you might need to rewrite it with js code.

Upvotes: 8

Related Questions