Just starting out with node webkit and I'm simply loading a website through an iframe to start...(I know, dirty but gets the job done with 2 hands and a bit of time).
<iframe src="http://somewebsite.com"></iframe>
The thing is, I have Google login for the site, which creates a pop up on the website. For some reason, it doesn't in node-webkit and I can't find any doc about enabling popups...
The code I'm using for the Google login is the default one they give us on the site:
https://developers.google.com/accounts/docs/OAuth2Login
I'm currently not setting anything exciting in the node-webkit configuration:
"window": {
"toolbar": true,
"width": 1024,
"height": 768,
"min_width": 300,
"min_height": 300,
"position": "center",
"resizable": true,
"show_in_taskbar": true,
"icon": "www/resources/img/icon.png"
},
So my question is, how can I enable popups on node-webkit from an iframe to get the Google OAuth working?
Thanks in advance for your help.
I had the same issue and managed to fix it by authorizing the node context to remote sites.
Simply add the node-remote configuration item to your package.json file. (But be warned that this can cause some libraries to load differently as they will detect the change in context).
{
node-remote : "*" // Or the src url of your iframe
}
Google login should be working fine after that.
Sicne this has been posted "node-remote" has change slightly. Here is an example:
"node-remote": "*://*",
Direct Links:
Notes about changes from v0.12 to v0.13 - http://docs.nwjs.io/en/latest/For%20Users/Migration/From%200.12%20to%200.13/
Formatting of node-remote
Related
I'm working on a chrome extension and it involves a small overlay on sites with an icon of the product/brand. Last week, I rendered this fine. My content script is a simple React.js app that mounts into a newly created div on any arbitrary page and creates a <img> element:
<img className="image" src={chrome.runtime.getURL(logo)} />
This worked great and it required an entry in the manifest:
"web_accessible_resources": [
{
"resources": [
"/*.png",
],
"matches": []
}
],
However, I came back to the project this week and the icon no longer displays. No changes to code or manifest over the weekend. All I can think of is a chrome update introduced a bug.
The console displays this:
Denying load of chrome-extension://gnncmcgealbfkmmiahajhhlhpgfldijh/ccffc3aeb870eaff711b.png. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
I wondered if * support was removed so I added the filename explicitly:
"resources": [
"ccffc3aeb870eaff711b.png",
"/ccffc3aeb870eaff711b.png"
],
Both with and without a / because there are no docs for this manifest yet for some reason.
This didn't work either.
The only documentation for this is here: https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#web-accessible-resources but it claims most of the fields are unused.
This definitely worked last week though, I even have a screenshot (though I cannot share publicly due to NDA reasons) so you'll all just have to trust me on that one!
Does anyone know of any additional manifest configuration required to get this working again? Chrome documentation seems to be lagging behind. Is this a bug or just a lack of documentation or feedback from the extension engine or browser?
Thanks!
I have implemented the iFrameResizer plugin here with the following settings:
$('#iframeResizer').iFrameResize({
log : true,
scrolling : true,
enablePublicMethods : true, // Enable methods within iFrame hosted page
heightCalculationMethod : 'lowestElement'
});
and the iframeSizer.contentWindow.min.js has been added to the iframe content window - I can see that the scroll bars are working which tells me the iFrame Resizer plugin has been implemented correctly - but the height is not resizing correctly??
Here are the console results
I thought perhaps maybe the problem could be from the iFrame content being hosted on a secure server????
If anybody is able to offer some advice or suggestions I'd really appreciate it.
You need to set the checkOrigin option.
https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/parent_page/options.md#checkorigin
The simplest Google Chrome apps seem to be those that just act as a bookmark or shortcut to a Web site. They have a manifest.json that is something like this:
{
"manifest_version": 2,
"version": "0.1",
"short_name": "stackoverflow",
"name": "stackoverflow shortcut",
"description": "stackoverflow bookmark chrome app",
"icons": { "128": "img/128.png" },
"minimum_chrome_version":"37.0.0.0",
"app": {
"urls": [ "http://stackoverflow.com/" ],
"launch": { "web_url": "http://stackoverflow.com/" }
},
}
The basics of this are documented in the Getting Started Tutorial Sample and in the Create a private Chrome app page this type of app appears to be referred to there as a bookmark app.
My questions are:
Is bookmark app is an official term for this kind of Chrome app? As I am having difficulty finding any other official place it is referred to in such a way
Where is manifest.json fully documented? The extension manifest.json documentation does not even contain info for the app name tag, and the main manifest.json doc doesn't mention the urls, launch, and web_url elements?
The tags are fairly self explanatory and used in many tutorials all over the Web but it seems odd there is no official documentation for them, especially when app is used for more complex Chrome apps - I just want to make sure I am not somehow missing some official and more complete documentation as I am referring to this type of app wrongly.
Maybe it is simply that the code is the documentation and I simply need to find where the manifest.json is parsed in the Chromium code. I thought it was worth asking here first though, and even if I end up being told to check the code then someone might give me a pointer there to get me started.
The "bookmark" apps you describe are officially called hosted apps. Here you have a description of both:
Apps
Contains installable web apps. An installable web app can be a normal website with a bit of extra metadata; this type of app is called a hosted app. Alternatively, an installable web app can bundle all its content into an archive that users download when they install the app; this is a packaged app. Both hosted and packaged apps have icons in Chrome's New Tab page, and most users shouldn't be able to tell the difference between them without looking at the address bar.
The documentation for app manifest only describes the options for packaged apps. As #wOxxOm notes in the comments, the only place currently describing a manifest for a hosted app seems to be the Getting Started tutorial.
I'm trying to use SignalR in a chrome extension on a background page.
Everything seems to work fine until it tries to call negotiate. It seems to be taking the caller (which is a chrome-extension background page) and trying to call negotiate against that, which gives me a 404 while trying to call this page:
chrome-extension://edcdcfjmmmchhgmomfemdkomibeoloko/signalr/negotiate?_=1372007788595
I'd imagine that it should be calling
https://myserver.com/signalr/negotiate?_=1372007788595
But I don't know how to override SignalR with a specific host. Can I override SignalR to work in a chrome extension on a background page
I assume it is javascript you are using? Try
$.connection.hub.url = "http://myserver.com/signalr";
This took me a couple hours to figure out but here's a few steps to get going on making signalr work with a google chrome extension.
Place within the javascript
$.connection.hub.url = "http://yoursever.com/signalr"`
Within the manifest.json file for the google chrome you must give permission to access the server. I would add something like this to make it easy.
"permissions": [
"http://*/*",
"https://*/*"
]
Within your global configuration you need to change allow cross domain requests. Change
RouteTable.Routes.MapHubs()
to
RouteTable.Routes.MapHubs(new HubConfiguration()
{
EnableCrossDomain = true
});
I've been having a look at Chrome extensions and I'd like to create an extension that interacts with a web page using a sidebar. So, user clicks button to launch extension, and the current page splits, with the right hand portion displaying my extension. I tried below, but I see nothing (working or otherwise). I'm not overly surprised it's not working as I do not have a sidebar.html file for one thing. The reason I have that in the manifest is because I saw it in another post in this site. The suggestion there was to use the "sidebar" line in manifest.json, but "sidebar" isn't even mentioned in the documentation as being a valid part of the manifest syntax.
manifest.json:
{
"name": "Test 1",
"version": "1.0",
"description": "Test Extension 1",
"page_action": {
"default_icon": "icon.png",
"default_title": "Testing",
"default_popup": "popup.html"
},
"sidebar" : {},
"permissions": [
"experimental"
]
}
popup.html:
<script>
chrome.experimental.sidebar.show();
chrome.experimental.sidebar.expand();
chrome.experimental.sidebar.navigate({path: "sidebar.html"});
</script>
I've enabled 'experimental'.
Thanks for any help.
The problem is that you are opening, theoretically, the sidebar inside your popup, not in the current page.
You should add a content script in the page, with a function that opens the sidebar. So, in your popup you should just retrieve the current tab then call this function from it.
Also, as Boris Smus said in your question, sidebars will be discontinued in future versions. So I advice you to create your own sidebar frame via content scripts.
Update
To help you, I've made a simple extension that create a sidebar on current page.
#Curtis hosted my sample extension on Github, you can clone it here.
I was looking for a sidebar solution as well and ended up at
Implement chrome.sidebar API thread.
According to the Sidebar PRD, it is already possible to create sidebar by:
injecting a script into the page which edits the HTML of the page to display a sidebar by modifying the DOM to insert an iframe which
loads the contents of the sidebar from a remote server.
the injected script can edit the DOM directly to display a sidebar, the contents of which are passed via message.
However, there are many downsides (explained in the same document) with regard to:
Usability, Performance, Security, Privacy (Extension sniffing as well as Third party cookies) and Accessibility.
You can watch a demo of what they are preparing for future Sidebar Component.
It might help in shipping the feature quicker if you star the thread.
update
Per this comment, Chrome will not get a built-in sidebar component.