I'm starting to experiment with Puppeteer and it looks great for some of our needs to create screenshots and PDFs, but I'm trying to determine if I can use it to access features a user has drawn on a map (we're using OpenLayers but also applies to Google Maps, Leaflet, etc).
Example:
I can get a PDF of https://openlayers.org/en/latest/examples/draw-and-modify-features.html but have no idea where to start with (or if I even should use) Puppeteer to capture what the user has drawn or if they've re-centered the map or anything else.
Edit:
Added Example Image of User Interaction. Can I capture the elements drawn with Puppeteer or would I need to save and remake them through Puppeteer commands if doing a PDF with Puppeteer.
My (still growing) understanding of Puppeteer is that you have to remake the user interaction. This can be done by saving the features (to a cookie, file, database, etc.) and recalling them in an on load type event that is called when you want to use Puppeteer. But since Puppeteer sends a new request to the page from the server it doesn't know about what the user has done at that point.
Related
I want to create a web app(for practicing my skills) that will help in conducting online exams. So I want to ask that is there any way to find out the following things---
Is there another page opened in the chrome (if yes then which)
Is there is another application running in the background (if yes then which)
Is user switching between tabs/applications/desktops etc.
Basically, I just want to create an app that just keeps track of users' activity when the user is giving an exam.
And if you have any of the solutions to the above problems then please tell.
Since most things you want to access are considered private data, it is not directly possible in a Web App, except the page visibility. But you can write a browser extension, which is at least allowed to access data within the browser. For information beyond the browser you should consider a native application or some embedded solution like React Native, Xamarin, or Electron, to name a few.
To get the info if the user is currently using the tab your Web App is running in, use the Page Visibility API:
https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
For accessing information about other tabs and browser internal stuff, write an extension:
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API
We have a Microsoft Access App we use out in the field when inspecting properties. We are building/adding an embedded.html file that uses OpenLayer to display a map showing our current geolocation and our destination. After we finish an inspection, we select the next property in our route list and it's highlighted on the map.
How do we communicate the selected property to the embedded map without reloading the map each time?
Mockup: http://i.imgur.com/zOCIXpe.png
Current Solution
Currently, we embed the map using Access's web control. Each time we select a record, Access reloads the embedded map and passes the upcoming property via an append to the URL.
Pseudo Code URL: C:\Applications\Inspection App\map.html?highlight:address123
This is very slow, especially on the road where we use cellular data.
Desired/Potential Solutions
Our goal is to pass a new property to the embedded map each time we select a new record without reloading the map.
Two hypothetical options I'm aware of are:
Designing the .html file and passing the URL in such a way that that full page isn't reloaded.
Using Microsoft Access Visual Basic to pass a message to the .html file that it can use.
My company uses MS-Access extensively and I embed OL3 maps in pretty much all of the applications we use.
The method I use to communicate with the map without having to refresh the page is to write a JavaScript function that MS-Access then executes, either by button press, tab change, etc...
Assuming your Web Browser Control is called "WebBrowser", this would fire the specified JavaScript function.
Private Sub ExampleButton_Click()
WebBrowser.Object.Document.parentWindow.execScript "javascriptFunctionYouWishToExecute(" & Args & ")", "JavaScript"
End Sub
I've yet to find an elegant solution to get the reverse working, other than writing to a hidden HTML div and having MS-Access read that via a timer.
I'm developing a Chrome application where I want to do basic stuff with currently downloaded files(mostly I want to move them to a new location using an application or extension whichever is possible).
I'm able to get access to the image, audio, video file using the mediaGallery API of Chrome apps. Is there a possible way I can get access to and being able to move other format file from their current location to some other location using Chromium apps?
You certainly read the contents of any directory that the user has given you access to. And, once the user has done this, you can retain the entry so on subsequent executions you don't have to keep asking the user to select the directory. Then, once you have a file, you can use the file API to manipulate it.
This is in principle all the media API does, except that it comes with knowledge of some built-in media directories.
I am building a site that can take web page screen capture of the given URL, and then output a image URL. There have been so many services like this, but I am curious about how it works.
Initially, I guess I have to execute a browser on server-side, feed the URL given from client. The browser then load the URL, after that, wait for a few seconds for executing javascript because some pages cost time to perform its UI, like Trello. In the end, call certain API to capture that page.
I made up my mind to using the open source browser, Chromium. Even so, I still have doubt about if I am doing the right thing.
Questions
Does my direction right?
I am wondering how to execute a long-live Chromium browser on my server.
Is there a shell I can control Chromium in command line?
Chrome has a built in API that may meet your needs "captureVisibleTab":
chrome.tabs.captureVisibleTab(integer windowId, object options, function callback)
Captures the visible area of the currently active tab in the specified window. You must have host permission for the URL displayed by the tab.
http://developer.chrome.com/trunk/extensions/tabs.html#method-captureVisibleTab
I'd like to try my hand at some Chrome Extension Development. The most I have done with extensions is writing some small Greasemonkey scripts in the past.
I would like to use localStorage to store some data and then reveal the data on a extension button click later on. (Its seems like this would be done with a popup page)
How do I run a script everytime a page from lets say http://www.facebook.com/* is loaded?
How do I get access to the page? I think based off my localStorage requirement I would have to go down the background_page route (correct?) Can the background page and popup page communicate across the localStorage?
UPDATE:
I'm actually looking to learn the "Chrome way". I'm not really looking to run an existing Greasemonkey script
Google actually has some pretty good documentation on creating extensions. I recommend thoroughly reading the following two articles if you haven't already done so:
http://code.google.com/chrome/extensions/getstarted.html
http://code.google.com/chrome/extensions/overview.html
If you want to give your extension access when the user browses to Facebook, you'll need to declare that in the extension's manifest.
Unless you're wanting to save data beyond the life of the browser process, you probably don't need to use local storage. In-memory data can just be stored as part of the background page.
Content scripts (which run when you load a page) and background pages (which exist for the duration of the browser process) can communicate via message passing, which is described here:
http://code.google.com/chrome/extensions/messaging.html
Overall, I'd suggest spending some time browsing the Developer's Guide and becoming familiar with the concepts and examples.
Chrome has a feature to automatically convert greasemonkey scripts to extensions!