How to inject CSS using content script file in Chrome extension?

by

You could add to the manifest’s permissions field; See web_accessible_resources. So you would add this to the manifest:

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

See also “Programmatic injection”. and insertCSS().

For most applications, forget all that createElement code and just add the CSS file to the manifest:

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

although I understand that you don’t want to do that in this exact instance.

More Related Contents:

  1. Use a content script to access the page context variables and functions
  2. Chrome extension code vs Content scripts vs Injected scripts
  3. Chrome extension adding external javascript to current page’s html
  4. Access variables and functions defined in page context using a content script
  5. How to get a content script to load AFTER a page’s Javascript has executed?
  6. Chrome content scripts aren’t working: DOMContentLoaded listener does not execute
  7. Chrome extension: Communication between content script and background.html
  8. How to to initialize keyboard event with given char/keycode in a Chrome extension?
  9. “Cannot read property of undefined” when using chrome.tabs or other chrome API in content script
  10. Getting around X-Frame-Options DENY in a Chrome extension?
  11. AngularJS changes URLs to “unsafe:” in extension page
  12. window.localStorage vs chrome.storage.local
  13. Taking screenshot using javascript for chrome extensions
  14. Chrome Extension how to send data from content script to popup.html
  15. Injecting JS functions into the page from a Greasemonkey script on Chrome
  16. UserScripts & Greasemonkey: calling a website’s JavaScript functions
  17. How to retrieve the element where a contextmenu has been executed
  18. Chrome extension: How to remove orphaned script after chrom extension update
  19. Loading external javascript in google chrome extension
  20. How to keep Google Chrome Extension popup open?
  21. Inspecting WebSocket frames in an undetectable way
  22. Getting unique ClientID from chrome extension?
  23. Content-Security-Policy error in google chrome extension making
  24. How to detect the installed Chrome version?
  25. Why is document.execCommand(“paste”) not working in Google Chrome?
  26. Cross-Origin XMLHttpRequest in chrome extensions
  27. How to develop Chrome extension for Gmail?
  28. monitoring history.pushstate from a chrome extension
  29. Retrieving which tabs are open in Chrome?
  30. Link to chrome:// url from a webpage

Leave a Comment