So, I am making a Chrome extension that connects to an external server and allows you to chat with other users of the extension. However, the way my extension is set up right now is with a start page (the initial popup), and then a button that takes you to the chatting page.
I want to figure out a way that allows the extension to stay on the chatting page after the user passed through the start page already. Moreover, I want the chat's messages to be saved as well.
I know I can do this by using Chrome.pageAction.setPopup(). However, I don't if this is the way to go about. As for the messages, I am not sure where to start, do I store them in Chrome localStorage? what are the ways I can go about doing this?
I apologize if this is a trivial question, I am new to all this.
Related
Is it good to allow webpages to load directly from browser url field or browser back buttons?
Our webapplication is working fine if any user navigates through home page, but some users are directly accessing the web url in the browser and raising issues that it is not working fine.
Can you please suggest do we need to support loading the urls through browser or allow to navigate through home page?
Some banking websites gives a warning saying to do not use browser urls or browser buttons to navigate between pages i.e. they will warn to do not press browser back button to navigate to previous page etc., so is it correct idea then?
Yes! Ideally, you should let your users use the links directly and have the website function as usually does. This is ideal if they use, for example, their "recent webpages" functionality on their browser, they want to revisit some page from their history, or they visit the webpage so often it appears on their recommended webpages list (This is a functionality present in some browsers, such as Chrome).
A good way to achieve this is query parameters.
Overall, you should expect your user to access the website from other places than the homepage, and have some logic to handle it in such a webpage that the website doesn't become broken.
However, there are some situations where it's just impossible to have the website work as expected without some previous action done by the user (For example, filling a form or being authenticated. In some cases, your user might need to be authenticated to visit a specific link, and ideally, because of security, user sessions should eventually expire). In this case, having safeguards that redirect the user to some previous page where they can begin their flow again (Such as, the login page) is better than nothing.
How to implement this depends a lot on the stack being used (Programming navigation varies between React and Angular. You might not even be using a library or framework at all!). More context would be needed to suggest an approach.
A little background here, my team and I are currently developing a web extension that needs to know what URLs a user went through to arrive at the page they are currently on. https://www.ayima.com/us/insights/seo/redirect-checker.html does exactly what we need it to but their source code is not available online. Is there anyway to leverage the functionality from an extension in another extension? Or is there a better way to go about this using a Node library? document.referrer would only give me the last URL they were on, but I need every redirect a user went through, and in our use case it can be 3 or more URLs.
I have an application that on load makes certain requests to backend to fetch data.
On the other hand, I have a web extension that basically modifies the behaviour of the browser's new tab so that when a user clicks new tab my application opens up. It's a productivity tool and users want this. The web extension is mostly an iframe that opens the application inside.
The problem I have is that every time a user clicks new tab, since the app starts loading in the new tab, a request to fetch the data from backend is made independently of if the user really wants to browse through the application or just navigate anywhere else with the new tab. In other words, 95% of the time the users just click new tab to browse and not to see my app. Obviously, this adds a lot of useless load to my server that I want to control.
What I do now as a temporary solution is to store the data in the localStorage, so that when a user clicks new tab, the data is loaded from the localStorage and can immediately be browsed, while I delay the fetches from backend to 12s. 12s because I figure it's enough time to click new tab, make a google query and navigate away. This reduces the load a lot, but obviously, delays the refetch of data for everyone for 12s.
Since the app can be used from multiple devices, delaying the synch for 12s is quite annoying.
Can you think of a better solution? (Obviously, I have no way to know if the users click newtab to see the app or to browse away, actually, not even they know!! so it's a tough one.)
Of course I already added a button to allow users to manually refetch on demand, but it's not a good solution UX wise.
Another way to minimize the load would be to just add the delay of the fetch to those requests coming from the web extension. But since the web extension is just an html that loads an iframe with the website, which ultimately makes the request, I'm not sure if there's a way to know if the request comes from the web extension at all. Is there?
Thanks!
I'm building a web-app that uses the device's camera and location services. The browser (I'm sticking to Chrome for now) asks the user for permission to do so on the page where the service is used.
I want the interface to be able to ask for permission at an early stage in the workflow so the pop-up dialogs don't come up during the use of the app. I know they would go away after the first visit to a page, but I want to avoid it the first time too.
Javascript is pretty much the only tool I know how to use, and I know each page has a separate Javascript execution context, so I can't get references to the objects on one page and hand them over to another.
So is there a way that will work? Maybe I need to learn some other technology?
If you need to do it in the browser, then I would suggest creating a sort of initialization page before going to the actual app page.
In the ini page you can call all permissions and download+cache all needed app scripts and also validate which permissions were accepted and not. Kinda something like when using GMail you go through their ini page first before getting to the actual GMail ui.
Once the ini page has completely loaded simply redirect to the actual app.
If you want to do it outside the browser and still use the same web technologies, take a look at Electron or NW.js.
Both tools above lets you build cross platform desktop apps with web technologies. Things like asking for camera and geolocation can be done without user permission (as I recall. not sure)
I wonder how sites like SoundCloud work: you play a song and it keeps playing even if you move to another page without stopping
Any suggestions?
The only way I can think of is to build your app, or at least the parts of it that need to bo continuous, as a single page.
In practice, this means that only one HTML document is loaded. When, say, a link is pressed, the browser action is intercepted and prevented and the browser behaviour is faked by javascript.
Consider a website consisting of pages A and B. Normally, when a link pointing to B is activated, the URL is changed and the browser calls the server, requesting B. In a single-page application, however, this is interrupted by a javascript function, which changes the URL using the History API, and then displays B in a way that doesn't require a new document being synchronously fetched from the server.
There's a couple of ways to do it.
Navigate to a new page
If you do that, a whole new JS execution context is created for the new page, so you can't keep the function running. What you can do however is to "resume" execution in the new page. For this you need to save the state of the old page either on the server or in some client storage that persists between page changes (cookies, localStorage, etc).
Fake navigation
This is the most user friendly way - you turn your website into a web application. You no longer have multiple pages, so when user wants to change what he sees in the browser (like go to a new song), the app simply changes the appropriate area with the desired content. This is a complex topic that should probably be researched in itself, not explained in a SO answer. Go ahead and google "single page application" and you should find plenty of resources for it.
Technically you never change the page when you are using souncloud. You always stay on the same page and only the parts get changed which are actually changing, so you never reload the whole page. That's why they can keep the music playing: They just never remove or change the actual player. If you are wondering why the URL in your browser is changing if you never leave the page: They manipulate your history entries.
If you are interested in creating an application that behaves similar you should checkout frameworks like Ember.js or Angular.js. TodoMVC Gives a nice overview of those frameworks.