I'm developing a custom application that might need to use a proprietary low-level library, I'm looking into the Electron platform to see if it has entry points for extensions plugins that work as if they were native JS objects.
I've tried using Electron's <webview src="..." nodeintegration> tag, unfortunately the tag does not support transparencies when overlayed on top of each other so direct node integration was discarded. The second option is to use iframes and have the script inside the iframe call custom JS/native methods on a
custom object (think the window object).
I'm exploring the electron code base but I've just started and hoped that maybe someone more familiar with it could point me in the right direction, the ideal way would be for me to be able to create a shared library (be it linked dynamically or statically) and to be able to use the new methods on the JS code that runs as part of a web page rather than as part of Node.
Related
I have a web page I want that when I click capture button then it should capture the screen of the web page including google polymer elements and save it in root folder. I have tried html2canvas library but it is not working.
I think your best bet is to use a servers side browser-less application like PhantomJS (http://phantomjs.org/) that is built on the latest webkit. You can also use node to call PhantomJS, e.g. https://www.npmjs.com/package/url-to-screenshot
I don't think you will get anything working that is implemented on the frontend that is cross-browser compatible.
Or use a service like https://screenshotmachine.com/ that already implements server side webkit rendering engine, e.g. https://screenshotmachine.com/serve.php?img=polymer-tut-appspot-com-FULL-b521fb.png is a screenshot of the Polymer example https://polymer-tut.appspot.com.
Hope that helps
Its been a few years since I have worked on Chrome apps. I started messing around with making some simple examples to learn the new process. The problem is that I have found that using an <a> tag to change the html page that is loaded to another html page inside the packaged app will not work. I'm looking for different methods of changing the screen with retrieving user input (button click, link click. and so on). I have looked online and have found very little documentation about making chrome apps most examples show how to make a simple "Hello World" and how to publish it. Not many extensive tutorials beyond that. Just to clarify this app would be a real chrome app not a link to some site. all files would be packaged with the chrome application.
Chrome Apps are meant to be "single page apps", and cannot navigate links by design. <a> links should open in a regular browser window instead.
If you want to do "url routing" within your application to change views, you can just roll your own solution, but should probably use a framework to help you out instead.
Here are some examples:
Polymer
Angular
Ember
Meteor
Backbone
The list is extensive. There are likely many other stack overflow answers that compare each framework.
The DOM (Document Object Model) which represents the contents of a Chrome App window is initiated from an HTML file, but from that point on you can't change it by referencing any other file, which is what you're expecting navigation to do. (<a> elements that navigate to an external browser via a "target=_blank" attribute are perfectly OK.)
However, you are free to change the DOM from your JavaScript at runtime. If you like, set an event handler on the <a> element and change the DOM as you wish. If you want to change the DOM via HTML (not from a file), you might find the JavaScript method insertAdjacentHTML useful. Actually, you can get the HTML from a file, but you have to read that file yourself with the Chrome App file I/O API.
Advice in another answer to use a framework is, in my opinion, overkill. If you think of a Windows app, a Mac app, or any other kind of GUI-based app, you would never assume that you could just change the UI over to something completely different by referencing an HTML file. Think of a Chrome App as being similar to those technologies in that sense, and you'll be on the right track.
I have two HTML files: One acts as a template, supplying the navigation, sidebars, etc., and the other has the main content. I'm trying to figure out how best to insert the content into the template. I need persistent URLs, so my plan was to have the content page essentially replace itself with the template, plugging the text back into the resulting page. I'm really new to front-end programming and I'm suspicious that this may be an anti-pattern, so my first question is about whether I'm barking up the right tree. The problem seems universal, and I'm sure there must be a best practice, though I haven't yet seen it discussed. If this is an acceptable way to proceed, then what JavaScript function would allow me to access the HTML of two different pages at the same time?
[EDIT: It's a small page on GitHub]
Do not do this. At current implementation HTML is not designed to be template engine. You can use HTML import but it has not full support in browsers. (compatibility table).
Usually this problem can be solved with:
Use frontend framework. Libraries like angular.js or polymer.js (and so on) usually has support of importing HTML documents in different forms.
Build your application HTML. Task runners like grunt.js usually has plugin that includes HTML.
Use server side technologies to extend your HTML from base layouts
If your application have to be consisted from different HTMLs I recommend you to try polymer. It is polyfill for web components and designed to work in such way by default.
UPD:
About edit to your question. It seems like you just need template engine for HTML. You can google for it. I use nunjucks - javascript port of python's template engine jinja2. It is lightweight, simple and can be compiled right in browser.
Another way is to use special tools for building static web pages. You have mentioned that your page is blog build from simple HTML pages. Try to use pelican. It is the static websites (blogs) generator. It is simple and fast. You can build your HTML even on your local machine and just push your HTML pages to github.
Is there any solutions except Adobe Air?
I have heard that V8 kinda have something there.
Just don't have time for now, to write on another language whole app and then write 2x more code.
Maybe you could use jsc: Compiling JScript Code from the Command Line.
But you will have to replace browser-related objects by WinForms objects, which involves learning a new API, or use the .NET WebBrowser object (a browser widget showing only the content of a page, without bars except scrollbars) in a main window (Form object) and program it to load a URL to the page with your JS code.
Here is an excerpt from MSDN:
The WebBrowser control also lets you display content that you create in your application or you retrieve from a database or resource file. Use the DocumentText or DocumentStream property to get or set the contents of the current document as a string or data stream.
You can also manipulate the contents of a Web page through the Document property, which contains an HtmlDocument object that provides managed access to the HTML document object model (DOM) for the current page. This property is useful, when used in combination with the ObjectForScripting property, to implement two-way communication between your (Windows) application code and dynamic HTML (DHTML) code in a Web page, letting you combine Web-based controls and Windows Forms controls in a single user interface. You can use the Document property to call scripting code methods from your application(Windows code). Your scripting code can access your application through the window.external object, which is a built-in DOM object provided for host access, and which maps to the object that you specify for the ObjectForScripting property.
The WebBrowser control is a managed wrapper for the ActiveX WebBrowser control, and uses whichever version of the control is installed on the user's computer.
You can make a normal HTML file become a Windows App simply by changing the file's extension into ".hta"
Windows will treat your *.hta file like a winform application. This is called "html application" - HTA.
More documentations herer :
Html application
And of course, you can attach as much Javascript as you want in that HTA file, or even use external *.js file by doing like this :
<script src="your file.js"></script>
Well, your could try something like
Chromeless.
This way, you could keep your code, and it at least would kinda look like a desktop app.
http://www.adobe.com/products/air/
http://gears.google.com/
So far, i'd go with adobe air since it's portability and robustness (doesn't make it errorless, tho)
i have a sitation where i want to access HTML DOM object from within my application to update certain parts of web page through javascript commands at run time.
It is a local webpage opened in FireFox which would be accessed by my application, so that the final output is always shown at the webpage which is updated by appliation.
It would be great if you could give me some idea about how this can be accomplished.
I have similar requirement like the webmonkey extension of firefox but need to do it outside of browser from my application.
You can try QtWebKit from the Qt framework, it provides an OO set of classes to interact with webpages from basic actions to very complicated and advanced stuff. I believe you may find your answer there, a link is provided below...
Good Luck
see Here