I understand this might just be impossible but when you're making JS available for easier debugging in devtools via the helpful //# sourceURL comment, I'd also like to map it to its respective local file, for easy editing.
Clarification on #// sourceURL=dynamicScript.js:
Note: Notice the "//# sourceURL=dynamicScript.js" line at the end of dynamicScript.js file. This technique gives a name to a script created with eval, and will be discussed in more detail in the Source Maps section. Breakpoints can be set in dynamic JavaScript only if it has a user supplied name.
The sourced file now exists in Sources under "no-domain", and is unable to map to my workspace's dynamicScript.js file.
You can map your local web app directory to a server path, so that you can live edit the JS file that evaluates some code, but there is no way to map the dynamically generated named script to a file on the system as far as I'm aware.
If you use eval to execute code from a string, adding //# sourceURL=dynamicScript.js' simply tells Chrome to simulate that script being an actual file, so that you can debug etc. The file doesn't actually exist, it's in memory. The dynamic 'file' cannot appear as part of a local workspace because it simply doesn't exist on the system.
Related
Please read carefully before marking as dupe.
I want to read a javascript file on frontend. The javascript file is obviously being used as a script on the webpage. I want to read that javascript file as text, and verify if correct version of it is being loaded in the browser. From different chunks of text in the js file, I can identify what version is actually being used in the end user's browser. The js file is main.js which is generated by angular build.
I know we can do something like creating a global variable for version or some mature version management. But currently, on production site, that will mean a new release, which is couple of months from now. Only option I have right now is html/js page, which can be directly served from production site, without waiting for new release.
So my question is, is it possible we can read a javascript file as text in hmtl/js code in the browser.
an idea can be :
use fetch api to get a container that can be use to async load the script
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
use text() method which return a promise to get text content
fetch('http://localhost:8100/scripts.js').then((res) => res.text()).then(scriptContent => {
// scriptContent contain the content of your script
// if (scriptContent.includes('version : 1.1.1')
console.log(scriptContent);
});
this is absolutely not an efficient way, but since you want to work without any new version release or working with a version management system
here is the thing
assume file's checksum (md5 sha125 or anything) of V1.0 equals X and you will calculate before the coding part.
if checksum(X) != X{
location.reload()
}
would help for a security features too since it's an important project.
another way of controlling this situation is changing the main.js file's name if it is possible.
According to Mozilla's pdfjs plugin, I can view my pdfs by passing a query param to viewer.html as shown below:
http://localhost/MyProject/viewer.html/?file=file.pdf
This is working fine. But I have some different kind of requirement. The requirement in my project is that I need to have tabs like feature on a single page. Each tab holds a pdf file.
So, I am thinking to make all the code in the viewer.js to a big function. So that I can use it as constructor to render each pdf file. Something like this:
var firstPdf = new paintPdf({file: 'myfile.pdf'});
Anyway, I decided to do the above changes later when I am able to integrate pdfjs's viewer functionality successfully in my project.
Summary of my project:
Single page application
All templates are being maintained in a single file within an Object of name - templates
To do so, first of all, I copied all the html inside of the body tag of viewer.html and appended as new property to the templates object. and then I copied all necessary and dependency files from the example to my project's folder and loaded them dynamically. The files which I included are:
pdf.js
pdf.worker.js
viewer.js
l10n.js
viewer.css - I am not loading this file dynamically.
After loading of files, I am rendering the viewer.html's template using lodash. Still, I can't able to see the rendered pdf in my project. I suspect this might be because everything is happening dynamically. (but I am not sure because everything is being rendered in sequence as it should be)
Btw, I have added the default pdf with name compressed.tracemonkey-pldi-09.pdf adjacent to index.html file. What could I be missing?
Firefox and chrome doesn't throw any error.
Note: I might be doing in wrong way. Suggesting me to solve in right directions would be appreciable.
Some important points while modifying viewer.js.
It is recommended to build your own viewer.js instead of modifying the available viewer.js file which is actually just for demo purpose.
You can create your own viewer.js file by visiting each js files available here.
If you have only small things to modify in the existing demo viewer.js, then
Mention the exact path for pdf.worker.js file inside your viewer.js.
This file will start rendering pdf on DomContentLoaded event. If you are planning to render the pdf file dynamically later, then you should comment this event register and call the following function whenever necessary.
webViewerLoad();
I hope this will help someone.
I want to create a Chrome extension that contains a text file with static data (a dictionary of English words) and I want the extension to be able to parse that file. I've only managed to find FileReader class, but it looks like it's made for reading user-selected files, while in my case I always want to read the same exact file included in extension's package. As a workaround, I can convert the file to a Javascript array of strings declared in some .js file included in the manifest, but in that case the whole contents would be loaded into memory at once, while what I need is to read the data line by line. Is there any way to do this?
You can go the FileReader route, since you can obtain the Entry of your package directory with chrome.runtime.getPackageDirectoryEntry().
However, an easier way is to just make a XHR to your file using chrome.runtime.getURL() with a relative path. The first way is useful when you want to list files, though.
I am trying to create a file in the extension using this code:
Components.utils.import("resource://gre/modules/FileUtils.jsm");
var file = new FileUtils.File("C:\\Windows\\hello.txt");
But nothing happens.The file doesn't appear
Any ideas?
Your file var is an object that represents a file at the location you specified. Creating this file object does not create a file directly (you might instead choose to read from the file, for example).
You can now use the nsIFile API to manipulate the file object. For example, you can create a file at that location:
file.create(file.NORMAL_FILE_TYPE, parseInt("0600", 8));
Note that Windows UAC can cause file access to fail. You might want to try:
file.isWriteable();
but ultimately you might find that it's not possible to write to directories that UAC is protecting so you can instead choose a non-protected location, perhaps using the special directory definitions explained on this useful MDN page: https://developer.mozilla.org/en-US/docs/Code_snippets/File_I_O
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How do I force the refresh of javascript files in a browser?
My application in ASP.NET MVC based and javascript files are included in .csHtml file.
I require this so that the user do not have to do a [Ctrl+F5] or manually clear cache and the most recent version of javascript file is loaded everytime in the browser.
I appreciate if some examples can be provided.
Primary technique suggested is to use a dummy paramater while including the file.
Also I do not what to change the parameter manually every time I modify a js file. Need some examples if this can be done automatically.
EDIT 1:
Please provide solution to this with ASP.NET MVC prospective.
Put a version number in the filename for your JS files (like jQuery does). Then, whenever you rev the JS files, you bump the version and change the HTML files that include it.
The jQuery file naming example:
jquery-1.8.3.js
jquery-1.9.0.js
This lets you set very long caching on your server for the JS files themselves which really helps with performance on your site. But, any time you rev the JS files, the viewer gets the new JS files immediately because the newly named files are pulled by the new HTML file because they aren't in the browser cache.
You want to use Bundling and Minification. Depending on your version of MVC, the implementation is slightly different. In the newest version, it is used by default.
Bundling and Minification will combine and minify all your scripts (and styles sheets) into one file (or multiple, depending on how you use it) and serve them up with a unique parameter. Any time a file changes in that particular bundle (and thus the user would require to download the new files) the parameter automatically changes.
For MVC3, you'll need to install Microsoft Web Optimization.
Then in your global.ascx, you'd do something like this and call it from Application_Start:
private static void SetupBundling()
{
var jsBundle = new Bundle("~/Scripts/js", typeof(JsMinify));
jsBundle.AddDirectory("~/Scripts/", "*.js", false);
jsBundle.AddDirectory("~/Scripts/anothr-good-folder/", "*.js", false);
BundleTable.Bundles.Add(jsBundle);
var randomBundle = new Bundle("~/Scripts/random", typeof(JsMinify));
randomBundle.AddFile("~/Scripts/random/main.js");
randomBundle.AddFile("~/Scripts/random/cool.js");
BundleTable.Bundles.Add(randomBundle);
var cssBundle = new Bundle("~/Content/css", typeof(CssMinify));
cssBundle.AddDirectory("~/Content/", "*.css", false);
BundleTable.Bundles.Add(cssBundle);
}
So that first bundle will bundle every .js file in your ~/Scripts folder. In your head file you can reference it like:
<script src="#Microsoft.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")" type="text/javascript"></script>
And it will be rendered like:
<script src="/Scripts/js?v=-2573834892993289" type="text/javascript"></script>
And any time one of your .js files change (or .css), so will the parameter.
Similar implementation for the CSS bundle, and also if you want to reference the randomBundle only on certain pages.
You can do cache-busting by attaching a random hash or number URL parameter after each javascript file URL like so:
http://www.bestsiteonearth.yes/cool_javascript.js?cache_buster=2187sasas1289012890aohkjaiosa0990
Since that number is different each time the page is loaded the URL will not be cached. More info here. Tutorial gives PHP examples, but if you know how to create a hash or random number in any language & can attach it to a URL you are good to go.
Personally I use PHP, but the way I do this is to search the output buffer for static files, such as images, scripts and stylesheets (and audio, video, whatever), then retrieve their modification time from the filesystem and append it as /t=TIMESTAMP. I then use .htaccess to strip the timestamp off and get the original filename. This is preferred over query strings because many clients will not cache files with query strings, and it's also preferred over versioning because it updates automatically simply by modifying the file.