Firefox get unique id of tabs for extension development - javascript

I'm developing a Firefox extension, and I need get and work with unique id of tabs.
How I can do it?
Thanks!

If you use the Firefox SDK, you can get the id of the active tab by using:
var tabs = require('sdk/tabs');
var activeTabId = tabs.activeTab.id;

I have a solution.
You can try this out.
The function below will return you a unique id of the current tab.
var get_current_tab_id = function()
{
var doc = gBrowser.contentDocument; //Gets the current document.
var tab = null;
var targetBrowserIndex = gBrowser.getBrowserIndexForDocument(doc);
if (targetBrowserIndex != -1)
tab = gBrowser.tabContainer.childNodes[targetBrowserIndex];
else
return(null);
return(tab.linkedPanel);
}

Check out the documentation for nsIWindowMediator, which provides information and access to all open windows within Firefox.
https://developer.mozilla.org/en/XPCOM_Interface_Reference/nsIWindowMediator#getEnumerator

If you mean that you want to interact in any way with the open firefox tabs via javascript then the answer is that you cannot.

Related

Change style of tab using add-on SDK

I'm trying to dynamically change the style of a tab using the add-on SDK. How can I do this?
Here's what I have tried:
I can access tab objects like this:
var tabs=require('sdk/tabs');
tabs.on('ready',function(tab){
console.log('url is: '+tab.url); //-> url is http://www.google.com
console.log('stlye is: '+tab.url); //-> style is null
});
But the style attribute is null and none of the following work:
tab.setAttribute('style','background-color:blue'); // the method doesn't exist
tab.style.backgroundColor='blue'; // type error because style is null
tab.style='background-color:blue'; // has no effect
So how can I change the style of a tab dynamically? Another thing I have tried is converting the tab to a XUL object using code from the docs:
var { modelFor } = require("sdk/model/core");
var { viewFor } = require("sdk/view/core");
var tabs = require("sdk/tabs");
var tab_utils = require("sdk/tabs/utils");
function mapHighLevelToLowLevel(tab) {
// get the XUL tab that corresponds to this high-level tab
var lowLevelTab = viewFor(tab);
// now we can, for example, access the tab's content directly
var browser = tab_utils.getBrowserForTab(lowLevelTab);
console.log(browser.contentDocument.body.innerHTML);
// get the high-level tab back from the XUL tab
var highLevelTab = modelFor(lowLevelTab);
console.log(highLevelTab.url);
}
tabs.on("ready", mapHighLevelToLowLevel);
But the code throws an error: Module 'sdk/model/core' is not found at resource://gre/modules/commonjs/sdk/model/core.js
even though I followed the directions and created the core.js file. Also, I don't understand the what the curly braces are doing in the var { modelFor}= syntax.
You need to access the xul tab element.
Try this:
var tabsLib = require("tabs/tab.js");
var tab = tabsLib.getTabForWindow(htmlWindow);
tab.style.color = 'red'; //makes the tab text red
pass htmlWindow as the topmost window of the html document. So like document.defaultView.top. document.defaultView is the window of the document
if that doesnt work then just get the browser window, this example gets the most recent browser window (keeep in mind there may be multiple browser windows open (browser window is a firefox window that has tabs, [and maybe popup windows- im not sure in sdk])
const { getMostRecentBrowserWindow } = require('sdk/window/utils');
var aDOMWindow = getMostRecentBrowserWindow();
if (aDOMWindow.gBrowser && aDOMWindow.gBrowser.tabContainer) {
var tabs = aDOMWindow.gBrowser.tabContainer.childNodes;
for (var i=0; i<tabs.length; i++) {
tabs[i].style.color = 'red'; //makes the tab text red;
}
}

How can i get all URL's of a google chrome window

im currently developing an extension, but im kind of lost by the moment.
Basically, what i want it to do, its kind of what "OneTab" extension does.
So my first question is, after adding the listener to the extension button, and executing the function, i want to get all the url's of the current window, and store them in an array and the show them in the html file.
So im using this:
chrome.tabs.getSelected(null,function(tab) {
var tablink = tab.url;
console.log(tablink);
});
but its not working and im not sure how it will check all the tabs one by one.
Thanks in advance.
chrome.tabs.getSelected() will only get you the current tab.
In order to get the list of all the tabs in the current window, you need to use the chrome.windows API. This API will return an object of the current window which will have the list of tab objects.
Here is the sample code:
chrome.windows.getCurrent({"populate":true}, function(currentWindow) {
var tabURLs = [];
var tabs = currentWindow.tabs;
for (var i=0; i<tabs.length; i++) {
tabURLs.push(tabs[i].url);
}
console.log(tabURLs);
});
For details check:
http://developer.chrome.com/extensions/windows.html#method-getCurrent

Android Chrome window.onunload

I am developing an HTML5 app specifically for Android and Chrome. The problem I have stems from the requirement to track open browser tabs. I do this by creating a unique ID stored in each tab's sessionStorage. I then track the open tabs by registering each ID in a localStorage array that each tab has access to.
The problem is that I cannot remove the ID from localStorage when closing a tab by using the window.onunload event. The code works fine in desktop Chrome but I cannot get it working in Android.
$(window).on('beforeunload', function () {
removeWindowGUID();
});
function removeWindowGUID() {
var guid = sessionStorage.getItem("WindowGUID");
var tmp = JSON.parse(localStorage.getItem("WindowGUIDs"));
tmp = tmp.remove(guid); // remove is a custom prototype fn
localStorage.setItem("WindowGUIDs", JSON.stringify(tmp));
}
This event will fire when reloading a page, which is fine, just not on closing.
I have also tried using the pagehide event.
Depends on the browser. Some use .onunload, some use onbeforeunload.
Quickest solution is
window.onunload = window.onbeforeunload = function() {
var guid = sessionStorage.getItem("WindowGUID");
var tmp = JSON.parse(localStorage.getItem("WindowGUIDs"));
tmp = tmp.remove(guid); // remove is a custom prototype fn
localStorage.setItem("WindowGUIDs", JSON.stringify(tmp));
});
Tested on gingerbread, ICS & jelly bean using native android browser.
I did something similar, the errors were exactly the same. I noticed if call window.close() programmatically, the event is called. I just added my own 'close' button on the page.

Local storage in javascript that supports both browsers (Chrome and Firefox)

I was not able to retrieve my local storage values in Firefox 4 web browser when i reloaded the same page.
Note: The code below is working fine in the latest Google Chrome web browser
My code:
//Set item
var bookmark_value = document.getElementById('bookmark').value;
var storageIndex = "Bookmarked_Page_" + i;
localStorage[storageIndex] = bookmark_value;
//get item
document.bookmark["bookmark"].value = localStorage["Bookmarked_Page_" + i];
You shouldn't rely on the browser adding elements with an ID directly onto the document.
//get item
document.getElementById('bookmark').value = localStorage["Bookmarked_Page_" + i];
typo?
document.bookmark["bookmark"].value
should be
document.getElementById('bookmark').value
Edit
Oh I think that's your problem, check out this question and answer: Is "localStorage" in Firefox only working when the page is online?

Firefox extension get tab index

var browser = gBrowser.getBrowserForTab(event.target);
How I can take index of this tab?
Try Array.slice(getBrowser().tabs).indexOf(aTab)

Categories

Resources