Im writing a browser plugin that needs to store a time variable specific to the user. Only thing is the js file which needs the data is "on every page" and cant really do local storage.
I need some direction for some alternatives for this.
Let me explain a little further how things work.
Plugin Structure
The plugin calls a javascript file from my server on specific websites - called appScript.js
appScript.js is our main file and places an image on the chosen websites. When the image is clicked it calls an iFrame called iframe.php which has a main.js file with it.
From the iFrame users connect to facebook and we pull their facebook ID and send the information to a php script which stores some data on a mysql table. Each users informations is located on the mySQL using their facebook ID as an index.
appScript.js needs to save a variable specific to the user.
My thought of alternatives
Store data locally - when i use local storage on the appScript.js it stores the data specific to the url and thus cant be accessed when the appScript.js is called on a different url.
Store it on my server - It is possible, but hopefully theres a better route to go down because I want the plugin to affect browsing speed as little as possible unless the image is clicked and the iframe called.(South african speeds aren't too quick). How it would work is it would have to connect to facebook, call the users ID, then send it to the server, wait for the response and then act on it, this could take time and slow down users browsing experience.
Store the data on the iFrame.php some how - well i need the data before the iFrame is called, so that cant happen.
I thought of dynamically loading an invisible iFrame onto the page which could use local storage because it would save it under my servers URL and thus be accessible on any page. Only issue is that i havent successfully been able to call data from a variable held on the iFrame with the appScript.js which isnt in an iframe. (if this in possible could someone maybe point me out to a working example. I've read up code but havent been able to implement it successfully)
I'm stumped - what else can i do? any ideas? i've run out of keywords to google and techniques to learn.
With Userscripts (GreaseMonkey, etc) there is a functions called GM_setVlaue, GM_getValue that will save (and get) values in a script-specific way.
If you don't want to use userscripts, you could look at the plugin source and see how they load/save values behind the scenes.
Related
I am using this template for my website and was trying to implement PWA but then realized if I use the code that prevents url sharing the PWA does not work offline. I know this is because the url is not Cashed but I cant cash it because it is based off of the time the page is open'd. Does anyone have a fix? The tutorial I was following is here.
If you want to see my site here is the link.
The problem is the hash fragment. This part of the URL is not passed to the server and therefor not passed to the service worker to cache.
The initial solution I would suggest is to create a current or last response object variable in the service worker within your fetch event handler. Keey that in memory and overwrite it as new documents (HTML) is requested (no need to do this for CSS, scripts, images, etc).
Then when the user wants to do the action you want to cache the current page you can post a message to the service worker to then cache that request. Because this is not really a true response and tied to a timestamp, I would probably cache the page as data in IndexedDB with a timestamp associated with the record.
Not a simple and clean solution, but your problem requirement is sort of an outlier that would require a more complex solution than most.
I am fairly new to javascript, I do know basics. I am looking to build my own (from scratch) java script library just like google analytics.js that will track user behavior on websites. Basically I'm looking to collect data like
Click through data
Dwell time
Page hits etc..
I spent lot of time trying to find website/tutorials to get me started on this but I keep ending up on google analytics.js or some private tools.
What I am looking for :
Is there any good starting point/resource/website which can help me build this js library
Are there reference for archetecture of end to end system including back-end?
Any open-source library that I can directly use?
Some things I already looked into
Chaoming build your own analytics tool
Splunk BYO analytics
At it's most basic, the architecture of such an application would only require a client, server, and database.
You can use basic javascript functions to record specific user actions on the frontend and then push them to your server. To identify your users you can set a cookie with a unique id. Then, everytime you send data to your server, you will get the specific user request as well so you can keep track of their actions. (Be careful of privacy laws first though).
For page hits, simply send a response to the server everytime someone opens your site - so call this function as soon as your Javascript loads. On the server, send a request to increment the appropriate value in your database.
For user dwell time, write a function that records the date when the user first hits your site and then count how long they stay there. Push your data to the server every so often and save updates to the user record by adding the new time spent to the current time spent. You could also watch for when a user is about to exit out of the site and then send the data all at once that way - although this method is more fragile.
For clicks and hovers, set up onclick and mouseover event handlers on your links or whatever elements you want to track. Then push the url of the link they clicked or whatever data you want - like "Clicked navbar after 200 seconds on site and after hovering over logo`.
If you want suggestions on specific technologies, then I suggest Node.js for your server side code and MongoDB for your database. There are many tutorials out there on how to use these technologies together. Look up javascript events for a list of the different things you can watch for on the frontend.
These are the building blocks you need. Now you just have to work on defining the data you want and using these technologies to get it.
Im kind of new to this and looking to expand pulling API results and displaying them on page, whether it's from a blog resource or content generation.
For example, I want to pull from VirusTotal's API to display returned content. What is the best way to capture that in an input tag and display it in a DIV. And what if it were an option to pull from different API's based on drop down selection?
An example of the API to pull content would be here https://developers.virustotal.com/reference#api-responses under the /file/report section.
To call the data from the API, you need to send a request. However, there is a problem with CORS. Basically, you can't call the website from inside your web browser from a page on your local machine, because your browser blocks the request. The web browser will only allow calls to and from the same server, except for a few exceptions.
There's two ways to approach this.
The simplest one is to make a program that calls the API and outputs an HTML file. You can then open that HTML file to read the contents. If you want to update the info, you would need to run that program once again manually. You could easily do this building off the python they provided.
The other, little bit more complex way, is where you host a server on your PC. When you go to the webpage on that server, it sends a request to the website, and then provides the latest information. There's tons of frameworks and ways to do this. For an absolute beginner on this subject, ExpressJS is a good start. You can make a hello world program, and once you do that you can figure out how to call the API whenever a page is loaded, and display the results.
Say I have a java/spring/jsf/jsp web application. User fills all required fields, chooses all the options, clicks generate report, spring beans do their job, database is queried for information, and user is directed to a "report" page generated according to entered information. I am looking for a way to save that page to be accessed later by link - kind of a share current page link. One example of this might be jsfiddle.net where you can enter information, save it and get a shareable link.
What i thought of, having my current knowledge, is saving some kind of url extension hash along with currently displayed page properties to database and query database for that information when someone accesses www.websiteUrl.com/extensionHash but making a query everytime someone accesses the extension seems kind of heavy on performance. Another way could be saving whole html page or just the content part on the server and serve later on request.
What is the most simple/productive way of doing this?
This is one option instead of link :
What you can do is you can load the required data for that report from database when your application starts, put the data in Application Context ( ServletContext in Java ) and whenever you want to get the information, instead of making a database call, you get that from Application Context.( so basically its like you are loading from cache) this way your perfomance is improved.
in java, You can achieve that by implementing a listner class.
Downvoters : please specify the reason.
I'm working on a website that is going to be offline. All the html files will be in a folder stored on the hard-disc. I've managed to do 90% of the work and the last part I have no idea of. Here is what it is:
I have stored a list of products in the localStorage as various strings under the keys - like buying objects and it goes to the cart, the cart objects are in localStorage. I created a page that showed the list of all the products in the localStorage. It can be cleared if the user clears them. Now I need to create a page where all the objects that was selected before, regardless of the localStorage being cleared, show as list in this page. You can take it as the page that lists products that have been ordered in the past, i.e even after the cart is cleared the products will show in the past-orders page.
I do not know any server side codes, I did everything using JavaScript as it was supposed to be a simple project, but I'm stuck at this part. So I cannot use PHP or anything to generate files or use a database to store stuff.
Here's what I thought but I don't think it works but wanted to confirm if it does or not:
Generate an XML file or a .txt file and store it in the drive and then clear the localStorage. But I don't think it is possible. If its possible just using JavaScript please point me in the right direction and I'll research and come up with something.
P.S. the website will be entirely offline what I mean is the users will never connect to the internet for this to work. Also there won't be a server or localhost.
Thank you!
The site is completely offline, but functionality is similar to an eCommerce site. You click a button and some content from the website stores in the localStorage and I have to call it in multiple pages, when a user clicks another button, localStorage clears but whatever was selected before must be available without localStorage. Hmmmm.. Consider a quiz site where you answer everything and when you take a new quiz, old scores will be stored somewhere else and it won't change when you take a new test.
Is it possible to attain this functionality without a server side script? It seems the final-targeted-users won't know how to install any softwares that can provide a localhost or a server or something like that.
Client-side, browser's JavaScript runtimes don't have local file system access excepting a very limited one when uploading files to a remote server, and anyway, browers won't give you direct access to the file.
You'll need some kind of server-side logic behind the scenes if you want full I/O in the local file system.
Perhaps you can take a look at NodeJS, a server-side JavaScript runtime that can work as lighty Web server on either small and large projects, and it has built-in server-side JavaScript I/O functions.
Otherwise, you're absolutely stuck in the client-side Web browser's sandbox limitations.
U can refer documents of knockoutjs and NodeJS.. That would probablky help... A far as my knowledger is concerned NodeJS does contain a way to handle your problem.