I worked with Chrome extensions which have so called background page - an html page that is loaded in background once per browser window. You can store there some javascript variables, can access extension's own localstorage, can communicate back and force with content scripts (scripts injected to pages).
Is there anything similar in Firefox and how do I use it for the tasks listed above?
If you are using the (relatively) new Add-On SDK, then the main javascript file residing in your lib directory is equivalent of a Chrome extension's background page - a persistent script that runs in the background and spawns/creates/inserts panels, widgets and content scripts.
Regarding your specific asks:
1. localStorage: Add-Ons in Firefox cannot access localStorage directly. However, you can use simple-storage for storing data similar to localStorage.
2. Communication with content-script: Add-ons can communicate with content scripts using port or postMessage.
From the point of view of a traditional Firefox extension, the browser itself is just another window containing a document, although this is a XUL document rather than an HTML document. So you can store per-window variables, although you have to be careful not to overwrite other extension variables, which usually means declaring a top-level object and adding all your variables as properties of that object.
Sharing variables between windows used to be a little harder but fortunately JavaScript modules solve that problem in simple cases (primitive types).
Extensions can communicate with content scripts although there are some wrappers in place to prevent you from accidentally doing something silly.
Related
According to Wikipedia in "Browser Add-Ons and Extensions Exemption" section:
CSP should not interfere with the operation of browser add-ons or
extensions installed by the user...
But unfortunately it is blocking external scripts, injected by my add-on.
I can always put this injected code in to the content script. But I'm wondering if there is another way to overcome this.
You should indeed put your code into a content script. If you insert a <script> tag into a page then it works exactly the same as if the web page itself inserted it. The browser has no way of knowing that this code belongs to your extension. What's worse, this code isn't safe from manipulations by the webpage - e.g. the webpage can redefine window.alert() method and your code won't be able to show messages. Extension code and content scripts on the other hand aren't affected by this, these see only the raw DOM objects without any JavaScript-induced changes.
Edit: so apparently adding class="button" make it work... Can someone provide a reference on what other classes are there? We can't find any information on this.. Thanks
We are making an app in HTML5 using XDK, it has quite a few different views. We were planning to just link to another html page each time we want to go to a different view. But we quickly found out that hyperlinking does not work, is disabled, and button does not link either.
One of the people in my group said she saw an example about having a bunch of and then just show and hide them and use that as UI navigation... is that the only way?
Thanks in advance!
The Intel XDK doesn't insert any class definitions or require that you use a specific framework. It is a tool for assembling an HTML5 hybrid mobile app using the CSS, HTML and JS files that you supply.
If you look at the samples and the default "blank" project that is created when you create a new project you'll see that there may be references to one or more of the following "phantom" JS files:
intelxdk.js
cordova.js
xhr.js
The first two (intelxdk.js and cordova.js) are special "device API" JavaScript libraries. You won't actually find them in your project directory, they are automatically included when you use the emulator and when you build your project (which "wraps up" your HTML5 code and assets into a native wrapper that is specific to the target you are building -- it does not compile anything, it just converts it into a hybrid native/HTML5 container app that can be installed on the target platform that you built for).
The third one is a special helper JS library for dealing with CORS issues from within your app.
None of these three JS files define any classes or HTML tags, etc. They simply implement target-specific device APIs that consist of JavaScript on the "top end" and native code on the "bottom end." Your application only sees and interacts with the JavaScript interface, and only with the APIs that you need to use (which is totally optional).
For an intro to all of this, please see the Intel XDK Documentation page.
So, that means you determine which frameworks and structure your app takes. In other words, if you want to use Bootstrap and jQuery you can do so. If you decide to use the App Designer or the App Starter tools, they will define some classes that impact your layout. However, you are not required to use these tools to define your HTML and CSS, you can do it by hand or use your favorite UI framework library.
Keep in mind that your code is not being rendered by a desktop browser but the embedded "webview" that is part of the device. These webviews don't have the same memory and CPU resources that you're used to working with in a desktop browser, so you need to learn to be "lean and mean" for the best results. You are using HTML5 technologies to build a mobile app -- not creating a web site on a phone.
Hope this helps, please see our HTML5 web site for more background material. It's a little slim right now, but we're adding examples and background material as time and resources permit.
Hope that helps...
I am struggling to get some performance in my MVC application.I am loading a partial page (popup) which is taking hardly 500ms. But each time the popup loads it also downloads 2 jQuery files as well.
is it possible to use the jQuery from cache or from parent page?
I have attached the image in red which shows 2 additional request to server.
In order to improve the performance you can try with the following approaches:
see if your application server supports GZip and configure the application/server to return the responses always archived in Gzip
Use minified version of JQuery
there are also Packing libraries where you can pack all the imported resources, such as CSS files and JS files, and the browser will do only 1 request per resource type. For instance, in Java we have a library called packtag.
In general, I recommend you using Google Chrome browser and its performance analyzer. It will give you good hints.
In the Bundle config use this code
BundleTable.EnableOptimizations = true;
and also indclude both files in single bundle.
Does the popup use an iframe or does it's content just get added to the DOM of the current page?
If it gets added to the current page you could try just adding the script references to the parent page instead. It might not always be the best idea if the parent page has no need for those two files, but if the parent page also uses the jQuery validation then the popup will be able to use the parent's reference to the script file.
For an iframe I'd suggest looking at Gzip and minification to make the scripts load faster.
I've seen numerous references to browser.js while trying to create a Firefox sidebar. I don't have a good understanding of what this file is though. It has a method toggleSidebar in it. Can I call that method from a web page? Can I call it from a browser extension? Do I need to include browser.js in my extension somehow first? Can I call it from the add-on SDK or is it only available from the old style XUL extensions?
I don't have a good understanding of what this file is though.
It is the code driving the Firefox browser window, lots of code actually.
Can I call that method from a web page?
No. You can use window.sidebar.addPanel() to add a sidebar however.
Can I call it from a browser extension?
Yes.
Do I need to include browser.js in my extension somehow first?
No, it is already included in the browser window.
Can I call it from the add-on SDK or is it only available from the old style XUL extensions?
You can use it from the Add-on SDK as well but you will need to access the browser window directly - either via one of the low-level modules or chrome authority.
I am curious to know if anyone has been successful using processing.js inside a Firefox extension. I am aware of the difficulties of using external libraries inside extensions and the fact that it has to be loaded in a way that will not pollute the global namespace, conflict with other extensions or Firefox itself.
But with those concerns aside, I wonder if there is anything else that should be considered before attempting it (performance, etc).
I am thinking about using it on a new window, in xhtml loaded from the chrome. Any experiences, ideas and suggestions?
I had the same doubt right now, but I think it can be done, we just hace to include processing.js file in content folder of our .xpi