How to inject CSS into webpage through Chrome extension?

by

You can have to add an extra line in your manifest file:

"content_scripts": [
    {
      "matches": ["http://test-website.com/*"], 
      "js": ["js/content-script.js"],
      "css" : ["yourcss.css"]
    }
],

The CSS file as defined in "css": ["..."]will be added to every page which matches the location as mentioned in matches.

If you’re developing a Chrome extension, make sure that you have a look at these pages:

  1. Developer’s guide

More Related Contents:

  1. How can I get the current Crome URL?
  2. Chrome extension that enables chatting with users on same page [closed]
  3. Persistent Service Worker in Chrome Extension
  4. How to wait until an element exists?
  5. How to import ES6 modules in content script for Chrome Extension
  6. JSFiddle code not working in my own page
  7. How to use jQuery in chrome extension?
  8. Chrome Extension: Port error: Could not establish connection. Receiving end does not exist.
  9. Unchecked runtime.lastError while running tabs.executeScript?
  10. Contexts and methods for communication between the browser action, background scripts, and content scripts of chrome extensions?
  11. How do I auto-reload a Chrome extension I’m developing?
  12. Chrome Extension: Make it run every page load
  13. Chrome Extension: Get Page Variables in Content Script
  14. Upload File as a Form Data through chrome extension
  15. Cannot access cssRules from local css file in Chrome 64
  16. Check if user has a third party Chrome extension installed
  17. Chrome extension: Inject JS before page load
  18. How to properly handle chrome extension updates from content scripts
  19. Does extension messaging like chrome.runtime.sendMessage internally use JSON.stringify?
  20. chrome.storage.local.get and set [duplicate]
  21. Can I prevent an alert() with a Google Chrome Extension
  22. How can I save information locally in my chrome extension?
  23. How to get the currently opened tab’s URL in my page action popup?
  24. How to get errors stack trace in Chrome extension content script?
  25. How do I send an HTTP request from a Chrome extension?
  26. Sending message to background script
  27. Pass a variable from content script to popup
  28. Prevent window.open from focusing
  29. Associate a custom user agent to a specific Google Chrome page/tab
  30. How to develop Chrome extension for Gmail?

Leave a Comment