Inject CSS with Chrome Developer Tool

Inject CSS with chrome developer tool?

There are multiple ways to do that, and they are also very easy.

---

First way, inspector-stylesheet:

Open Inspect Element (F12 Or Ctrl+ Shift+I)

Go to Elements tab (Ctrl+ Shift+ P and type show elements), if you are not already there, see the Styles tab, now see on right corner, there would be a + icon, click it (or long press that icon if it doesn't automatically add inspector-stylesheet), it will add selector of currently highlighted element, just next to the selector, there will a link/button inspector-stylesheet, click it, it will take you a window, where you can add styles.

---

Second way, Edit as HTML

Open Inspect Element (F12 Or Ctrl+ Shift+I)

Go to element panel (Ctrl+ Shift+ p and type show element panel).

Scroll to the head element right click on the element and choose Edit as HTML, go to the bottom of that element (Ctrl+ End), add your <style></style> element there add your style in that element, and hit Ctrl+ Enter.

---

Third way, Snippet:

Open Inspect Element (F12 Or Ctrl+ Shift+I)

Go to the Source tab, go to the Snippets tab, click on the + New snippet, name it whatever you want, and add this:

Create new snippet Ctrl+ Shift+ P type Create new snippet hit Enter , rename the snippet if you want to, and add this (edit the style) :

(function(){
    let style = `<style>
/*change your style here*/
body{
        display:none;
    }
</style>`;

document.head.insertAdjacentHTML("beforeend", style);
})();

Save it, run it (Ctrl+Enter).

You can also run the snippets by doing this: Ctrl+ p type ! it will show your saved snippets, choose the one you want to run.

To edit or see your snippets, Ctrl+ Shift+ P type show snippets.

---

In FireFox it's even easier:

Open Inspect Element (F12)

Go to Style Editor, click the + icon and you will be able to edit the style; You can also, import styles, just by clicking the icon next to the +.

Add a new CSS class in Chrome developer tool

On the Elements tab there's a styles tab which contains a small + button on the right side.

When you click here, you can add a whole new CSS class.

Once you've defined the new class, see Add a class to an element to learn how to apply it to an element. You could also just double-click the element in the DOM Tree on the Elements panel to add or edit the element's class attribute.

How to view css stylesheet injected by a Google Chrome extension using dev tools?

Looks like there's no way to do this if you inject the CSS via content_scripts. I filed a bug here: https://crbug.com/800070

When the extension is in your control, Paul Irish suggests using this code pattern in order to make your styles inspectable: https://github.com/lateral/chrome-extension-blogpost/compare/master...paulirish:master

For other people's extensions, as far as I can tell there's no way to view the source code of the injected stylesheets in DevTools, if you go the content_scripts route.

Fastest way to add a new blank stylesheet in Chrome's inspector developer tool (Inspector stylesheet)

I don't have one easy shortcut, but I can get you there a tiny bit faster:

1. F12 to open DevTools.
2. button at top of Styles-panel on Elements tab, to create inspector-stylesheet.
3. Doubleclick to open.

---

Once inspector-stylesheet is created, and I close it or close DevTools, how to find it again?

• If you've closed DevTools when the inspector-stylesheet was still open, just go to the Sources tab directly (in DevTools, topbar) and the inspector-stylesheet should still be open.
• If you've closed the inspector-stylesheet itself, then, while on the Sources tab, press Ctrl+P and type "inspector-stylesheet", usually after "in..." you will already see the inspector-stylesheet at the top of the suggestion-list of available files.
  
  And it should also still be visible at the top of the Styles-panel on the Elements tab, where you first created it.

Is it possible to implement a full css page into google dev tools?

You could inject a script using JavaScript. You could have the code run automatically with a something like TamperMonkey. GreaseMonkey for FireFox is similar and will give you many more examples. You could also use the script to remove any stylesheets on the page right before you inject the reference to yours.

Using Chrome Extension to inject CSS into the Document Inspector

I don't think Webkit allows you to inject CSS or Javascript into the developer tools. There is an experimental API for Chrome which allows you to add tabs and a few other things: http://code.google.com/chrome/extensions/trunk/experimental.devtools.html

Inject CSS conditionally via chrome extension options

If you have configured your manifest properly, then your content script will only execute on matched pages. See here for details: https://developer.chrome.com/extensions/content_scripts

As for injecting CSS, it depends on what you want to do. You'll want to read from storage in the content script to get the state of your check box obviously, and if found then you need to inject.

Is what you're trying to inject fairly small? If so, it is probably best to just do it with a bit of JavaScript by selecting the elements you need in the Dom and adding a class to them with the properties you want to set. For what it is worth, adding a class is probably the most efficient way to change the CSS of some element rather than directly editing its style.

If it is fairly large, you can use the insertCSS method on a tab as you've mentioned. You'll need to add the tabs permission (I think it is called activeTab or something strange) to your manifest file. From there, get the current tab then call insertCSS with either raw CSS code or better yet, a file reference to your CSS file along with the id of the current tab to on which to apply it. See here for more info: https://developer.chrome.com/extensions/tabs#method-insertCSS

Also, there's a zip file with relevant example in the chrome extension samples page here:
https://developer.chrome.com/extensions/examples/api/storage/stylizr.zip

---

Related Topics