fix: webui in embedded js-ipfs in Brave

When user opts-in to embedded js-ipfs experiment in Brave
we use precached webui loaded from gateway port.

In the future we will load /webui from API port, but that requires
#843 to land first

add-on/src/lib/ipfs-client/index.js

@@ -10,7 +10,7 @@ const browser = require('webextension-polyfill')
 const external = require('./external')
 const embedded = require('./embedded')
 const embeddedWithChromeSockets = require('./embedded-chromesockets')
-const precache = require('../precache')
+const { precache } = require('../precache')
 
 let client
 

add-on/src/lib/ipfs-companion.js

@@ -6,6 +6,7 @@ const log = debug('ipfs-companion:main')
 log.error = debug('ipfs-companion:main:error')
 
 const browser = require('webextension-polyfill')
+const toMultiaddr = require('uri-to-multiaddr')
 const pMemoize = require('p-memoize')
 const { optionDefaults, storeMissingOptions, migrateOptions, guiURLString } = require('./options')
 const { initState, offlinePeerCount } = require('./state')
@@ -247,7 +248,7 @@ module.exports = async function init () {
       peerCount: state.peerCount,
       gwURLString: dropSlash(state.gwURLString),
       pubGwURLString: dropSlash(state.pubGwURLString),
-      webuiRootUrl: state.webuiRootUrl,
+      webuiRootUrl: dropSlash(state.webuiRootUrl), // TODO: fix js-ipfs - it fails with trailing slash
       importDir: state.importDir,
       openViaWebUI: state.openViaWebUI,
       apiURLString: dropSlash(state.apiURLString),
@@ -393,6 +394,18 @@ module.exports = async function init () {
         log.error(`Unable to linkify DOM at '${details.url}' due to`, error)
       }
     }
+    // Ensure embedded js-ipfs in Brave uses correct API
+    if (details.url.startsWith(state.webuiRootUrl)) {
+      const apiMultiaddr = toMultiaddr(state.apiURLString)
+      await browser.tabs.executeScript(details.tabId, {
+        runAt: 'document_start',
+        code: `if (!localStorage.getItem('ipfsApi')) {
+        console.log('[ipfs-companion] Setting API to ${apiMultiaddr}');
+        localStorage.setItem('ipfsApi', '${apiMultiaddr}');
+        window.location.reload();
+      }`
+      })
+    }
   }
 
   // API STATUS UPDATES
@@ -611,7 +624,6 @@ module.exports = async function init () {
         case 'ipfsApiUrl':
           state.apiURL = new URL(change.newValue)
           state.apiURLString = state.apiURL.toString()
-          state.webuiRootUrl = `${state.apiURLString}webui/`
           shouldRestartIpfsClient = true
           break
         case 'ipfsApiPollMs':

add-on/src/lib/precache.js

@@ -13,6 +13,7 @@ log.error = debug('ipfs-companion:precache:error')
 // Web UI release that should be precached
 // WARNING: do not remove this constant, as its used in package.json
 const webuiCid = 'Qmexhq2sBHnXQbvyP2GfUdbnY7HCagH2Mw5vUNSBn2nxip' // v2.7.2
+module.exports.precachedWebuiCid = webuiCid
 
 const PRECACHE_ARCHIVES = [
   { tarPath: '/dist/precache/webui.tar', cid: webuiCid }
@@ -22,7 +23,7 @@ const PRECACHE_ARCHIVES = [
  * Adds important assets such as Web UI to the local js-ipfs-repo.
  * This ensures they load instantly, even in offline environments.
  */
-module.exports = async (ipfs) => {
+module.exports.precache = async (ipfs) => {
   for (const { cid, tarPath } of PRECACHE_ARCHIVES) {
     if (!await inRepo(ipfs, cid)) {
       await importTar(ipfs, tarPath, cid)

add-on/src/lib/state.js

@@ -2,6 +2,7 @@
 /* eslint-env browser, webextensions */
 
 const { safeURL } = require('./options')
+const { precachedWebuiCid } = require('./precache')
 const offlinePeerCount = -1
 
 function initState (options, overrides) {
@@ -25,7 +26,6 @@ function initState (options, overrides) {
   state.gwURLString = state.gwURL.toString()
   delete state.customGatewayUrl
   state.dnslinkPolicy = String(options.dnslinkPolicy) === 'false' ? false : options.dnslinkPolicy
-  state.webuiRootUrl = `${state.apiURLString}webui/`
 
   // attach helper functions
   state.activeIntegrations = (url) => {
@@ -43,6 +43,16 @@ function initState (options, overrides) {
     // TODO: make quick fetch to confirm it works?
     get: function () { return this.ipfsNodeType !== 'embedded' }
   })
+  Object.defineProperty(state, 'webuiRootUrl', {
+    get: function () {
+      // Below is needed to make webui work for embedded js-ipfs
+      // TODO: revisit if below is still needed after upgrading to js-ipfs >= 44
+      const webuiUrl = state.ipfsNodeType === 'embedded:chromesockets'
+        ? `${state.gwURLString}ipfs/${precachedWebuiCid}/`
+        : `${state.apiURLString}webui`
+      return webuiUrl
+    }
+  })
   // apply optional overrides
   if (overrides) Object.assign(state, overrides)
   return state

package.json

@@ -158,6 +158,7 @@
     "tachyons": "4.11.1",
     "tar-stream": "2.1.2",
     "timers-browserify-full": "0.0.1",
+    "uri-to-multiaddr": "3.0.2",
     "webextension-polyfill": "0.6.0",
     "webrtc-ips": "0.1.4"
   },

yarn.lock

@@ -10382,7 +10382,7 @@ multiaddr-to-uri@^4.0.1:
   dependencies:
     multiaddr "^6.0.3"
 
-multiaddr@6.1.0, multiaddr@^4.0.0, multiaddr@^5.0.0, multiaddr@^6.0.3, multiaddr@^6.0.4, multiaddr@^6.0.6, multiaddr@^6.1.0, multiaddr@^6.1.1, multiaddr@^7.3.0, multiaddr@^7.4.3:
+multiaddr@6.1.0, multiaddr@^4.0.0, multiaddr@^5.0.0, multiaddr@^6.0.3, multiaddr@^6.0.4, multiaddr@^6.0.6, multiaddr@^6.1.0, multiaddr@^6.1.1, multiaddr@^7.2.1, multiaddr@^7.3.0, multiaddr@^7.4.3:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/multiaddr/-/multiaddr-6.1.0.tgz#1f93afce58a33db5cc32a5917d8a14105d94330e"
   integrity sha512-+XTP3OzG2m6JVcjxA9QBmGDr0Vk8WwnohC/fCC3puXb5qJqfJwLVJLEtdTc6vK7ri/hw+Nn4wyT4LkZaPnvGfQ==
@@ -15000,6 +15000,14 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+uri-to-multiaddr@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/uri-to-multiaddr/-/uri-to-multiaddr-3.0.2.tgz#161d196d3f20837c232abc71636aa69aee3ede43"
+  integrity sha512-I2AO1Y/3hUI7KfHiB6Py64lZ02jAB+hqlMVBzDRn4u6d85x+7tJhRwGzdKEYn8/1kDBtWFZVkHvgepF7Z+C1og==
+  dependencies:
+    is-ip "^3.1.0"
+    multiaddr "^7.2.1"
+
 uri-to-multiaddr@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/uri-to-multiaddr/-/uri-to-multiaddr-3.0.1.tgz#460bd5d78074002c47b60fdc456efd009e7168ae"