I have an index page that has its template set to dom-bind and have data binding on the page as well as the paper-menu selection/button. In my script I have this:
var app = document.querySelector('#app');
app.selected = 0;
from what I understand that should set the page to index 0, but it doesn't. My main content area is blank, and if I select the menu item it changes happily. Just not on load. Something I am missing?
Polymer takes just a moment to load and bind everything. Luckily, there's an event you can hook into just for that!
var app = document.querySelector('#app');
app.addEventListener('dom-change', function() {
app.selected = 0;
});
I'd take a look at the Polymer Starter Kit's app.js file for some more tips on getting your app up and running.
Related
I'd like to display, in my app, only a part of a web page.
On this website, I'd like to display, in my app, only the div id "MovieCart".
What should I write in my as3 code in order to do so ?
For now, I have this line :
webView.loadURL("http://www.cinecity.nc/Cinecity/Film/40565");
But, of course, it's displaying the fullwebpage.
EDIT
So, I've tried this :
webView.addEventListener(Event.COMPLETE,onComplete);
var res : String = ExternalInterface.call("function(){return document.getElementById('movieCart').outerHTML}");
var urlOfMovie: URLRequest = new URLRequest("http://www.cinecity.nc/Cinecity/Film/40567");
var loaderMovie:URLLoader = new URLLoader();
loaderMovie.load(urlOfMovie);
webView.loadString(res);
But, as it's an AIR app, ExternalInterface.call can't be call. Any idea ?
Here is one easy way you can accomplish this:
//First, load the full page as you're currently doing:
webView.addEventListener(Event.COMPLETE, webLoadComplete); //listen for when the load is finished
webView.loadURL("http://www.cinecity.nc/Cinecity/Film/40565");
//runs when the load finishes
function webLoadComplete(e:Event):void {
webView.removeEventListener(Event.COMPLETE, webLoadComplete); //stop listening
//second, invoke the following Javascript on the page which assigns the `MovieCart` element as the html for the whole document body
webView.loadURL("javascript:document.body.innerHTML = document.getElementById("MovieCart").outerHTML");
}
Disclaimer:
Keep in mind that scrapping content from websites is generally frowned upon and you may be infringing on peoples work/copyrights by doing so.
How (or is it even possible) to use custom HTML dialogs in Electron? I know that Electron provides certain dialogs (showMessageDialog, showErrorDialog) but these do not seem to allow custom HTML.
I do not wish to use native HTML dialogs (dialog) tag as it does not 'blend in' with the user interface.
Any help would be much appreciated. Thanks!
You can create a BrowserWindow that's modal and, if you like, frameless. See http://electron.atom.io/docs/api/browser-window/.
Yes.
On your parent you should have:
const { remote } = require('electron');
const { BrowserWindow } = require('electron').remote;
and then:
let child = new BrowserWindow({
parent: remote.getCurrentWindow(),
modal: true,
width:300, height:300,
webPreferences: {
enableRemoteModule: true,
nodeIntegration: true
}
});
child.loadFile('myCustomModal.html');
On myCustomModal.html remeber to include a way to close the modal!
like:
<button id="cancel-btn">Cancel</button>
<script>
const remote = require('electron').remote;
document.getElementById("cancel-btn").addEventListener("click", function (e) {
var window = remote.getCurrentWindow();
window.close();
});
</script>
As Marc Rochkind said in a previous answer, you can use modal windows in Electron.
However, I have found a small bug with modal windows which causes the parent window to flicker for a very short duration when its .show() function is called. After quite some time on Google, I found an open issue on GitHub about the same problem. After reading the comment section in the issue, and stumbling across some code snippets, I shared a hacky solution in the issue's comment section.
It does take some work to set up, but once it's done, it's really easy to port to other child windows.
I am looking at using Polymer for a new project I am working on. I'm lucky enough to be able to target the latest version of Chrome only.
One of the reasons I am looking at Polymer is that I understand that is uses the new Object.observe for data-binding. (I think I am right in saying that, please correct me if I am not!)
One thing I would like to achieve is to be able to run my tests against my view models rather than using a gui testing tool.
...but as far as I can see, Polymer is setup for the web components to actually be the view models. Am I right in saying that? Now I've not looked into Polymer testing, but I expect that would mean having to have a DOM to test...
Now, I can add a "context" attribute to every web component and bind the JS view model to that and have all the bindings as {{context.prop}}, {{context.prop1}}, etc...
Is this going against any polymer principle - have I got completely the wrong idea?
Example element:
<polymer-element name="my-element" attributes="context">
<template>
<textarea value="{{context.prop}}"></textarea>
</template>
<script>Polymer({});</script>
</polymer-element>
Element use:
<my-element id="ele"></my-element>
<script>
var model = { prop: 'initial value' }
// wait for DOM to load - should really use some sort of "ready" event here...
setTimeout(
function() {
var ele = document.querySelector('#ele');
ele.context = model;
}, 3000);
Object.observe(model, function() { console.log('changed'); });
</script>
Is there a simple way where I can access a global javascript variable through content-scripts in chrome extensions?
Accessing global object from content script in chrome extension
I followed the steps mentioned in the above link, but it did not work out for me. Any help would be much appreciated.
Thanks,
Shankar
I managed to complete it. Thanks for the help. I used simple message passing to retrieve the value from the extension script to the content script. The place where I had missed was, the listener at the extension script needs to be at the background page (I think so). Once I changed that, it worked.
For those from the future looking for an answer to this question, here's how I do it:
function getVariable(v) {
var c = document.createElement("div");
c.id = 'var-data';
c.style.display = 'none';
document.body.appendChild(c);
var s = document.createElement('script');
s.innerHTML = 'document.getElementById("var-data").innerText=JSON.stringify('+v+');';
document.head.appendChild(s);
var data = JSON.parse(c.innerText);
c.remove();
s.remove();
return data;
}
And basic usage:
getVariable('globalVarIWantToAccess');
All this script goes in the content-script, not the code for the main webpage, which means that no co-operation is needed from the webpage itself. Basically, the getVariable function creates a script element which is injected into the main page. This script tag retrieves the requested global variable and puts the data into a new div. The function then gets this data from the new div, deletes the new div, deletes the new script element and returns the data.
I want to develop an extension that runs in the background and listens to keystrokes and stores them as a string in a variable. For example, if I have 5 tabs in a chrome browser window and I press a,b,c,d,e on each tab of the window; the final string should be abcde.
Could any please provide a sample code for this?
Help will be greatly appreciated.
You could add code like this to a content script:
var bodyElement = document.getElementsByTagName("body")[0];
bodyElement.addEventListener("keypress", function(e){
console.log(e);
console.log(String.fromCharCode(e.keyCode));
});
The body element must be loaded for this code to work, so use jQuery's $(document).ready(), or similar, or in the extension manifest set the run_at value for the script to document_end.