The build process for my CSS take a really long time. I want to make an extension that lets me edit my stylesheets in the browser and persist them. It will show the diff between the edited version and the original version. I can copy the diff and apply them to my source CSS (Sass).
I think I will have to download the CSS, let the user modify it in their editor of choice, and redirect requests for the original CSS to the modified CSS. I got the CSS to save using chrome.downloads.download, but it's saved in the downloads folder. I don't think the extension can access the downloads folder. One way is to have the user manually save the file in the extension folder, but that's too troublesome.
Is there a way to let the Chrome extension show the edited version of a file?
Related
So I have the following situation:
There is an HTML file in some directory on my PC. If I open this HTML file in a browser, I want to click a button with which I can write or change a file in the same directory.
So there is no server whatsoever, just an HTML file opened in a browser.
Is this possible?
Calling a python script from a button would also work for me.
I just have to be able to detect a change in the directory when the button is clicked.
TL;DR
Yes it is. but there is additional system like git. and you need to implement using javascript.
Not a solution
I am sorry about I can not provide exact solution about your question. but I can give you keywords. I assume you do not know about git.
I recommend implement local git system for your local directory. because there is lot of changes your files. (like edit single character or add new files) and some of files you do not want detected (that's mentioned in .gitignore)
and there is suitable project for you isomorphic-git
. and If you heard about git first, also check github guide.
I want to know if installing jquery/bootstrap/font-awesome can be done automatically, instead of installing it via npm and then manually dragging the code to my css/js/fonts folder?
Is there no program that can update and automatically drag them to the correct folder?
I know people are saying that you can just manually drag the javascript file to the correct location, but bootstrap for example consists of more than a single javascript file. It includes font and css files.
If I were to include them in this manner:
\web
-\css
--\app
---\main.css
--\font-awesome
---\font-awesome.min.css
-\fonts
etc.
Then it wouldn't work, because font-awesome expects it's fonts to be one folder aside.
JQuery, Bootstrap and Fontawesome are not softwares or applications that you install in a webpage. They are just CSS and Javascript files. So these are like any other javascript or CSS file you may have written from scratch for your webpage. Except that they are well maintained, highly optimized and made for a particular application. (Like Bootstrap primary purpose is to provide a framework for making webpages responsive.)
To include them to a webpage all you have to do is tell the HTML file to use those files. And this is done by linking them to the HTML using the <script> tag and its src* attribute. (*W3schools link. Hehe).
Now in src attribute you may provide a URL to a location on the web containing the file or you may provide a relative local path to a location in your server or local machine containing the file. Yes, you can manually drag the files into your css/js folder and just include the files using that path. No Im not aware of any softwares to automate the process. But you need only place the file in one location for an entire webpage and its sub pages to access it. So its not a very intensive process.
As for why CDN's host such files for public access, an insight is given here : How cloudfare provides free service. And security, well, they are pretty darn secure, it is literally their job to provide secure access to the files they host. And why people use CDN in the first place is because this (in short performance).
Update:
As for how to include files in your HTML, it goes like this (Bootstrap example) :
<link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="static/bootstrap/js/bootstrap.min.js"></script>
You need to provide the path to the required CSS and JS files. In the case of Bootstrap these two are the only ones you need to include to get full functionality of the library.
I think it is not a good idea to use local files instead of CDNs until you are not working offline.
Here you can read about CDNs vs Local Files:
https://halfelf.org/2015/cdn-vs-local/
Multiple files on CDN vs. one file locally
https://www.sitepoint.com/7-reasons-to-use-a-cdn/
Although there is one another link that is just opposite:
7 Reasons NOT to use a Content Delivery Network
Nevertheless if you want to use the files locally you can follow the instructions below:
Move at the cdn link in your project
Copy the link from src or href and open it in your browser.
Save the file locally and give the reference of the file in your project.
I'm a big fan of source maps for javascript and SASS; however, I don't want to load source maps into production for a couple of reasons: the original source code is available and it's not a good use of bandwidth.
But, sometimes, the need for debugging in production arises (we've all seen production-only bugs on the front-end).
Is there a way for me to specify a source map after the fact? For example, I could have a source map available locally or behind a VPN-locked server, or even in a folder that's not visible to the user. I'm fine with doing it at run time or specifying a setting and having to reload the page. (actually if I could persist that setting that'd be even better).
You can right-click on a minified source file and select "Add Source Map". Then paste in the URL of the map file.
If your mappings file doesn't include the original file contents alongside the mappings make sure the original file paths are accessible to Chrome.
I'm working on an application that needs to download the source of a web page from a link, with all the internal files, like images, css, javascript.
After, I will need to open this html in a webview, in offline mode, that's why I need to download everything from the page.
I'd download the images using JSOUP, but I haven't ideia how to link them into the downloaded html.
Could you give me some examples, or starting points where to look to start?
Thanks in advance
Essentially, what you'll need to do (and what my app mentioned below does) is go over all the references links to additional additional assets / images / scripts and so on, download them, and then change the HTML document to point to the local downloaded copy. Something like this, with Jsoup:
Find all the img elements on the page,
Get the location / url of the image file from the src attribute of the img elements (with .attr("abs:src:)),
Download all of those images to a local directory
Change each of the image elements src attribute values to point to the location of the downloaded image file, relative to where the main HTML file will be stored, eg with .attr("src", "assets/imagefilename.png"").
Do this for all other assets required by the page, eg. images, CSS, scripts, html5 video, and others. I also did some regex on the CSS (both linked and inline) to extract, download, and rewrite things like background image references and in the css. Webpages also have other linked things like favicons or RSS feeds which you might want too.
Save your Jsoup document (with the modified URLs pointing to your downloaded versions of the assets) to file, by calling .toString() on it and saving the result to a file.
You can then open the local HTML file in webview, and, assuming you have done everything right, it will show with all images and assets, even offline.
I actually wrote an Android app which does exactly this: save a complete HTML file and all of the CSS / images / other assets to a local file / directory, using Jsoup.
See https://github.com/JonasCz/SaveForOffline/ for the source, specifically SaveService.java for the actual HTML page saving / downloading code.
Beware that it's GPL licensed, so you have to comply with the GPL license if you use (parts of) it.
Also beware that it does a lot of things, and is quite messy as a result, (there's also no comments or documentation either...) but it may help you.
You can do it with Jsoup. IMO, it's a lot of work. On the other, you can consider Crawler4j.
There is a tutorial on their website. Have look to the example for crawling images.
I want to be able to show PDF files within my Chrome app using PDF.js but the documentation is non-existent. I've been unable to find any simple examples or tutorials that show the code to load a PDF from a relative URL, show the page, and navigate through the PDF. They have very complex examples where 95% of the code does other things and it's very difficult to parse these and find the relevant functions. I would like to:
Include the relevant code in my app (is this the "pdf.js" created by "node make generic" and nothing else? Or do i need to include other JS files as well?)
Be able to show PDF files that are inside my myapp.crx file
Does pdf.js require "LocalStorage"? Will localStorage continue to be allowed in Chrome extensions/apps or is it deprecated?
Can someone tell me if #2 is possible and how to find some example code or documentation on the proper classes/functions to call and files to include/build?
node make generic outputs to the build/generic directory. This directory contains two subdirectories, "build" and "web".
"build" contains "pdf.js", which is the actual PDF engine.
"web" contains a viewer, similar to the one at http://mozilla.github.io/pdf.js/web/viewer.html.
After copying both of those previous directories to your app, you should be able to load the PDF file using chrome.extensi/web/viewer.html?file=path%2Fto%3Ffile.pdf
PDF.js does not require localStorage.It's used if available for persisting settings such as scroll position, but if unavailable, PDF.just continues to work without it.
There is one significant issue though: PDF.js loads the localization files using synchronous XMLHttpRequest. This is not allowed in a Chrome app. You could solve this issue by serializing all files in the locales, put it in a single JavaScript file, load this in viewer.html, and simplify l10n.js to read the translations from the file I just described.
Just to clarify: normally you should be able to access a file baked into your CRX by providing a relative or absolute path to it within the CRX's internal directory structure, e.g.:
'myfiles/pdfs/example.pdf'
With PDF.js, I guess that's what "path-to-file.pdf" should be in Rob's answer above, verbatim.