Is it possible to style a chrome extension using some sort of custom stylesheet, without having to edit the extension?
I have tried using CSS editor extensions, such as StyleBot, and they do not work.
This question is the exact same as mine, but the only answer provided is no longer applicable, as Chrome 33 removed custom.css support, and as far as I can tell from reading the the Chromium issue about it, it hasn't been added back in.
So, is there currently a way to do this in Chrome?
Thanks!
Related
I've always used ff inspector to debug css and never had this issue before, I tried to check the css of this website https://www.duolingo.com (the issue occurs only when I'm logged in), but the inspector is not showing anything for any element on the webpage:
The inspector works fine on other websites though, not sure if the website developers intended to hide the css or not, but I found some strange css links seems to be using a proxy:
Is this some kind of new trick to hide CSS or is it a bug in firefox inspector? or is it something else?
I'm using Firefox version 45.0.1
I am pretty certain this is a known bug that has been fixed already.
I don't have an account on this website so I can't be sure, but we've had very similar problems in the recent past.
It could be either:
https://bugzilla.mozilla.org/show_bug.cgi?id=1255787
Which has been fixed in FF48 (it involved an inline stylesheet <style> which defined a sourcemap URL).
Or it could be:
https://bugzilla.mozilla.org/show_bug.cgi?id=1249888
Which has been fixed in FF47 and uplifted to FF46 too (it involved an incorrect CSS sourcemap URL).
You can verify this by tested again with these versions. If it still doesn't work, please feel free to file a new bug here: https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector with steps to reproduce and possibly, pasting the errors that may be present in the browser console (ctrl+shift+J).
In any case, this isn't a wanted behavior. In the rare cases where there are indeed no css rules to be shown on a given element, then the panel shows a message like "no valid element selected" or "no css rules found", I can't remember exactly which one. If the panel is just empty, then that's most definitely a bug.
I have seen this in Firefox 49 when inspecting my own site on the development server. When I went to the Style Editor tab the list was huge and the spinner keeps spinning.
I went to the dev tools settings and disabled "show original sources". The Style Editor tab now shows two files and I'm able to see the CSS rules (though not my less rules obviously).
I've found this already filed as https://bugzilla.mozilla.org/show_bug.cgi?id=1097834
I want to quickly see how the fallback-fonts is working for a website by excluding one or more specific fonts. Is this possible in Chrome? How?
Have searched for it with no luck.
It's quite easy with the Chrome Inspector. You just have to find the HTML lines which include your custom font (Or in your CSS) and delete it.
Of course you can just modifiy your css directly in Chrome to see what happens.
UPDATE: Delete directly the font in the sources tab in you Chrome Inspector.
I came across this thread a few days ago looking to get rid of the stark white background in the DevTools window. One thing led to another and I started in on adding rules for many more elements using the base CSS file (chrome-devtools://devtools/devTools.css) as a guide.
The file being modified can be found in the following locations:
Mac: ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
PC: C:UsersYourUsernameAppDataLocalGoogleChromeUser DataDefaultUser StyleSheetsCustom.css
Ubuntu (Chromium): ~/.config/chromium/Default/User StyleSheets/Custom.css
Midway through, I started running into a problem when modifying rules with very common selectors. The first two I ran into were #main and #toolbar. When adding rules for the more common selectors, if a web page is also using these same selectors (ie. google search), then the rules are applying to those pages or sites as well.
I understand why this is happening. My question is...
Is there a way to only target the DevTools window in Chrome via this Custom.css file without affecting any other domain?
I've tried using the #moz-document domain () and #moz-document url-prefix ()declarations but can't figure it out...
I'm too far in to give up now, so I'm hoping someone can assist.
Here is a screenshot of my progress so far:
Ok, so after digging around, I noticed I actually missed the notice right smack dab at the top of the original article page:
Since publishing this article the Chrome Team have added a unique ID
to the container of the Chrome Dev Tools. The ID is #-webkit-web-inspector(Trac Reference)
So, the fix to my above post is to add body#-webkit-web-inspector to all of your selectors and it works perfect, thus only targeting chromes DevTools window. Also, very important... to those wanting to create a more complete theme, it’s HIGHLY RECOMMENDED to do it via "inspecting the inspector". More info on how to do this can be found here: How do you inspect the web inspector in chrome?
See screenshot below of "inspecting the inspector":
I consistently run into the need to clean up css files and strip unused css elements. I am aware that google chrome has the capability to display all the unused css elements on a page but there are times (like a project I am working on right now) where the original designer left hundreds of unused elements within this file.
So, my question here is -- does anyone know of a way to customize the google chrome developer console to export a list of all used CSS elements. Or, is anyone aware of an existing google chrome plugin which provides this functionality?
I realize there is a firefox plugin which provides these capabilities but I would love to find a similar solution for google chrome.
Thanks
You have two ways customizing the Google Chrome Web Inspector:
Web Inspector Options
Chrome Extensions
http://code.google.com/chrome/extensions/experimental.devtools.console.html
http://code.google.com/chrome/extensions/experimental.devtools.audits.html
You could create an extension that does what you need.
This question already has answers here:
Are unused CSS images downloaded?
(7 answers)
Closed 10 years ago.
I'm concerned about load times on home page of our site.
My home page uses a default stylesheet with ALL the styles for the whole site. I have background image references for elements on other pages (i.e. not used on the homepage). Do these background-image graphics get loaded anyways when a user visits the homepage of the site?
Or are the only css background image that get loaded are the ones that are directly used on that page?
One way to find out: try a debugging proxy.
The answers may differ for different browsers.
The images won't load unless they are actually used on the page; as far as all the styles being loaded on the home page goes -- this is actually a reasonably good thing. Once that single CSS file is in the viewer's cache, its there and doesn't have to be downloaded for subsequent pages.
Someone else's post just reminded me I'm basing my info off of firebug; browsers other then FF may very well download those unused BG images, but I really doubt it.
Building on Erik's answer, you could use tools like Google's Page Speed addon for Firefox (which I believe is built on top of firebug) and see what is actually slowing down your website when loading.
You can find more info about the tool and some other tips here: http://code.google.com/speed/page-speed/docs/using.html