Search code examples
firefoxtabsfirefox-addonfirefox-addon-sdk

How to get the title of all the tabs which is open in multiple window in firefox?

I'm creating a firefox extension using Add-on SDK, which will display all the tab details including memory, title and url. I have tried to get the tab title using require("sdk/tabs"); tab package.

Below is the sample code:

popup.js

<body>
    <ul>
        <li>
            <a href="#" tabindex="1" id = "tab_list"> Settings</a>
        </li>
    </ul>
    <script type="text/javascript" src="popup.js"></script>
</body>

popup.js

var tab_button = document.getElementById("tab_list");
tab_button.addEventListener("click", function() {
    addon.port.emit("GET_TABS");
});

main file: index.js

const buttons = require("sdk/ui/button/action");
const { TogglePanel } = require("popupPanel");

var button = buttons.ActionButton({
    id: "mem-tools",
    label: "tabs info listing",
    icon: {
        "16": "./tab.png",
    },
    onClick: handleClick
});

let togglePanel = new TogglePanel();

function handleClick(state) {
    togglePanel.panel.show({position:button});
}

Panel file: popupPanel.js

var Panel = require('sdk/panel');
var self = require('sdk/self');
var { MemoryHandler } = require('memory-handler');

var memoryHandler = new MemoryHandler();
function TogglePanel() {

    this.panel = new Panel.Panel({
        width: 150,
        height: 200,
        contentURL: self.data.url("popup.html")
    });
    this.panel.port.on("GET_TABS", function() {
        memoryHandler.getAllTabs();
    });
}
exports.TogglePanel = TogglePanel;

memory-handler.js

    var tabs = require('sdk/tabs');

    function MemoryHandler() {

        return {

            getAllTabs: () => {
                for(let tab of tabs) {
                    console.log(tab.title);
                }
            }

        }
    }
    exports.MemoryHandler = MemoryHandler;

This code only fetching all tab titles from the main window and child window, but not from all other new window's tabs which is opening using _blank attribute.

Note: we can easily recreate the issue just create an html page and use the below code:

 <a href="http://www.someurl.com" target="_blank">Visit me</a>

The page open using the "_blank" attribute is not coming under the tabs array.

Any help is appreciated. Thanks in advance!!

Solution

  • We can get all the titles from all the window tabs by creating a custom array.

    index.js

     var memoryHandler = new MemoryHandler();
 tabs.on('ready', function(tab) {
     memoryHandler.addTabDetails({id: tab.id ,title: tab.title, url: tab.url});
 });

    If you want to get the title which is setting by using javascript after page load, you can inject a mutation observer code in the content script of tab

    memory-handler.js

    var presentTabs = []
function MemoryHandler() {

    return {
        addTabDetails: (tab_array) => {
            presentTabs.push(tab_array);
        }

    }
}
exports.MemoryHandler = MemoryHandler;