I'm working on a browser extension for React DOM. This extension has a "Profiler" UI which measures render performance for React components. I recently added screen captures to this Profiler so that it can show images of the DOM each time React updates it.
To do this, the extension calls chrome.tabs.captureVisibleTab in response to a request from the DevTools extension UI. (This request is made each time React commits changes to the DOM.)
I've required the <all_urls> permission for now, based on the documentation for this API, which says:
You must have the <all_urls> permission to use this method. (Alternately, Chrome allows use of this method with the activeTab permission and a qualifying user gesture).
(The Chrome documentation for this API doesn't mention either way.)
In my experience, I am able to capture the screen after updates caused by e.g. clicking on an anchor element. However, other types of updates (e.g. "scroll" events, programmatically calling click() on an element) fail with an the following error being logged to the background script:
Unchecked runtime.lastError: Cannot access contents of url "". Extension manifest must request permission to access this host.
Is the documentation wrong about this API? Have I defined my permissions incorrect? Any help would be appreciated!
Related
Inside my app, I'm using the WKWebView to display a website. My goal is, when user is pressing a button on this website, I want to stop an action linked to this event and replace it with my own, natively made (custom action outside the WKWebView). I've been trying to search for any solution to fetch mentioned event but unsuccessful. What more came to my mind, if there is a way to fetch a JavaScript in WKWebView, I have a possibility to add some JS script code to this site (not to delete the action I want to block). Thank you for any help.
First, do you have a permission to mess with this web site's behaviour? I assume you do, otherwise it is likely illegal.
Second, try using Safari Web Inspector with a device/simulator, and use the DOM tree and console tools to find out what is the HTML/javascript that is involved with this action on this site.
If you can't find what happens in HTML/JS yourself, feel free to post a new separate question on SO with your target URL, some HTML/JS code, and which link/action you want to replace. Tag the question with "javascript" and ask if it is possible to write some javascript to replace that particular action to some custom JS code.
Usually there are 2 types of actions: either it is something that provokes AJAX calls to a server API triggered by an event handler, or it is a plain HTML link that results in a web navigation. For both cases it is possible to write a JS script that overrides the action.
Finally, use WKUserScript to inject javascript into the page, and override the action. Use window.webkit.messageHandlers to send an event from your custom action to the app side. Use WKScriptMessageHandler to process the event in the Objective-C or Swift code.
See an example here: http://nshipster.com/wkwebkit/
I have an elm app that incorporates logging in and fetching data from a server. Once I've logged in, I navigate to /#/pages/13 and it updates the model with page id 13. If I click around within the app, I see evidence that that page persists in the model.
When I navigate away from that page via internal links, then enter http://localhost:3000/#/pages/13 into the URL, I still see that page.
If I enter that URL while I am at that location, it seems to treat the behavior as a complete refresh, resetting the model...including my token, so it logs me out.
How can I enter the same page into the URL without elm resetting the model?
(If it matters, I am using gulp)
That behaviour seems to be by design, although I didn't find an official source for this.
The most you can do is register a beforeunload listener, which might show a prompt allowing the user to cancel the navigation.
Related: https://stackoverflow.com/a/34415095/2014893
I am trying to create a web page which will allow my user to upload a file to my S3 storage. For choosing the file user can use Google Drive, Dropbox and also local system. Am facing issues while implementing the Dropbox part of this.
Am using this technique for integration(using core API and OAuth 2).
First when user chooses Dropbox i am opening an HTML page in an IFrame. Here I have an authorize button which will open the authorize endpoint mentioned in the above link. This link shows me X-FRAME-Options error inside the Iframe so i had to open this link as a popup to work.
Is there a way around this? I'd like the authorize URL to open in the same iframe by using location.href.
Also when i open it as a popup, after the user logs in successfully the redirect_uri which i pass i getting opened in the popup. I had to do some unconventional setInterval coding to go around this. Can someone suggest a solution for this as well?
I also tried using CSRF tokens as mentioned in Smarx's blog but this also gives me the same error.
EDIT :
#smarx i tried using dropbox.js and it works fine. Stuck at one place
I used the OAuth popup driver and have a button which says sign-in.
First on load i create the client and then the popup driver as below
client = new Dropbox.Client({ key: client_id });
client.authDriver(new Dropbox.AuthDriver.Popup({
receiverUrl: "http://localhost/uploadCare/dbcallback.html"
});
);
And in the call back html i am writing
Dropbox.AuthDriver.Popup.oauthReceiver()
as mentioned in the docs.
But this does not take me back to the original page and show me the list of files.
I particularly did not understand this part of the explanation
"To use the popup driver, create a page on your site that contains the receiver code, change the code to reflect the location of dropbox.js on your site, and point the Dropbox.AuthDriver.Popup constructor to it."
Could you please help me out here.
You definitely can't put dropbox.com into an iframe, for security reasons (e.g. clickjacking).
A few suggestions:
Can you just use the Chooser for your use case? That would certainly be easier for you and your users.
If you can't use the Chooser, is there a reason you're not using dropbox.js? It has a popup auth driver that will pretty much just take care of all this for you. The redirect will definitely happen in the same window as auth, so communication between the windows (usually via localStorage) is generally necessary. This is already done in dropbox.js.
tl:dr -> User notification system on website. Can you avoid the need to call a javascript script to render notifications after ajax loads? (a base view that calls it would work, but there are no base views afaik)
I am looking for a way to add a User Notification System to my website. Such system would be responsible for displaying messages like 'Import success', 'Import failed', 'Session timed out' etc.
I know similar questions have been answered before, but here's my question:
How should I do it to get as close as possible to having the notifications display themselves as soon as possible after being put to TempData? Having them rendered on _layout page would work, but only for requests that ask for whole page. What about loading only parts of website through ajax -> can I avoid having to write JS script in ajax callbacks or partial views?
I am looking for something to prevent writing multiple calls to same function.
Toastr is your notification Friend. Demo Page
you can install it from Nuget Install-Package toastr
See my SO question - for reference
I'm using a before_filter to detect the signed_request query string Facebook generates when a user is referred to a canvas app.
Then, I set session[:canvas] = true and test for that when I need different app logic based on whether the user is in the canvas or on the native browser app. The problem is that if the user, for any reason, leaves the canvas and navigates to the browser-based app, the session[:canvas] variable is still set to true.
Is there a better way to detect the difference between the canvas and the native browser app?
I personally like to use an "alias" url for the Facebook app, e.g. use fb.mysite.com instead of www.mysite.com in the app settings and set things up so that the two domains point to the same place. Or something similar can be done with directories, e.g. www.mysite.com/fb/ pointing to the same place as www.mysite.com/ but giving an easy way for the code to determine if it's a direct access or from an app.
Using a session can work too, but you have to add an additional javascript check in the case you are currently in "app mode" (canvas==true). The javascript just checks to see if the page is inside an iframe, and if it is not then it redirects to something like www.mysite.com/thispage?app=0. Your pages should check for the app=0 parameter and clear the session if present (or set canvas=false). This way, if a user starts out inside Facebook but then visits your site directly, things automatically get adjusted correctly.
Instead of storing this information at the session, check for the existence of the signed_request parameter, if there is no parameter, it possibly means the user is not inside the facebook app anymore.
I might be completely wrong, but doesn't Facebook access your canvas content by a POST instead of a GET request? Wouldn't that be the easiest way to distinguish where the request came from?