Hello I'm new to chrome packaged apps.
How would I create a button image, that when clicked launches
a new chrome packaged app window displaying a local html page.
In your first html page, just add the button. Also, that page will need to reference a Javascript file to add the event handlers:
<button id="thebutton">Open a New Window</button>
<script src="script.js"></script>
Then you add an event handler to the button in script.js (or whatever you name your script page):
document.querySelector('#thebutton').addEventListener('click', function() {
chrome.app.window.create('new.html', {"width":300, "height": 200});
});
If you need for that window to be sandboxed (e.g., not use the default content security policy), you need to specify that the page is sandboxed in manifest.json:
"sandbox": {
"pages": ["new.html"]
}
When new.html is loaded, it will be loaded in its own origin which doesn't have access to the opening window or to the advanced API's. If you need the sandboxed page to do something with the advanced API's, you can use postMessage and receive messages to communicate with a window that's still in the CSP.
Related
I created a webpage with SAPUI5 that is hosted on the SAP Cloud Platform. This webpage is now in use inside an iframe as a chrome extension.
When the user is logged into the Cloud Platform everything works as intended. But if that is not the case, the server responds with the SAP Cloud Platform Login page, which is not rendered in the iframe (The html/js is loaded, as seen on the console). The Login page shows up normaly when opened in a popup for example.
My first thought was that they blocked viewing in iframes, but they didn't include such headers (X-Frame-Options) and as seen the code still gets loaded. I also did not find any attributes to allow the iframe to load after (what I assume is a redirect). Other pages work fine inside the iframe.
Manifest.json:
{
"name": "Test Extension",
"version": "0.1",
"description": "An Extension to test stuff",
"manifest_version": 2
}
index.html:
<html>
<body style="padding: 0; margin: 0;">
<iframe src="https://linkedinaddin-ae467d79e.dispatcher.hana.ondemand.com/" width="400" height="500"></iframe>
</body>
</html>
How do I get the SAP Login page to render correctly inside the iframe? Or are there any other solutions to show a webpage inside the chrome extension. I saw chrome webview in another solution but it seems those only work in chrome apps and not extensions.
Thank you for your help!
I have a web app in Google Apps Script and I need that when I have click in a Button, the browser tab closes. I tried with different solutions but it does not work as I require it.
This is my HTML code.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Demo Close tab</h1>
<p>When you click the button, you must close this tab.</p>
<button>Close</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
window.onload = function() {
$("button").click(function() {
// window.close();
// window.top.close();
// window.open("","_top","").close();
});
}
</script>
</body>
</html>
And this is my GS code
function doGet() {
var template = HtmlService.createTemplateFromFile("Index");
return template.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.addMetaTag("viewport", "width=device-width, initial-scale=1")
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
.setTitle("Demo Google Analytics");
}
As stated in the docs HTML Service: Restrictions:
The setSandboxMode method now has no effect when called.
Your Google Apps Script runs in an iframe by default, regardless of any attempts to change the sandbox mode. I strongly suspect the sandbox settings will prevent you accessing the parent window, but you might try window.parent.window.
According to Javascript Documention: Window.close()
This method is only allowed to be called for windows that were opened by a script using the window.open() method. If the window was not opened by a script, an error similar to this one appears in the console: Scripts may not close windows that were not opened by script.
Web Apps are usually standalone script projects that, as per the documentation on restrictions applied in the IFRAME sandbox mode (which is, as of 2021, the only mode available), has the following sandbox flags (corresponding to the sandbox attribute) set on the HTMLIFrameElement Web Apps are served in:
Flag
allow-same-origin
allow-forms
allow-scripts
allow-popups
allow-downloads
allow-modals
allow-popups-to-escape-sandbox
allow-top-navigation-by-user-activation
Note the last flag - this is the reason for being able to initiate navigation when a user clicks on an element but not when calling methods like window.top.close(), window.location.reload(), or window.location.replace(<url>).
This seemed to not be strictly enforced for bound script projects up until September 2021, but it is now. As of now, there are several open issues on the Issue Tracker reporting that the auto-closing Web App windows stopped working - please follow them if you want to get updates on whether or not Google will reconsider enforcing the flag:
https://issuetracker.google.com/issues/198071205
https://issuetracker.google.com/issues/198323022
https://issuetracker.google.com/issues/198073648 (status "Won't fix" but open for a feature-request)
Is there any way to tell if a script/asset is loaded asynchronously or loaded deferred from the Google Chrome Browser Network Tools tab?
Unfortunately, you can't see dependencies in the critical rendering path in the network tab of Google Chrome.
What you can do is look at the priority of requests (you might have to enable this tab in the network windows -> right click on the tabs). An async request should have a low priority (just like images which are loaded async). Chromes appears to do just that (https://bugs.chromium.org/p/chromium/issues/detail?id=408229), it's not super accurate, but might help you.
a script can be loaded inline in HTML or dynamically via a function call.
To know whether a script was inline or not:
Disable javascript (dev tools settings -> disable javascript)
Look for that script in the source code (right click -> view page source) of the page, if it's not there then it's loaded asynchronously by default.
If it's included in the source code then look for the async tag:
<script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script>
if the async attribute is present, then the script will be fetched in parallel to parsing and evaluated as soon as it is available.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async
I have a standalone frame-less Chrome app. I'm sending messages from another Chrome extension to it (Chrome app) which works. But I would like to be able (if it's possible) to launch the app using the extension. Because now I have to launch the app manually.
I've seen Google music "mini player" that you can launch from music.google.com. So I'm wondering if the same can be done using chrome extension.
I wouldn't need the Chrome extension if the Chrome app could read opened tabs or just URLs but since this is not possible one must use extension and message to app to achieve this.
just send msg to your app from extension when you want to open it (In my case, I'm opening app when injected element on page is clicked)
extension script:
var appID = "qwertzuiopasdghghjkhgjghj";
element.onclick = function () {
chrome.runtime.sendMessage(appID, {message: 'fireup'}, function(response){});
});
app background script:
chrome.runtime.onMessageExternal.addListener(function(request, sender, sendResponse) {
if (request.message == 'fireup') {
chrome.app.window.create("page.html",
{
//whatever
});
}
});
You can use chrome.management.launchApp method: https://developer.chrome.com/extensions/management#method-launchApp
To use it you need to add "management" permission to your extension manifest file
I want to create chrome web app that will open in own window like Google Keep extension for chrome.
I made chrome web store package, but how to open it in self window instead of chrome browser ??
Create a packaged app by
Using a manifest with { 'app': { 'background': '...' } ....
Add a chrome.app.runtime.onLaunched listener that calls chrome.app.window.create
See the hello-world sample.