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.
Related
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.
I recently got a bunch of errors from the mobile google bot saying my site is not mobile friendly, and I determined that it is because it is not correctly loading the .css file.
I see that the bundled css is at the link https://www.make.toys/f8e6e67664ba048af3f1ae3b45e6f925a2c16bfe.css?meteor_css_resource=true
which I can load in a browser, but when I have any robot service try to load it it just returns
.meteor-css-not-found-error { width: 0px;}
I am using prerender.io which may be related, but I tried to have it ignore the .css file which doesn't seem to change anything.
Is there a way to make sure that Mobile Google bot can read my css file?
Occasionally on my websites, I notice an external file won't be loaded. If I rename it and point to the new name it works fine. The old name refuses to work ever again.
Usually this happens with images, but today it happened to a css file. It happens spontaneously and unpredictably. When it happens to images they won't load by themselves in a browser window either. The css will load by itself, but won't be loaded by the page linking to it.
Here are 2 pages which are exactly the same, except they link to 2 differently named css files. The css files are identical, except for their names.
working - http://internetfind.com.au/test2.html
not-working - http://internetfind.com.au/test1.html
The web server is Apache.
Why does this happen and how can I prevent it?
i see on test1 the css file is not loaded as text/css but text/html. I also notice that you are running 2 different domains both running Apache. any chance you have 2 different .htaccess files? I am just speculating here as I dont have all the information but my guess would be the root directory running the test1 domain has a htaccess file where the MIME type are not defined right.
here is a link to a sample .htaccess file that comes with the html5 boilerplate distro. https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess
Another error is that Mordernizr is not defined which probably means that you have not linked the mordernizr library.
My Firefox console reports this:
The stylesheet http://www.agedcarefind.com.au/styles/styles-church.css was not loaded because its MIME type, "text/html", is not "text/css".
This suggests that your server isn't configured correctly and is serving the CSS with the wrong mimetype.
I can confirm the Firefox is requesting the file correctly, and it's being delivered - just not actioned.
test1.html is looking for this CSS
<link href="http://www.agedcarefind.com.au/styles/styles-church.css" type="text/css" rel="stylesheet">
This CSS file is ending with
#prev{position:absolute;z-index:101;height:100%;…
Somwthing is wrong with the file, try to edit it and it should work fine
e.g:
#prev{position:absolute;z-index:101;height:100%;}}
First of all, incorrect content-type for css files Resource interpreted as Stylesheet but transferred with MIME type text/html
Second - Uncaught ReferenceError: Modernizr is not defined
Content-type affects visualization of styles. May be you have some front-end server that changes content-type. Or your files are returned by server-side script - not enough details to answer clearly.
Based on the content of .css files I would say that you have some css compressor (removes white-spaces, new lines, reducing the size of .css file) running on server and may be it affects the content-type header.
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.
I'm developing a Chrome extension that has an options page. And I am willing to style this page same as Chrome options page is styled. I found that there is a file
chrome://resources/css/widgets.css
that holds this style (it is listed in "Developer Tools > Sources"). However, if try to load it in my page either directly from HTML
<link rel="stylesheet" href="chrome://resources/css/widgets.css" type="text/css">
or from CSS
#import url("chrome://resources/css/widgets.css");
then get this error printed in the console:
"Not allowed to load local resource: chrome://resources/css/widgets.css
It looks like I'm missing some permissions in my manifest.json, but did not find anything suitable on the developer's pages (notice it lists "chrome://favicon/", but that's it).
Anyone knows a solution?
P.S. Yes, I have copied this file into my extension's folder, and I got what I want, but the smart and proper way using this file (IMHO) is loading it directly from Chrome resources.
Short answer: No, you can't access chrome://resources... from an extension.
First, it's blocked on purpose, thus why you see "Not allowed to load local resource." Second, you really shouldn't rely on Chrome's resources, which can change in any version.