Firefox SDK different panel per tab - javascript

Hi all this is my first Stack Overflow question, so be gentle.
I am trying to develop an addon with the Firefox SDK. I have a button attached to a panel. The panel intercepts certain web requests and displays them.
My problem is that the panel maintains it's state across all of my tabs and windows. I would like each tab to have a panel with its own state. This way, when I navigate between tabs, the panel will show the data relevant to that specific tab but not the other tabs. I can't simply re-build the panel everytime I switch tabs because then the user would have to reload the page again for it to re-intercept the web requests.
I've been scouring the internet for the last two days trying to figure out how to do this and I can't even find a topic relevant to it.
If you need any more info/code snippets let me know.

You can listen of the hide and show events for the panel and send messages to the panel's content script that can adjust the content there. See this gist for a basic example and of course read the extensive panel documentation.
The best way to think about this is, the panel is a single-page web app. When the user clicks on the button, send the right signals to the panel's content script so it can display the correct things. When the user closes the panel or the panel is closed for some other reason, send in signals to clean up and 're-set' the panel.
If your code depends on a request out to some other site or service, what I would do is:
default state of panel is a 'Loading, please wait' message or animation
on opening the panel, make your requests and then emit a message to the panel's content script with whatever data it needs.
on closing the panel, emit a message that re-sets the panel back to the 'loading' state, so it is ready for the next time the panel is opened.

Related

Nativescript TabView Loads only Once

I'm trying to build an Android & iOS app using Nativescript core (Javascript). Here in app-root.xml I've a tabview in which I've 3 tabs. Each of the tabs data are related with one another. Example in first tab I show a list of products with 'Favourite' option for each items, if I favourite a product it should show in the second tab. But in my app since the Tabs are loaded while the app is opened the changes are not reflecting when the tabs are selected. But If I close and open the application the changes are shown in the Tabs. Please tell me How I could re-load the tab each and every time when it is selected.
Thanks in advance. Apologies for my poor language.
Generally with web apps you will have a single container and a tab like view above / below container, tapping on specific tab will load correspondent tab item within the container.
But with mobile apps the TabView component loads all tabs on its own container, so it won't have to reload tab when you switch between tabs. That's totally the expected behaviour.
You may use services / BehaviorSubject etc., to hold the dependent data, so when you change it form one tab, the other tab gets updated too.

Display a web page in a container, scroll, switch to next

I have a list of urls I need to show on a screen for a presentation. After the page have loaded, I want to scroll to the end of the page, and when it's reached load the next one.
The problem is, most of those pages have 'X-Frame-Options' to 'sameorigin', so I can't use iframes. What other options do I have ?
I thought about, maybe, a chrome extension will complete rights over navigation that would handle the whole process...
Thanks ahead.
So, the solution was indeed to build a Chrome extension. Only the software containing the page gives you that much control over it when you don't have access to its code - namely, the browser.
I built a very simple extension using chrome.tabs in the background to open a new tab or update it, injecting a script in the page whenever it's loaded, and using messaging to inform the background when scrolling is finished and it's time to load a new page in the list.

WordPress timeout error ('Articles' admin link + WPML)

In my WordPress admin when I am inside a single article in the admin panel, and I click on the 'Articles' link on the left menu, I get my a timeout in my browser. This is very strange, because it happens ONLY when I click on that link inside an article: it doesn't happen when I click it from other sections of the panel, as when I'm in the dashboard or plugins section and I want to go to articles.
The second error I receive is when I click the 'Duplicate' button inside a post to translate that content in another language. The result is the same, 5 minutes loading and timeout error which leads to crash of the browser.
All plugins are updated, as well as the WordPress version. I have already tried to disable and activate each plugin one by one and this error comes anyway, also with all plugins disabled!!
I think it's not about WordPress version or plugins but it's like there's something which the system can't manage loading inside the article...I really can't figure out any solution.

Tabbed Page layout lost state when when refreshed

We have designed the application with tabbed pages layout.
Tabbed Page Style
the tabs are page and are created on click of menu, these are and added in parent container as child DOM element,it is a new form which has input elements,we could have many tabbed pages at a time. my application is in Spring MVC ,PostgresSQL ,Jquery.
What happens when refreshed, lost all the added dynamic new tabs (tabs are pages and we lost the current state).
I could share the reference code if required.
Please suggest how could I manage the state of application.
Window reload/refresh is a pure browser event that ends the execution of the page, you can't really have script continuity after it.
One option is to attach an alert to window.onbeforeunload informing the user that the content will be lost if they reload - this will work with closing the window and refreshing it.
If, however, you need to be able to reload (eg, to load fresh data in the tabs) while preserving tabs, you can use window.onbeforeunload to prompt the user whether they want to save the data/layout before closing, and if so, execute an AJAX call to the server, where you save the tabs (associating it with the session). This would mean that on loading the page you need to first check if there is tab data associated with the session, and load from there.
Other option - and this would be my preference - is to use window.localStorage to save the data on user's disk, and on page load check if there is data in localStorage. It has pretty wide browser support at this point, and there are good libraries that make using it a breeze. I have used store.js and can vouch for its ease and reliability.

Will Firefox start my SDK extension automatically after the browser starts - loading screen

I am new on add-on development using the SDK.
I want to ask you guys if it is possible to start my extension automatically after I open my browser? At the moment I starts after I press my widget icon in the toolbar (the panel shows a table with some data I get from the DOM).
Another thing I want to ask you: is it possible to show a loading screen (like a ajax gif) inside my panel (my extension needs a few seconds after switching a tab, to get the DOM data) every time I press the toolbar button.
First of all: One question per post, please.
Extensions are always started with the browser. When it comes to SDK add-ons, your main.js will be called. It's your job to perform any additional initialization form there.
Panels contain regular HTML pages and therefore can use images.
It's impossible to tell you more, without you providing more details and the code you got so far!

Categories