Using remotestorage.js in strange context (e.g. chrome extension)

remoteStorage.js
1

Hi all,
first of all, I think remotestorage idea is really great and so that’s why I wanna play with it !

To start exploring this world I’m currently trying to write a chrome extension to save bookmarks
using remotestorage like this old one.

I want to share some little experience on doing this:

  1. Inside extension popup you can’t do the oauth dance easily (old extension was using a very old rs parameter called authDialog inside displayWidget not available anymore, see here)

  2. Suggested way inside code is to override getLocation/setLocation

  3. The way OAuth works inside chrome extension is with chrome.identity.launchWebAuthFlow, but you cannot use this inside popup extension because the call will open a new popup causing original extension popup to loose focus and close (so the oauth callback will never work!!).

  4. The solution to me is: inside popup:

RemoteStorage.Authorize.getLocation = chrome.identity.getRedirectURL

Generates a redirect URL to be used in |launchWebAuthFlow|.
The generated URLs match the pattern https://<app-id>.chromiumapp.org/*.

This is needed as the url of extension is something like chrome://extension-id
then from popup, let’s send a message to background chrome extension

RemoteStorage.Authorize.setLocation = location => {
  var port = chrome.extension.connect({name: 'remotestorage-bookmarks'})
  port.postMessage(location)
}

and receiving it inside background

// receive from popup
chrome.extension.onConnect.addListener(port => {
  port.onMessage.addListener(url => {
     // launch oauth dance
     chrome.identity.launchWebAuthFlow({url, interactive: true}, responseUrl => {
       let params = util.extractParams(responseUrl) 
       // manually send access_token to remoteStorage !
       rs.remote.configure({token: params.access_token}) 
     })
  })
})

hope this helps someone !

2 Likes