changing page style sheet in chrome extension

Question

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();
}

Answer 1

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.