We Keep Coding

Can I fire up a Chrome extension API from code?

Is it possible to launch a Google Chrome extension within a website? E.g run some javascript that will launch the extensions UI?
I'm building a web-app that will allow users to take screenshots of their desktop and edit them. I've got a sample extension up and running using dektopCapture but it is an 'app' style of an extension.
It allows to select a window to stream from, then take a
snapshot within the extension UI(using a button) that is saved as an image string
My question is:
Is it possible to fire up the desktopCapture UI (the window that gets the available windows to stream from), from within my web-app, maybe a button, take the stream and place it on a canvas/HTML5 video element within my web-app?
I'm figuring that I could hook-up an event-listener within the extension and use runtime.onMessage to post a message from within my app
Notes:
If there's a more intuitive way to do this, I can go that route - e.g If I could keep as much interaction within the web-app with just the extension running in the background, that would be even better.
The extension is of type browser_action but I want it to be applicable to a single page(the app's webpage) so if it can be used in a page_action I'd prefer that instead. There's really no need to have browser_action icon if I can trigger this from within a webpage
I'm also planning to build a FF extension so any insights there are also appreciated.

So I'm answering my own question.
I've managed to get it working using externally_connectables.
The externally_connectable manifest property declares which
extensions, apps, and web pages can connect to your extension via
runtime.connect and runtime.sendMessage.
1. Declare app/webpage in manifest.json
Just declare your web-app/page within your manifest.json as an externally_connectable.
E.g I wanted to connect my app is hosted on Github Pages and I have a domain name of https://nicholaswmin.github.io, so it does a bit like this:
"externally_connectable": {
"matches": ["https://nicholaswmin.github.io/*"]
}, //rest of manifest.json
2. Set up event listener for messages in background.js
Then set up an event listener in your background.js like so:
chrome.runtime.onMessageExternal.addListener(function(request, sender, sendResponse) {
//Stuff you want to run goes here, even desktopCapture calls
});
3. Send message from your web/app page
And call it from within your web-app/website like this:
chrome.runtime.sendMessage("APP ID GOES HERE",
{data: { key : "capture"}});
Make sure that your website is correctly declared as an externally_connectable in your manifest.json and that you are passing the app-id when sending the message

How to get data from an external site inside a cordova application?

Scenario:
I've an application made in angularJS and ionic for cordova 3.5
This application loads trough an iframe a web to make some things with a step by step form. This web is on other site.
The code for the html is:
<div id="IframeContainer">
<iframe src="URL" style="width:100%;height:90%" onLoad="checkforclose(this);"></iframe>
</div>
This step-by-step form returns a result that the cordova application needs to know what happens in the form. It can return a json, a text/plain or even an HTML that auto-post to another site (This is linked with this non-answered question: Post and redirect FROM Web Api)
Said this, in my cordova application I've a javascript function in order to close the iframe and take over again the control of my application, detecting if the url contains the word "close". This is the code:
<script type="text/javascript">
function checkforclose(pageURL) {
var urlFrame = pageURL.contentWindow.location;
if (urlFrame.href.indexOf('close') > -1) {
window.location = "#/employees/";
}
}
</script>
Question:
Trying avoid CORS (So I think I can't read the iframe content on load, or I'm wrong?),
without using jQuery (AngularJS is welcome, plain javascript even more)
Taking over the control again to the application
How can I get the data returned by the step-by-step external form?
UPDATE 1:
I tried coding a "onload" reading (CORS errors), and posting to a cordova-html page, but without any respectable result.

A possible solution is Web messaging or cross-document messaging. Here's a blog post where someone used this method to gain access to a mobile device's camera from an external page loaded in an iframe. Although this person had the opposite goal (get data from Cordova to page loaded in iframe), they were able to accomplish cross domain communication between a page in an iframe and Cordova; which is what I believe you are trying to do.

Phonegap+Ember+jQuery+Bootstrap accessing button through jQuery?

I've built an Ember.JS app using the latest Bootstrap.css/js for styling. In one of my templates, I have a button that triggers an action that disables the button and sets it's text to "loading" via the Bootstrap function described here. I access the button using jQuery from within my action as follows:
$('.find').button('loading'); //Starts "Please Wait" message
This worked great when running the ember app a server on my desktop. However, I'm presently trying to package the app into a Phonegapp app, initially in iOS. Whenever the action fires in the simulator, I get the following error:
I'm beginning to suspect this may be due to my action-firing button not being accessible through the class with jQuery like on desktop? But I'm not terribly sure as this is my first Phonegap app. Many thanks if someone can clear this up.

Got it! It was solved by an answer on this question.
I don't think that JQuery is being loaded into the page.
You have referenced it as:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
which says use whatever protocol the current page is being server
from. On a mobile device you are being served from file:// so the
actual request the browser makes to fetch the script is:
file://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
You need to specify the scheme you want to use or else include it in
the PG project itself.
With me, it wasn't my jQuery not being loaded, but rather my Bootstrap.js! When you follow the CDN instructions on the bootstrap website, the URLs are similarly formatted starting with "//" (known as a "protocol-relative URL" or also "network-path reference") instead of the explicit "http://". Making the changed fixed the issue!

PrimeFaces ViewExpiredException after page reload

I have wrapper PrimeFaces.ajax.AjaxResponse to handle ViewExpiredException (reloading the page):
var handleViewExpired = function (viewId) {
window.alert('${msg.ajax.viewExpired}');
window.location.reload();
};
However, sometimes I got that error over and over again after trying to click anything invoking AJAX requests on the site:
javax.faces.application.ViewExpiredException: /tree.xhtmlNo saved view state could be found for the view identifier: /tree.xhtml
at org.apache.myfaces.lifecycle.RestoreViewExecutor.execute(RestoreViewExecutor.java:128)
Am I doing refresh in wrong way? What should I do to invoke full page reload, such as clicking reload in browser? Do I need to remove cookies (JSESSIONID, oam.Flash.RENDERMAP.TOKEN)?
I'm using PrimeFaces 3.5 with MyFaces 2.0.7 running on WebSphere 7.0.

If you have many (>15) pages/views/frames that are concurrently opened in the session, then, the following may be useful.
You need to have a look on:
1. numberOfViewsInSession: defines the number of (top-level) view states (pages) to support back button operation
2. numberOfLogicalViews: defines the number of logical views (frames) that can present in a page (per top-level view)
A quick action to make sure if it's relevant is to set those numbers to 500, and see
If they are relevant, then, you can find more information in the following links:
http://www.java.net/node/681211
Problem with numberOfViewsInSession and multiple tabs

Beginner Assistance - Where does this code belong?

I'm trying to develop a firefox extension that inserts additional HTTP header fields into outgoing HTTP requests (to interface with an apache extension i'm concurrently developing).
While I understand the individual components of an extension and understand the basic tutorials that are presented on the web, I'm finding it difficult going from the "Hello World" tutorial extensions, into developing a full blown extension.
The sample code I am wanting to adapt for my purposes is presented at the bottom of Setting HTTP request headers.
I am wondering, where in the extension hierarchy should this code be placed and how is such code called/constructed/activated, will it run automatically when the extension is initialised?
Thanks in advance.

For a basic extension, you would place your code in the chrome/content directory of the extension. You would hook this content into Firefox using an overlay. While overlays are usually xul content (buttons, etc) they can be anything. Including a script tag which would load fire off your Javascript code.

That code is an XPCOM component and goes into a components/<some name>.js file.
You should read up on XPCOM components if you want to dig it, but yes, .js files in components are loaded at startup. Such files contain registration code (starts at the var myModule = { line in that example), which tells Firefox whether the component defined in the file is available upon request or should it be instantiated automatically.
In that example you can see the component getting registered to be notified of the application's startup:
catMgr.addCategoryEntry("app-startup", this.myName, this.myProgID, true, true);
and when handling the app-startup notification it registers itself for the http-on-modify-request notification:
os.addObserver(this, "http-on-modify-request", false);