I use a website which has a very high response time. Most of the time is taken to load a page with its javascript and css files.
I want to write a Google Chrome extension which can save/cache all the js files for a really long time.
I know JS on its own would not provide me this feature. Does google chrome have an api to do the same?
Are there any other options ?
It doesn't sound like a good idea
Do you expect people to install this extension, for the sole purpose of visiting your site? I visit hundreds of sites regularly, should I install hundreds of extensions?
Will you also make an extension for Firefox / Opéra / Safari / whatever browser I like?
If the webserver correctly places the HTTP headers, the browser (Chrome and all others) will cache all resources correctly.
See How can I improve loading times on a static HTML site?
Edit: Now that I better understand your need, what you can do is create an extension that
is applied on the site in question
removes the script/css loading, for instance $('head>stylesheet').remove()
injects the same script/css with a local copy, and optionally improves the loading of script with $(document).ready(main_function) (rather than <body.onload="main_function()">)
Related
I have a ReactJS app hosted in S3 and using Cloudflare as DNS & CDN.
I have a huge issue, a lot of visitors have old version of the application stored in their browser cache (index.html only). I have configured advanced cache control in the newest version, but it cannot be accessed because older version is shown instead.
Static file (CSS, JS) versioning is done using create-react-app, but I have discovered that index.html file is the only cached one.
What should I do now?
How to purge visitors cache now?
PS: I have purged Cloudflare cache already and setup rule to bypass cache.
Unfortunately there is no such solution for this.
The only way is to wait until users cache will empty (expire).
It is technicaly impossible to clear users cache from external resource (JS script etc.), due to security reasons.
Also if it will be possible, there is no way how to tell users to download latest JS (including cache purging code), because they have old version of index.html (including link to those .js files).
You are stack and the only option is to wait.
A better approach would be, whenever your build changes, change the JS link so that the browser downloads the new version from the server, no matter the user's or the server's caching policy.
For example, the way Stack Exchange does it is, whenever the build changes, the HTML goes from something like:
<script src="https://cdn.sstatic.net/Js/stub.en.js?v=1bac371ac78f"></script>
to
<script src="https://cdn.sstatic.net/Js/stub.en.js?v=f83b2f654"></script>
Whenever there's a new build, you can randomize the parameter in the query string in the HTML, and still only have the single (most recent) built .js on your server.
I have several web resources that are displayed on forms in Microsoft Dynamics. The web resources are html files that include JavaScript/CSS files. When I update the JavaScript files, I am seeing that the latest changes are not getting pulled to end user computers on their next use of the form. I believe this is because the previous version of the web resource has been cached on their machine.
According to this SO question, the solution would be to add a version to the script tag. However, according to the comments on the question, this solution does not work on Chrome and is considered a hack. I have also read here that Dynamics should automatically handle caching when web resources are updated, but does not do so reliably (which is my experience).
How can I force end user computers to get the latest version of my code on their next use of the form when I push out updates?
If you are only changing the files for development (ie. Once they are finished they won't change), then most browsers will allow you to disable the cache. In Chrome, this can be done as long as developer tools are open and you click the "disable cache" button in the network tab.
If they are going to change for the client with each request, then you can generate a random ID to be sent with the file (eg example.com/script.js?182hdh2). To allow this, just put some js in your html file (not in an external script) to import all the other files.
Is it possible to force caching of certain Javascript Library files (ie react.min.js, etc.) when navigating between pages of a website that isn't a SPA?
Trying to look at the feasibility of a more componentized structure while not going full on SPA. The website I'm working on oftentimes has people visit a single page and then leave, but in cases where they do stick around, I don't want to have to have them reload each and every library on page load.
Background You Should Understand
There are literally thousands of articles on the web about this topic but here is a very good summary from Make Us Of's Everything You Need to Know About the Browser Cache.
The browser cache is a temporary storage location on your computer for files downloaded by your browser to display websites. Files that are cached locally include any documents that make up a website, such as html files, CSS style sheets, JavaScript scripts, as well as graphic images and other multimedia content.
When you revisit a website, the browser checks which content was updated in the meantime and only downloads updated files or what is not already stored in the cache. This reduces bandwidth usage on both the user and server side and allows the page to load faster. Hence, the cache is especially useful when you have a slow or limited Internet connection.
TL;DR
I don't know if your really looking for a way to force the browser to cache your files or if you just misunderstood how the cache works. In general the browser the visitor is using is the one that makes that decision and handles everything for you. If it sees that a resource is needed that was already accessed in the past it wont request it again, it'll just use its cache. So no, your libraries will not get re-loaded over and over. Just once.
Now if you really do need to force the browser to cache your files take a look at the answer(s) to Caching a jquery ajax response in JavaScript/browser. That should get you on a good path to a solution.
I have created a chrome extension which is quite big. It relies on external frameworks as well as custom code. The extension manipulates the DOM and my fear is that it would really slow chrome down for some users especially if it is loaded on every tab.
Questions
Are chrome extensions loaded per tab?
Is there an upper or suggested limit to how big your extension should be?
Extensions downloaded by the Chrome browser upon install are subsequently run off of the local disk in order to speed up performance. If a new version of the extension is pushed online, it will be automatically downloaded in the background to any users who have the extension installed.
Answer to the second one I don`t think so.
I can only answer the first question:
chrome extension code might be injected to web page using content script, you need to specify which host you want to inject script to.
So it is not a question of will chrome extension be loaded per tab, you need to specify whether you want your extension to load per tab.
You can request the extension to load only in the web sites that you want it to load.
see content script here
I found the some strange <script/> tags on a site:
<script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/document_iterator.js"></script>
<script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/find_proxy.js"></script>
...
I haven't been able to find much information on this, but I highly doubt this is actually related to Google Chrome since this site in particular is still using <table>s for layout, and the source in question was retrieved with curl not a graphical web browser.
So,
What on earth is this?
What is chrome-extension://
Why is it using lifbcibllhkdhoafpjfnlhfpfgnpldfl as a directory name
Why is it pretending to be valid URL to a javascript file?
Why would I need find_proxy or document_iterator
Solved. As far as I know...
chrixian was right, It seems that only on this and a few select other pages, someone had re-saved them from Chrome's source-view with the Skype extension installed.
Thanks everyone for all your help, +1's for all! enjoy!
That is actually Skype Click to Call chrome extension.
Manage and view it using this link
chrome://extensions/?id=lifbcibllhkdhoafpjfnlhfpfgnpldfl
If you are using cURL to get the page, you're getting the HTML as it exists on the server--so I think a safe assumption would be: the author of the page initially saved the page from Chrome, he had an extension installed that inserted these script tages and lastly he didn't remove the script tags for one reason or another before putting the page on the server.
This is added by chrome as the page loads, to inject the extension's Javascript code into the page, so it can access the HTML document.
The Skype extension causes it by inserting all kinds of junk in webpages that you visit.
Do you have the Skype browser extension installed for Chrome?
Just disable the extension.
Chrome, like Firefox, provides developers with an easy API to extend the functionality of the web browser without needing to actually download and build the browser to do so.
They also provide a robust delivery system. In Google's case, it's the Google Chrome Web Store.
Extensions are installed locally on your computer, and use long strings as directory names to reduce the risk of collisions with another extension. In other words, if you and I both named our extensions "mycoolextension", then there would be a problem if a person tried to install your extension and my extension. The long string helps prevent collisions such as this.
The chrome-extension:// protocol is used by the browser to make requests to these local resources. Chrome extensions are developed using HTML5, JavaScript, and CSS, along with an API exposed to allow the local JavaScript to perform actions it would not normally be able to do on the Internet.
When you see these in the Chrome developer tools, it's just the extension doing it's thing, whatever that may be.
If you're seeing these, then you likely installed some extensions from the Chrome Web Store. To view them, go to the Tools menu and select "Extensions". This will show you a list of all installed Chrome extensions and apps.
To learn more about extension development, see the Getting Started Tutorial.
Also, as someone else mentioned, you're using the Skype Call Extension. However, an app using that directory name doesn't appear in the first page of the search results. It might be worth doing some more research to make sure you got that extension from a legitimate source, whether that be Skype or the Chrome Web Store.
If you're seeing it in Chrome developer tools for every request you make, it means it has access to all your websites, which could be benign, like if they're just making phone numbers clickable, or it could be malicious, if it's scraping your bank account info and shipping it off to some third party server. :)
It's a Chrome extension, and chrome-extension:// is a URL for extensions to address their contents via Javascript.
lifbcibllhkdhoafpjfnlhfpfgnpldfl is the unique identifier for the extension. I can't find it with a search, but apparently it might be Skype.
It's not pretending... it is a valid URL. The Javascript file is located in the extension. If you were to look on your harddrive you'd probably find that very file in the extensions folder.
The functions its calling probably are some sort of detection used by the extension to see if it needs to enable itself.
See this for some additional information:
Checking if user has a certain extension installed