I am currently beginning to look at creating Chrome Apps and have followed a few of the basic tutorials now. I am happy with the basics so far except for one thing.
All the sample code and tutorials only seem to have one html file in the package, but what if I want to take a web app I have that uses more than one HTML page and turn it into a Chrome App?
How to I get the Chrome App to change from the index.html to another html page when I want to show some other html? I have tried using the standard html anchor tag along with the target set to _blank or _self, but it will only open a URL on the internet in a browser rather than changing the page in my application.
I am not from a web development background, so am I missing something basic to do this?
The simplest version of what Vincent Scheib said:
index.html
...
<div id="screen1" style="display:block">
...
</div>
<div id="screen2" style="display:none">
...
</div>
main.js
...
// A navigational event happens:
document.getElementById("screen1").style.display = "none";
document.getElementById("screen2").style.display = "block";
...
Packaged apps intentionally do not support navigation. Apps are not in a browser, there is no concept of forward, back, or reload. Applications which do require the concept of navigation, should use a user interface framework that supports that functionality. E.g. by manipulating the DOM, using CSS, or using iframes to animate and control visibility of components of your app.
Related
I have a page that shows merchant calendar
https://staggingv2.tappio.me/c/sami/Tappio-Meeting
Now I want to build functionality that allow merchant to embed this page on their own website using script. The Same feature is provided by calendly some like this. and I want to implement this feature as well in my website.
I have very less knowledge about webpack config. I have go through this but there is not much guidance in this answer. I know I have to build this page to public directory but how i will achieve this just for single page?
Can anyone provide me pathway to achieve this functionality?
<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-
url="https://calendly.com/s-m-sami125" style="min-
width:320px;height:630px;"></div>
<script type="text/javascript"
src="https://assets.calendly.com/assets/external/widget.js"
async></script>
<!-- Calendly inline widget end -->
This is the page which is embedded in external website just by above script.
https://calendly.com/s-m-sami125/test?month=2022-12
You can see that in sandbox
https://codesandbox.io/s/eloquent-chaplygin-lxssxo?file=/index.html
I think this is not a webpack question. At first glance most developers would recommend iFrame. You can simply generate the calendar on your NextJs server without any menu and frame, then share the JS code with your merchant to embend it. If you choose this way you may facing problems with design (maybe the target page have different design than your page) and Cross-Origin Resource Sharing (CORS) issues. CORS can be solved if you have admin rights on your server (I assume you have) but If you allow access to it for every source this should be a security problem.
I think providing an API is a better solution. You can make API in NextJs easily and your merchants display data as they want in any design. Calling an API is easy from any framework nowdays.
I want to write a browser for some purpose using electron and I choose the <webview> tag to emulate the browser page.
It has a toolbar which contains back forward refresh buttons.
I bind the new window event, in the handler I just create a new <webview> tag for that url.
However, I found that there are some limits.
1. window.opener in new <webview> is null
2. <form> with method="POST" can't be handled correctly, because there are no solutions to get postData from new-window event.(But there is probably a PR for this: https://github.com/electron/electron/pull/19703)
Perhaps I'm wrong from the start. I shouldn't use electron for this purpose? But I don't know much about c#/c++...
I do not recommend to use <webview> at the moment as its usage is strongly discouraged by the Electron team. The recommendation is to use a BrowserView instead (see documentation).
Using Electron to build a web browser should work fine, there is actually a similar project called Wexond. You could check it out as a starting point for your own browser.
I've been looking into Azure Media Services and I've been able to create a program that copies my video blob from my website storage to my media service storage account and create an asset/asset file from it. Then I've got it encoding for adaptive streaming.
The issue I'm having is on playback. I'm wanting to use the Azure Media Player as it shows great promise in detecting the environment and providing the correctly encoded video for streaming.
When I use the iframe approach (found here) it works, but I feel I'm losing some ability to customize -- also it's breaking in Safari on Mac.
<iframe class="video-preview" src="//aka.ms/azuremediaplayeriframe?url=[MANIFEST URL HERE]&autoplay=false" name="azuremediaplayer" allowfullscreen></iframe>
The other method (found here) utilizes the <video> tag along with css & js files put in the header.
Header code:
<link href="//amp.azure.net/libs/amp/1.1.0/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="//amp.azure.net/libs/amp/1.1.0/azuremediaplayer.min.js"></script>
<script>
amp.options.flashSS.swf = "//amp.azure.net/libs/amp/1.1.0/techs/StrobeMediaPlayback.2.0.swf"
amp.options.flashSS.plugin = "//amp.azure.net/libs/amp/1.1.0/techs/MSAdaptiveStreamingPlugin-osmf2.0.swf"
amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/1.1.0/techs/SmoothStreamingPlayer.xap"
</script>
Video code:
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered video-preview" controls data-setup='{"nativeControlsForTouch": false}'>
<source src="[MANIFEST URL HERE]" type="application/vnd.ms-sstr+xml" />
<p class="amp-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
The <data-setup> attribute is supposed to activate the <video> tag and turn it into an Azure Media Player, but that's not happening for me.
So, my question is: what method is preferred/standard? I know that's difficult to pin down as it's still very young and is always changing, but just wanted to see what everyone else's experiences were.
The iframe approach which is on the demo website is currently a proof of concept (see the warning on the page "Note: this embed code is for demo purposes only. Do not use in production"). It is meant to serve as a way to show that the player can work in an iframe. This will expand over time, but the flexibility of the iframe currently is limited to how you want to design the parameters.
In general, the approach you take depends on what you are trying to achieve (meaning depending on the level of flexibility you require). In general, the current recommended approach is to use the JS and CSS method directly on your page.
Now, for the issues you are having, it would be great to understand what you are seeing.
1.For the iframe issue on Safari on Mac, what are you seeing? I just tried the following on OS X Yosemite and Safari and it seems to be working fine
<iframe src="//aka.ms/azuremediaplayeriframe?url=%2F%2Famssamples.streaming.mediaservices.windows.net%2F91492735-c523-432b-ba01-faba6c2206a2%2FAzureMediaServicesPromo.ism%2Fmanifest&autoplay=false" name="azuremediaplayer" scrolling="no" frameborder="no" align="center" height="280px" width="500px" allowfullscreen></iframe>
2. Are you able to view the samples provided in the documentation? Here is the list of samples and specifically you should look at the basic videotag sample. You will need to make sure an source is added to the video tag for the auto-detect to work. If you are still
If you are still having issues, please reach out to ampinfo#microsoft.com
I want a nodejs server to host an angular single page application, using angular route module.
Does the route need to get the different views from the server every time I navigate to a different view?
Is there any way to send a bundle of htmls to the client?
Am I missing something really basic?
There are some sample applications built with Angular, you should read them before starting with something like this.
To answer your question: It depends on you.
For example the "webmail-lite" client is a single page application (maybe not Angular but it's the same logic) and they transmit all template "views" (html snippets) as inline:
<script id="Mail_LayoutSidePane_Toolbar" type="text/html">
<div class="toolbar">
<span class="resizer_top" data-bind="event: { 'dblclick': resizeDblClick}"></span>
</div>
</script>
So you just take care of the data you want to display and create your server-side views to deliver the main index.html file and your data/RESTful/JSON-Views.
A more "clean" way of inherit templates is the use of require.js.
OOPS...
ng-app was directed to the wrong module.
Therefore the route wasn't able to get the view.
I would like to modify my extension's popup dynamically (at run-time). And want to specify a custom popup HTML file that's loaded from my server.
In Firefox, I can easily accomplish this with XUL overlays which I can specify at run-time.
And document.loadOverlay() does allow me to specify a 'remote' URL for the overlay.
Is the same possible in Chrome?
I've been playing with chrome.browserAction.setPopup( details ) API, but it seems that the details.popup param must specify a local file, and not a remote URL.
I have answered this exact same question on the Chromium-Extensions mailinglist.
There is no API to load external popups but you can do that with plain JavaScript. What you could do (I have done that in the past):
Use an iframe + extension messaging within the popup. The iframe
points to some external url not hosted in the extension.
Use templates (jQuery templates example), load those template files to
your background page, and just use them to construct your popup.
Download the html contents using XHR and load them within the popup
by constructing the DOM.
I usually use the template approach, but I use the popup iframe approach when I want to manage the entire popup in the server side so I don't have to push updates to the extension gallery. I am not a fan of downloading the HTML contents, templating seems safer.
Hope this helped!