I have noticed that on local extension pages, Chrome will inject some styles of its own that are different on different operating systems. For example, here's the injected styles on Chrome Beta on Windows, for the uBlock origin dashboard (chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/dashboard.html#settings.html):
The images of the same page for Chrome Dev on Linux and Brave browser on macOS are linked.
Currently I am migrating my extension page from a local HTML to a website. Chrome does not inject these styles on the website, so it looks different than my local extension page.
Thus, I want to ask how I can find the full source of this injected stylesheet, so that I can manually implement those styles on my website page.
Font-family and size are injected in all extension pages: extension_fonts.css.
The font size differs from a usual html page, which may be a bug in Chromium.
A big extension.css is injected in a ManifestV2 extension options page declared with chrome_style key in manifest.json: "options_ui": {"chrome_style": true, "page": "options.html"}.
ManifestV3 doesn't allow it.
Related
I'm having some issue with a django app and it's CSS file refreshing. Basically I can see that the changes I make in my file are identified and copied in the root folder of my website, however when I open up the web browser that change is not being displayed at all:
I am using Firefox as a browser however this issue happens also on Chromium browser
If you have setup everything well in your settings.py file then your best option is to disable caching form your developer panel.
I had similar issues when I make changes in css and they are not updated when i refresh my browser. This is because the browser is keeping a cache of the css file and its not being updated for some reason.
So according to this post,you can disable caching
I have an application developed in .net MVC and using "SourceSansPro" font.
Imported google font into css as. This is first statement of css file
#import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);
When I run this on local, font are loading correctly but after publishing on Azure,looks like they are not loading.
After inspecting the font on Azure app, font is getting applied but the size is bigger than what it looks on local however all css classes and properties applied are same.
What Tried -
Tried by embedding font in solution directory as well, removed cdn and used embedded fonts. Made required changes for MIME types in web config as below
Tried by disabling bundling
Can you please guide, where am I doing wrong?
We wanted to use cdn itself and not embedded font
Is it possible to serve a CSS file from Apps Script to a web page via #import and, if so, how?
Here is what I have in my Apps Script project:
function doGet() {
return ContentService.createTextOutput("#topbar {display: none;}").setMimeType(ContentService.MimeType.TEXT);
}
And here is what I have on my web page:
<style>
#import url("//script.google.com/macros/s/AKfycbzQ6UcF-f8RdARqSmLLnIztDUF-TocDcc2ZWKnXLDZfZKImcrD1/exec");
</style>
The script is published and can be accessed anonymously. It does in fact serve the text when viewed in the browser.
However, the styles on the page do not appear to take effect, nor are they even registered upon the elements which they target (#topbar), as verified using dev. tools/inspector. In other words, it's not a case of being overridden by another rule.
Chrome displays the following notice in console:
Resource interpreted as Stylesheet but transferred with MIME type text/plain: "https://script.googleusercontent.com/a/macros/xxxxxxxxx.com/echo?user_content_key=EwpjT6XHtgCE9TjjZiVvMu_D8SAtW6MRfu_EAMLFwMsGtfIOxw0i_lZeakV7d_fVAoQhFdRzoggswuridc7V9N-e1iQg-Agnm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_nRPgeZU6HP-ROivF5cq8Yy1TNiq6oZe8h0lmODcuY_1nzLek9VwvQZkF54xdAL-niFUG-amClvBrAUVm6NjncJhe06LYrp7Rujisx4EZAUceDIgHEbXEHQ&lib=Mp-3UT9miDqSgBd2rh0D-kk71SnnNhlD3".
Note that:
Apps Script is limited in the MIME types it allows, and I don't believe 'text/css' is one of them
Chrome does still seem to know to interpret it as a CSS file, so I don't think MIME type is the problem.
I must use #import due to client-side restrictions for the project.
I noticed here that returning a blob offers additional MIME types, but I'm unsure if that's an applicable path to solving this problem.
When I make an edit to the stylesheet of my site, the change appears in Chrome (I load the CSS file in the browser, so I can see the edit is there). When I open the CSS file in Firefox, the edit is not there. I understand browsers will render code differently, but how is it possible that two browsers can open the same CSS file and display two different sets of code?
I tried:
deleting Firefox's cache and restarting the program
deleting the old stylesheet via FTP and uploading an edited one
I checked if the site had a CDN that was perhaps serving the old
file, but the site has no CDN.
Here is picture in chrome:
I just woder what does user stylesheet mean here. The case is that I am 100% sure that these classes does not exists in my stylesheets (it was before). I thought It comes from cache but it remains even after cache is cleared. Any ideas? Thanks.
First of all, read this definition of what a user style sheet is. It is an extra stylesheet to help you (the user) browse the web. Hence if you prefer certain CSS settings over what the web page designer intended, you can overrule those settings with your own.
This user stylesheet that you found, may therefore just be a local CSS file on your pc.
Therefore we need to know: where did you find that .CSS file?
If the same file is in this location:
PC: C:UsersYourUsernameAppDataLocalGoogleChromeUser DataDefaultUser StyleSheetsCustom.css
MAC: ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
Then the answer is:
The file above is, as it sounds, a CSS file that you can modify and add your own custom styles to, to change the look and feel of your Google Chrome Web Inspector.
Which means that with that specific stylesheet you can change the look of your Google Chrome Web Inspector.
So it has nothing to do with the website you are inspecting, only with how your web inspector looks (it is built with HTML, CSS and JavaScript).
You can read about it here. (Google Chrome version 33 does not feature custom stylesheets)
It could also very well be the case that Google Chrome implements some other user stylesheet that is stored somewhere else on your pc (but I wouldn't know where exactly).
Note that the inspector also shows user agent stylesheets which is the default stylesheet that your browser implements. You can read about those in this question: What is user agent stylesheet
It is possible that the http server itself has cached the previous version of the file and is serving it.
Reload and check the headers in the Network tab, so you can get the full picture. Or if you are using development environment, you can restart the server - just to be sure.