Missing 'onload.js' file breaks Chrome Extensions OAuth - oauth

I am going through the process of updating a Google Chrome extension from Manifest v1 to Manifest v2. I won't say that things have been going swimmingly, largely due to outdated documentation at Google's own Chrome Extensions website.
Here is the latest:
Google's documentation for using OAuth from within an extension tells me to include the following three files in my manifest:
chrome_ex_oauth.html
chrome_ex_oauth.js
chrome_ex_oauthsimple.js
The first of these files, chrome_ex_oauth.html, is basically the redirect page that is opened when an extension first uses OAuth to get an initial request token. In the updated version of this very spare webpage, the head section lists three javascript files to load: the two listed above, and one called:
onload.js
When chrome_ex_oauth.html is opened by my extension, I get no indication of errors beyond a failure to load the non-existent 'onload.js' file. Clearly, I am missing something here. The OAuth sequence never succeeds in completing, and indeed there is no indication that it is ever initiated.
Does anybody know what I'm doing wrong?

After posting this question, I compared the old and new versions of chrome_ex_oauth.html. I saw that in the former, while there was no mention of the onload.js script, there was the following in the head:
<script type="text/javascript">
function onLoad() {
ChromeExOAuth.initCallbackPage();
};
</script>
This function was called inline:
<body onload="onload();">
...
As of Manifest v2, it is my understanding that inline javascript is strictly prohibited, so this couldn't fly. A call to load onload.js was added to the document head instead. It looks as if a link to the actual file in Google's documentation was overlooked. It's easy enough to write, but here is what I put in onload.js:
window.onload = function() { ChromeExOAuth.initCallbackPage(); };
After that, the redirect worked just fine and I was able to complete the OAuth process.
Let me know if it doesn't work for you.

Related

Google reCAPTCHA v3 can't find any token

So it's the first time I'm trying to use the google reCAPTCHA v3 (actually it's the first time I'm using any kind of captcha).
I followed the documentation and a very basic tutorial.
What I understand is that I should be able to see the token in my browser inspector.
The first issue is that i can see the logo on the bottom right of my screen, but there is definitely no token in my input.
The second issue comes from the browser console which indicates 3 kind of errors.
I'm working with Symfony Framework on a local environment.
Any clue would be much appreciated !
My twig & javascript files
Browser screenshot
Content-Security-Policy issues
So i figured out how to get the token....
I just had to remove those lines in the js file:
function onclick(e) {
e.preventDefault();
I still didn't find about the Content-Policy issues.

Cordova white screen of death iOS - browserify, react, cordova

I have a strange situation with a project for iOS.
Its created using browserify and React for Cordova and aimed at iOS.
We have built the project for iOS using Cordova commands without any issues. It runs with no xcode errors or Javascript errors either however none of the JS ui appears on screen. We just get a blank white screen with the system bar at the top. See attached screen shot.
So far we have found out that if you add HTML to the index.html in WWW folder it prints that fine so I assume its the JS.
When we run in a browser it works as well as building for Android.
We have no problems with anything other than iOS (simulator and device build).
hopefully someone can help me out here because I'm stumped. Please let me know what files you need to look at and I'll make them available.
Thanks in advance.
IMAGES
The error screen: http://www.voidapplications.co.uk/errorScreen.png
What we expect to be shown: http://www.voidapplications.co.uk/whatWeExpect.png
If you are using internationalization component that's because you need to use the Intl polyfill:
Intl.js and FT Polyfill Service
Intl.js polyfill was recently added to the Polyfill service, which is developed and maintained by a community of contributors led by a team at the Financial Times. It is available thru cdn.polyfill.io domain, which routes traffic through Fastly, which makes it available with global high availability and superb performance no matter where your users are.
To use the Intl polyfill thru the Polyfill service just add one script tag in your page before you load or parse your own JavaScript:
<script src="https://cdn.polyfill.io/v1/polyfill.min.jsfeatures=Intl.~locale.en"></script>
When specifying the features to use thru the polyfill service, you have to specify what locale, or locales to load along with the Intl polyfill for the page to function, in the example above we are specifying Intl.~locale.en, which means only en, but you could do something like this:
<script src="https://cdn.polyfill.io/v1/polyfill.min.js?features=Intl.~locale.fr,Intl.~locale.pt"></script>
note: the example above will load the polyfill with two locale data set, fr and pt.
This is by far the best option to use the Intl polyfill since it will only load the polyfill code and the corresponding locale data when it is really needed (e.g.: safari will get the code and patch the runtime while chrome will get an empty script tag).
source & other ways to include Intl polyfill: https://github.com/andyearnshaw/Intl.js#getting-started
You can debug the UIWebView in the simulator with Safari http://moduscreate.com/enable-remote-web-inspector-in-ios-6/. You'll probably see a big error message in the console, if not you will have access to the debugger so you can step through and sort it out.
I have had this issue in the past, it turned out to be unsupported javascript features. for example, setting default parameters in the function. I.e:
function test( myvalue=0 ) { /* ... */ };
I had to initialise the value inside the function instead. You could also try removing any ecma script 2016 features you may have implemented.
Trouble shooting this type of issue was painful. I created a minimal version of the smallest part of my product compiled and ran it on ios emulator, added another chunk of the product, rinse and repeat.
Im sure there's a better way to detect these issues, but I do not know it.

Cordova resolveLocalFileSystemURL success call back failing on iOS

I've just created a new project and installed the file and file-transfer api's via CLI. I have already created a working app previously so I know how to use phonegap and have been doing so for a few years now.
Here is the code:
window.resolveLocalFileSystemURL("file:///localhost/var/mobile/Applications/96B4705C-C70D-4340-9A42-HJ1F28355D43/tmp/cdv_photo_015.jpg", function(fileEntry){
console.log(fileEntry.name);
}, function(error){
console.log('about to resolve this files errors');
console.log(error.code);
});
Nothing ever gets outputted in the console debugging window ...and yes I have debug installed cause I have console.log() in other parts of my code that show up.
It seems like there is an issue when passing URL data from navigator.camera.getPicture() to the file API when using window.resolveLocalFileSystemURL()...any ideas anyone. I'm up to date on phonegap api and everything and I have this issue for the past few days now...I can't seem to solve it.
***EDIT***
Seems like when you use Camera.DestinationType.FILE_URI as a parameter for navigator.camera.getPicture(). When you choose a picture and the success call back for navigator.camera.getPicture() is triggered, trying to window.resolveLocalFileSystemURL from the URL that getPicture returns just fails. But if you set Camera.DestinationType.NATIVE_URI it at least returns something but it's in a format that can't be used with the file-transfer api exp: assets-library://asset/asset.JPG?id=220BCEAE-F1EA-4A6A-83B2-AB8833A90BF2&ext=JPG
Seems like this was a bug in the file api v1.0.0
https://issues.apache.org/jira/browse/CB-6116
Temp solution is there as well.
Seems like "/local/" was causing the issue. Remove it from incoming uri's if it exist and the resolve should work.

Impossible to cross site ajax api calls in a chrome extension?

I am trying to create a chrome extension that calls my rails app's api. currently the api returns json and it works fine, however when I try to build it into a chrome extension, it says :
Refused to load script from 'http://mysite.com/demo?q=hello?callback=jQuery16409466155741829425_1342489669670&_=1342489677171' because of Content-Security-Policy.
I looked up the document http://code.google.com/chrome/extensions/contentSecurityPolicy.html and it sounds like I can't do this unless I implement my site into a https version. (under "Relaxing the default policy" section) I am not sure if I understood correctly and it feels ridiculous to make such a big change just because of this. Am I misunderstood? Or is there a workaround to this? Thank you.
In a Chrome extension, cross-site XMLHttpRequests are allowed, provided that you define the source in the manifest file - see http://code.google.com/chrome/extensions/xhr.html.
A JSONP implementation loads an external script using the <script> tag, and inserts it in the document. Unless the source is whitelisted through the "content_security_policy" entry, JSONP cannot be used when manifest version 2 is active (do not use manifest v1 to overcome this, because it's deprecated, and a suitable alternative already exist).
When you're unable to receive a JSON response instead of JSONP, use an ordinary request to fetch the data, cut off the callback, then parse it. Eg:
// response is the response from the server
// Received through `XMLHttpRequest`, jQuery.ajax, or whatever you used
// cuts of jQuery....( and the trailing )
response = response.replace(/^[^(]*\(/, '').replace(/\);?$/, '');
By default browsers do not allow this because of the same origin policy.
However you can get around this by making a jsonp request.
As you using jquery this super easy with getJSON method

Firefox extension: Embed javascript in a webpage

I want to insert some script into every page, which have some functions that will be called by the modified HTML of that page, using a Firefox extension. I am able to insert the JavaScript into the head of the HTML, and also modify the page, but the java script functions are not called by the onmouseover event.
Does someone has any pointer on how to do that, using java script in local extension or as a online resource.
No GreaseMonkey, I need to do it with my plugin and not ask user to install greasemonkey, my plugin and the scripts.
Greasemonkey does this. It's excellent!
Make a Greasemonkey script. See Userscripts.org for lots of example ones to work off.
Why not use Greasemonkey? It allows you to execute javascript on any page on Firefox, and if executing the code you enter isn't good enough you could dynamically add links to the head, too.
you can modify the DOM using Firebug. I am not sure if you can load files locally.. sounds malicious. Also, you can just run arbitrary javascript commands in the Firebug console (a la python/ruby console)
There are some Greasemonkey-to-extension "compilers" (or extension-wrappers) out there:
Arantius's GM compiler
Gina Trapani's multiple-GM-script compiler
I've used the first one with extensive internal tweaking over time. However, I don't believe the compiler is actively maintained (default max-version is only 3.0), so may not be up-to-date with the latest GreaseMonkey, or FireFox.
I think Gina Trapani's is more designed for multiple scripts targetting the same domain, but I haven't used it.
Neither of these is a "GreaseMonkey solution" per se, as the end-user never has to install GreaseMonkey. They get a real-live FireFox extension. The core is very similar to GM, but you can change or add as much as you like.

Resources