How to access Evernote API in Firefox/Chrome extensions? - javascript

I am willing to fiddle with Evernote API and use it Chrome/FF extensions. What I learnt that so far no JS API available which makes me to think to make a middle tier service in php/python and let my extension to access Evernote via that service.
The place where I am confused is authentication. How do I make a user to authenticate with Evernote from a browser extension? If it;s showing a html static page which then redirects to EverNote Login Page and store access token etc at server side. How will my extension remember logged In details and make calls to service and create/retrieve notes in my Chrome extension.
The workflow of App is following:
User will be able to login on Evernote via Extension(by accessing page of Logging).
After successful logging notes will be retrieved via middle tier service in Chrome Extension via Ajax Request.
USer can then post note via AJAX call to service which will then eventually store in Evernote via its API
Please guide me.

There are no official javascript API. But you can find a few un-official ones.
Take a look here for example : http://discussion.evernote.com/topic/22476-api-for-javascript/
Don't know how they work however.
Here's another solution :
Not sure it's the right way to do it but you could mimic the way the evernote webclipper works.
Basically it uses a internal customerKey / customerSecret along with the username and password to retrieve an oauthToken. Then it uses this OauthToken for all api calls.
You can find the process in the Auth.js file of the webclipper source code.
On a mac, the file is located in /Users/%user%/Library/Application Support/Google/Chrome/Default/Extensions/pioclpoplcdbaefihamjohnefbikjilc/5.9.5_0/js/main/Auth.js
I don't know on other systems but it shoudn't be too difficult to find on Google.
Hope that helps.

Now you can find an official JavaScript library. (I'm not sure limitations of Chrome extension though)
https://github.com/evernote/evernote-sdk-js
I find it here.
http://discussion.evernote.com/topic/34619-how-to-access-evernote-api-in-firefoxchrome-extensions/#entry250743
The FAQ of the library says that
Can I test my code in the browser
Yes. You can test your code in Chrome. Open Chrome using open /Applications/Google\ Chrome.app/ --args --disable-web-security .

Related

How to add the Chrome account name to an HTML element

I'm making a "new tab" page just for fun and to learn.
I want to add the user name (if the user is logged in) to a element. I have no idea on how to do this
I'm not asking you to do my work, but to guide me and help me with some documentation.
EDIT: It is a chrome extension
Question could use a little more information BUT — Login / Logout Authentication for users is generally a bigger job than you would at first think.
Coming from a freelance web / app development background I generally consider an authenticated web app at least twice as complicated as the unauthenticated version of the same functionality.
You mentioned new tab landing page so probably you are going to be heavy into these docs on Chrome extension authentication:
https://developer.chrome.com/apps/app_identity
Here is a little bit more on Chrome app authentication: https://developer.chrome.com/apps/identity
From the above Chrome docs the steps your app needs to perform are:
Add permissions to your manifest and upload your app.
Copy key in the installed manifest.json to your source manifest, so that your application ID will stay constant during development.
Get an OAuth2 client ID for your Chrome App.
Update your manifest to include the client ID and scopes.
Get the authentication token.
There are some great resources already on stackoverflow relating to chrome extension authentication, specifically this one:
chrome.identity User Authentication in a Chrome Extension
It looks like there are also others working on this same problem:
https://gist.github.com/raineorshine/970b60902c9e6e04f71d
Hopefully that gets you headed the right direction. Welcome to stackoverflow!

Auth0 passwordless with google chrome extension

I'm using auth0 to authenticate users from my google chrome extension. in my main app I'm using passwordless and I want to use the same with chrome extension. I just couldn't find out how!
Here is the documentation that I'm following
You can make use of the auth0-chrome package, which also uses the Universal Login (previous "Hosted Pages"/"Hosted Login").
Note that you need to create a Native type application in your auth0 tenant and then provide that application's ID for the extension (in your background script's message listener).
The easiest way to read the repo's readme is to first read "Using the Library" (since that section explains the tenant setup and configuring the callback URLs, etc.) and then going through the "Usage" section (actual code examples).

Testing Chrome Extension APIs Locally

This is a pretty general question with a couple examples. I'm fairly new to writing chrome extensions and I seem to keep running into cases that are impossible to test without deploying to the webstore (which takes ~60m each time). This is an impossible workflow. Am I missing something?
Case 1 inline installation
Trying to set up inline installation from my site to a chrome extension. When I run the site locally i get the following.
Error downloading extension: Inline installs can only be initiated for Chrome Web Store items that have one or more verified sites.
But I cannot seem to add localhost website property in chrome's developer dashboard. What is the recommended way to do this in a dev environment. I tried using local.mywebsite.com and adding a local alias for localhost, but now chrome cannot find the verification file you are required to serve...
Case 2 Chrome Extension OAuth
Attempting to use chrome.identity.launchWebAuthFlow to setup user credentials in my extension for my website, but of course the callback url provided https://<ext-id>.chromium.org/provider-cb does not redirect to my local deploy of the extension.
Is there no way to test these things??
Regarding your error "Inline installs can only be initiated for Chrome Web Store items that have one or more verified sites.", you may follow the instructions given in this page.
You need to:
Go to the Webmaster Tools.
Add the site to your sites.
Obtain and embed a verification code into your site.
Complete verification in Webmaster Tools.
Go to your Developer Dashboard (must be under the same Google account) and edit your Web Store item.
Select your site in "Verify that this is an official item for a website you own:"
Here are some references which might help in testing extensions:
Testing browser extensions
How to test chrome extensions?

How to use OAuth with Facebook in a Safari App Extension

My question is similar to How to use OAuth with Github in a Safari extension, however, the answer there explains how to use oauth with the older safari extension API. I am trying to use OAuth with the new Safari App Extension API (https://developer.apple.com/library/content/documentation/NetworkingInternetWeb/Conceptual/SafariAppExtension_PG/).
The new API allows the writing of native code, in addition to providing the ability to inject content scripts. Where should I perform the authentication? I also developed a chrome extension, and Google provides an API for retrieving OAuth tokens (https://developer.chrome.com/apps/identity) -- however I do not see anything similar for Safari App Extensions.
Any help is greatly appreciated!
I am currently working on Safari App Extension similar to your needs and the logic, certs (if you use them) persistence, access and refresh tokens all of them goes to the native code. From the SFSafariExtensionHandler you can control the active window/tab and all the pages in the tab, also receive callbacks from the pages.
For the OAuth use any native lib. that solves most of your needs for the logic. I am using this one from AeroGear.
Some adaptation will be needed for the page controlling.

Can I embed a chrome extension app as part of my main AngularJS app?

I have been doing a lot of reading and studying to figure out.
I basically just want my main AngularJS application to run, but also include an embedded Chrome Extension app - in this case, have regularly scheduled alarms (using the chrome.alarm API).
I want all users of my AngularJS app to have automatic access to the Chrome extension app, embedded in the main clientside one with lots of other Angular features.
It seems like I have to manually enable my Chrome app in Developer mode on my browser and even drag my Chrome app specifically to a location in my Chrome browser. I don't understand how end users can just automatically use my Chrome app then.
I need to add here I have never really used jQuery, only AngularJS but AngularJS extensively. My AngularJS app is the frontend, the backend is provided by Rails.
Some advice would be really helpful. I hope I am not downvoted as it is strange how sometimes questions get downvoted and I am not sure why...I don't really know where else to go with this question.
EDIT:
Ok some code to demonstrate:
myangularapp.controller('myappcontroller', function($scope, $http) {
var delayvar = 5;
chrome.alarms.create("arandomalarm", {delay: delayvar});
};
This doesn't just work as part of my AngularJS, I tried creating a manifest.json file in the app/assets folder too. As well as a background.js file there and my-chrome-app.js file. "chrome.alarms" is undefined, but I haven't enabled Developer mode yet. But still, how are end users supposed to use it if just to make me use it I need to do so much specific browser configuration?
You should have a look at Content Scripts and then at Message Passing which explains you how to communicate between a web page and an Chrome extension.
its not possible to automatically install a chrome extension. the user must install it from the chrome store.
you may make it easier for them to install it by providing an inline installation from your webpage. its in the official documentation and you can see an example on this page with the "add to chrome" button:
http://plusfortrello.com (one of my chrome extensions which has inline installation inside that page).
that example button is further customized to display a message instead if the user is not on chrome desktop.
if your extension also has permission to your webpage then you can also detect from your webpage if the extension is already install it (to hide the button, send messages to it and such).

Categories

Resources