MetaMask/metamask-extension-provider

用來探測你的瀏覽器中有沒有安裝metamask插件

https://github.com/MetaMask/metamask-extension-provider

 

MetaMask Extension Provider

A module for providing a MetaMask provider to other WebExtensions.

即咱們使用的：

web3.currentProvider

這裏的currentProvider就是metamask-extension-provider所提供的provider，用於：

// Check if mist etc. already set a provider if(!web3.currentProvider) web3.setProvider(new web3.providers.HttpProvider("http://localhost:8545"));

這個provider的做用有：

The account provided by this provider will be the user's MetaMask account.

這個provider中帶的account數據就是metamask中的account信息

When sending signing requests to this provider, MetaMask will prompt the user to sign with their accounts.

當你發送簽名請求給這個provider時，metamask將會告訴用戶使用其帳戶進行簽名

Works in，能夠在這兩種瀏覽器中使用:

• Chrome
• Firefox

Installation

Using npm as a package manager，使用npm安裝的方法:

npm install metamask-extension-provider -S

 

Usage如何使用這個插件

Using a bundler like browserify:

const createMetaMaskProvider = require('metamask-extension-provider')

const provider = createMetaMaskProvider()

provider.on('error', (error) => {
  // Failed to connect to MetaMask, fallback logic.
})

// Enjoy!

test-metamask-provider.zip

能夠直接下載上面的文檔進行使用，下載好後，運行node main.js ，打開服務器8081接口，在瀏覽器中調用http://localhost:8081:

獲得結果：

由於個人Chrome中並無安裝metamask插件，因此是這樣的結果，若是你安裝了，記得要去查看你的插件的UUID是什麼，而且到node_modules文件夾中找到metamask-extension-provider文件夾中的config.json文件，即

{
  "CHROME_ID": "nkbihfbeogaeaoehlefnkodbefgpgknn",
  "FIREFOX_ID":"4f8e3007-2c57-944b-a11b-b518d57714fa"
}

將裏面的CHROME_ID改爲你本身插件的UUID便可

 

因此後面在Chrome中安裝了metamask，看博客Chrome安裝metamask

但是安裝後獲得的結果好像也同樣，真是奇怪？？？？？？：

 

大問題：

這裏出現了個問題就是不能使用在Firefox瀏覽器上，會報錯：

後面改爲使用browser也不成功，也報browser is not defined

去查找了不少資料，上面都說Firefox與Chrome是兼容的，也是能使用Chrome的，再不濟也應該能用browser啊

有知道緣由的小夥伴但願可以告知

 

 

這是由於在metamask-extension-provider/index.js

const MetamaskInpageProvider = require('metamask-inpage-provider')//看博客MetaMask/metamask-inpage-provider
const PortStream = require('extension-port-stream')
const { detect } = require('detect-browser')//看博客DamonOehlman/detect-browser
const browser = detect()
const config = require('./config.json')

console.log(browser)
module.exports = function createMetaMaskProvider () {
  let provider
  try {
    let currentMetaMaskId = getMetaMaskId()//從config.json中取得插件的UUID
    console.log(currentMetaMaskId)
    const metamaskPort = chrome.runtime.connect(currentMetaMaskId)//這裏使用的是chrome，可是Firefox並不支持chrome
    console.log(metamaskPort)
    const pluginStream = new PortStream(metamaskPort)
    provider = new MetamaskInpageProvider(pluginStream)//經過metamask-inpage-provider獲得provider
 } catch (e) {
    console.dir(`fat error `, e)
    throw e
  }
  console.log('returning SOMEthing', provider)
  return provider
}

function getMetaMaskId () {
  switch (browser && browser.name) {
    case 'chrome':
      return config.CHROME_ID
    case 'firefox':
      return config.FIREFOX_ID
    default:
      return config.CHROME_ID
  }
}

 

Adding additional browser support

Simply add MetaMask's extension ID for that browser's store to the config file.

就是上面所說的若是你要將你本身的插件添加，就去更改config.json文件

Running the example

Use the ./sample-extension folder as an WebExtension. You can easily add it to Chrome or Firefox Developer Edition.

與上面我給的例子差很少


Editing the example

You must have browserify installed (npm i -g browserify).

You can edit the sample file sample-extension/index.js and then rebuild the file with npm run buildSample.

Current Limitations

In order to identify when there is a problem (like MetaMask was not connected), some kind of proper error handling must be added to metamask-inpage-provider that exposes the errors to the consumer of the provider. Maybe making it an event-emitter, so it can emit its errors, instead of just logging them.

因此下面要繼續學的是 metamask-inpage-provider