We Keep Coding

How to access content of a tab from firefox addon

In my addon I find the tab I want to operate and then try to access the elements of it.
Currently I am finding the tab I need by
var b = this.wm.getMostRecentWindow("navigator:browser");
// qqDPSWD This allows for correct window targeting.
var foundW = null;
var en = this.wm.getEnumerator("navigator:browser");
while (en.hasMoreElements()) {
var w = en.getNext();
if ((w.title && w.title.indexOf(parameters['title_identifier']) != -1) ||
(w.document && w.document.title.indexOf(parameters['title_identifier']) != -1))
{
var doc = w.document;
var temp2 = doc.getElementById("myframe");
foundW = temp2.contentWindow;
}
}
temp2 is null though the tab does have an iframe with id myframe.
I get the object doc as an XUL object but doc.getElementById("myframe") is null. Currently I have an html file opened in the desired tab with the desired iframe residing inside the html page loaded in the main tab. I am able to identify the tab properly but couldn't return the iframe window. How do I do it?
I tried looking at the documentation for browsing between the tabs but couldn't find right answer in https://developer.mozilla.org/en/docs/Working_with_windows_in_chrome_code
Node I am working on https://github.com/sebuilder/se-builder/blob/master/seleniumbuilder/components/command_processor.js#L10103 and want to replace
foundW = w;
with
foundW = w.document.getElementById("myframe").contentWindow
as unlike the open source project where he wants to return the tab window I want to return the iframe window present inside the tab he returns.

You aren't actually going through all tabs, you are just going through the FIREFOX windows (called CHROME windows) (not the browser and its window inside each tab).
In your code. var doc = w.document is the CHROME document of the FIREFOX window (not the browser inside the tab). So w.title of the FIREFOX window will be the title of the currently selected tab (probably followed by ' - Mozilla Fireox' can you verify this for me? im guessing here)
temp2 is null because your frame is in the BROWSER IN TAB window which is the HTML document. So if your tab is currently selected you would get it like this w.gBrowser.selectedTab.linkedBrowser.contentwindow this will be the html window. w.selectedTab is the actual tab element that you click at top, it has a property called linkedBrowser which holds the "HTML" browser which is inside this tab. (i put html
so to fix your code below:
var b = this.wm.getMostRecentWindow("navigator:browser");
// qqDPSWD This allows for correct window targeting.
var foundW = null;
var en = this.wm.getEnumerator("navigator:browser");
while (en.hasMoreElements()) {
var w = en.getNext();
if ((w.title && w.title.indexOf(parameters['title_identifier']) != -1) ||
(w.document && w.document.title.indexOf(parameters['title_identifier']) != -1))
{
var doc = w.gBrowser.selectedTab.linkedBrowser.contentDocument;
var temp2 = doc.getElementById("myframe");
foundW = doc.defaultView; //im not sure what you want foundW to be, the chrome window? or the tab html window? if you want html window or you can do doc.defaultView OR w.gBrowser.selectedTab.linkedBrowser.contentWindow BUT if you want the chrome window it would be w
}
}
HOWEVER your code has a problem, its not going through all tabs in each window, its only going through the currently selected tab.
This is how you would do it for each tab in each window, read the comments carefully, also i took out your ugly if statement lol it was making things sloppy. Just put it back i replaced with /*your if statement*/ for easyiness for me to make example below
var b = this.wm.getMostRecentWindow("navigator:browser");
// qqDPSWD This allows for correct window targeting.
var foundW = null;
var en = this.wm.getEnumerator("navigator:browser");
while (en.hasMoreElements()) {
var w = en.getNext();
//we know for sure that all your windows have gBrowser element because you are getting enumerator for 'navigator:browser', but its not necessary for it to have tabContainer, for example a pop up window with no tabs in it
if (w.gBrowser.tabContainer) {
for (var i = 0; i < w.gBrowser.tabContainer.childNodes.length; i++) { //this itereates through each tab element in the tab bar (so the thingies you click)
var tab = w.gBrowser.tabContainer.childNodes[i];
var tabBrowser = tab.linkedBrowser;
var tabDoc = tabBrowser.contentDocument;
var tabWin = tabDoc.defaultView; //OR you can do tabBrowser.contentWindow
if ( /*if statement here*/ ) {
var temp2 = tabDoc.getElementById("myframe");
foundW = tabWin; //im not sure what you want here so i set it to the html window
w.focus(); //if you want to focus this FIREFOX window which is chrome window do this:
w.gBrowser.selectedTab = tab[i]; //if you want to select this tab then do this
}
}
} else {
//it has no tabContainer so its like a popup window with no tabs so our browser elment is just gBrowser, ill use same var names as above to keep things straight for you
var tabBrowser = w.gBrowser;
var tabDoc = tabBrowser.contentDocument;
var tabWin = tabDoc.defaultView; //OR you can do tabBrowser.contentWindow
if ( /*if statement here*/ ) {
var temp2 = tabDoc.getElementById("myframe");
foundW = tabWin; //im not sure what you want here so i set it to the html window
w.focus(); //if you want to focus this FIREFOX window which is chrome window do this:
//w.gBrowser.selectedTab = tab[i]; //no tabs in this window so if you do w.focus() on line above it will focus this properly
}
}
}

How do I dynamically change the background.js to reflect a user's setting in chrome?

So I am developing a chrome extension right now in order to get introduced to the world of web development. I have run into a issue which I can't seem to get my head wrapped around. Currently, my background.js gets all the open windows along with the open tabs in each of them using:
function getAllOpenWindows(winData) {
var tabs = [];
for (var i in winData) {
/*if (winData[i].focused === true) {*/
var winTabs = winData[i].tabs;
var totTabs = winTabs.length;
for (var j=0; j<totTabs;j++) {
tabs.push(winTabs[j].url);
}
/*}*/
}
console.log(tabs);
}
which was actually posted by bpatel here. Now as you can see the commented line, it allows me to decide if the tabs are taken from just the current focused window or all the windows. My issue is that how exactly can I change this setting dynamically once the extension has been loaded into chrome and is being used actively? So if a user goes into options and says they want only all the windows I would be able pass a message to my background.js to say "hey use the all windows function and not the current focused window". I understand that 2 seperate functions should ideally be used here, this is just a sample on how it would be done. Thanks a ton!

You can use localstorage to save any user settings.
The options page and the background page share the same localstorage, so you can update the setting from options page and access the value from background page.
options.html
<input type="checkbox" id="windowType" value="All">Check all windows</input>
<input type="button" id="saveSettings" value="Save">Save</input>
options.js
document.getElementById("saveSettings").onclick = save_settings;
function save_settings()
{
var checkAll = document.getElementById("windowType").checked;
localStorage.setItem("check_all_windows",checkAll);
}
You can use a similar function to update the value of the checkbox with the current value, when the options page loads.
background.js
function getAllOpenWindows(winData) {
var tabs = [];
for (var i in winData) {
var checkAll = (localStorage.getItem("check_all_windows") == "true");
if (checkAll || winData[i].focused === true) {
var winTabs = winData[i].tabs;
var totTabs = winTabs.length;
for (var j=0; j<totTabs;j++) {
tabs.push(winTabs[j].url);
}
}
}
console.log(tabs);
}
In background.js, you can get the value of the same key from localStorage and check if it is set to true or false. Remember that the localStorage will store values as strings so you need to compare it with the proper strings - if("false") will evaluate to true.

Firefox Addon Button Code Not Working - Javascript

I am creating a Firefox extension that is designed to place a button automatically on the toolbar that, when clicked, will open a web page in a new tab. I have used the code snippets from the Mozilla dev site but, when both are put together, only the button placement works. The button does nothing when clicked.
I don't know too much about javascript, so I have no idea what is going wrong here. The entire extension has passed all Mozilla validation checks with no errors and no warnings.
Here is the code. Any help you could offer would be greatly appreciated.
CustomButton = {
1: function installButton(toolbarId, id, afterId) {
if (!document.getElementById(id)) {
var toolbar = document.getElementById(toolbarId);
// If no afterId is given, then append the item to the toolbar
var before = null;
if (afterId) {
let elem = document.getElementById(afterId);
if (elem && elem.parentNode == toolbar)
before = elem.nextElementSibling;
}
toolbar.insertItem(id, before);
toolbar.setAttribute("currentset", toolbar.currentSet);
document.persist(toolbar.id, "currentset");
}
if (firstRun) {
installButton("nav-bar", "my-extension-navbar-button");
}
},
2: function () {
const url = "http://www.mysite.com/"
document
.getElementById("content")
.webNavigation
.loadURI(url, 0, null, null, null)
}
}
I am not very sharp at this, which is why I am asking the question here instead of searching for other examples, which make no sense to me. If someone could show me how to modify this specific code to do what I need it to do, I would be grateful.

This will work from FF 29, which will be released on April 2014
It adds an action-Button to the toolbar, once you click it it will load the http://www.example.com site in a new tab; if you prefer to load a new window use require("sdk/windows") instead.
Using the addon-sdk
var ui = require("sdk/ui");
var action_button = ui.ActionButton({
id: "my-button",
label: "Open example page!",
icon: "./icon.png",
onClick: function() {
require("sdk/tabs").open("http://www.example.com");
}
});

Javascript - How to disable the print dialog after first show?

On one of our pages the user has the option to print a selected list of html pages. This is how it is at the moment
var rowcount = FrmMain.RowCount;
var frame = FrmMain.Frame;
for(i=1;i<=rowcount;i++)
{
var obj = FrmMain.elements("chk_" + i);
if(obj.checked)
{
frame.src = FrmMain.elements("hpath" + i).value;
window.frames[frame.id].focus();
window.frames[frame.id].print();
}
}
Now this works fine. The problem is that on each loop the print dialog box is displayed and the user has to click print.
Basically, what I'm asking is whether that is a way to supress this dialog. It must appear at the first time but hide thereafter. Some thing like below
var show = true;
...
{
...
{
...
if(show)
{
window.frames[frame.id].focus();
window.frames[frame.id].print();
show = false;
}
else
{
window.frames[frame.id].focus();
window.frames[frame.id].printwithoutdialog();
}
}
}
I hope I've been clear. Thanks in advance.

For security / privacy reasons, this is impossible.
Otherwise, ads would automatically print their brochures.
Instead, you can combine all of the pages into a single frame.

Some browsers have an option bypass the dialog, but it can't be done in javascript.

Dashcode webapp flickers upon transition, only in iPhone Safari

I created a simple RSS web app using the template in Dashcode. Problem is, when choosing items in the list from the feed the transition flickers (even with the default settings). I am guessing its because of the images in the posts.
I tried disabling the transitions completely but even then I get a flickering when returning to the list. This problem does not appear to affect safari on OSX only on the iphone.
Here is the code that I think is responsible:
var topStories = parseInt(attributes.topStories, 30);
function load()
{
dashcode.setupParts();
// set today's date
var todaysDate = document.getElementById("todaysDate");
todaysDate.innerText = createDateStr(new Date()).toUpperCase();
setupFilters("headlineList");
// This message checks for common errors with the RSS feed or setup.
// The handler will hide the split view and display the error message.
handleCommonErrors(attributes.dataSource,
function(errorMessage) {
var stackLayout = document.getElementById("StackLayout")
if (stackLayout) {
stackLayout.style.display = 'none';
}
showError(errorMessage);
});
// get notifications from the stack layout when the transition ends
document.getElementById("StackLayout").object.endTransitionCallback = function(stackLayout, oldView, newView) {
// clear selection of lists when navigating to the first view
var firstView = stackLayout.getAllViews()[0];
if (newView == firstView) {
document.getElementById("headlineList").object.clearSelection(true);
}
}
}
function articleClicked(event)
{
document.getElementById("StackLayout").object.setCurrentView("articlePage", false, true);
}
function backToArticlesClicked(event)
{
document.getElementById("StackLayout").object.setCurrentView("frontPage", true);
}
function readMoreClicked(event)
{
var headlineList = dashcode.getDataSource('headlineList');
var secondHeadlines = dashcode.getDataSource("secondHeadlines");
var selectedItem = null;
if (headlineList.hasSelection()) {
selectedItem = headlineList.selectedObjects()[0];
} else if (secondHeadlines.hasSelection()) {
selectedItem = secondHeadlines.selectedObjects()[0];
}
if (selectedItem) {
var link = selectedItem.valueForKeyPath('link');
// If the link is an object, not a string, then this may be an ATOM feed, grab the actual
// href from the href attr
if (typeof(link) == 'object') {
link = selectedItem.valueForKeyPath('link.$href');
// If the link is an array (there is more then one link), just grab the first one
if (DC.typeOf(link) == 'array') {
link = link[0];
}
}
window.location = link;
}
}
var headlineListDataSource = {
// The List calls this method once for every row.
prepareRow: function(rowElement, rowIndex, templateElements) {
if (rowIndex >= topStories) {
templateElements['headlineDescription'].style.display = 'none';
templateElements['headlineTitle'].style.fontSize = '15px';
}
}
};

The following CSS rule fixed all of my "-webkit-transition" animation flickering issues on the iPad:
body {-webkit-transform:translate3d(0,0,0);}

I am not sure how well that applies to your problem but in general you should set the backface visibility to hidden if not needed. That will most likely kill all flickering on a page.
-webkit-backface-visibility: hidden;