CUBE
Published in

CUBE

The Procedure of EOStock Development

Obstacles faced while developing the Chrome Extension EOS wallet, EOStock

Hello, this is ITAM Network’s developer, Kwon Dongjun.

Today, I will be sharing the obstacles faced while developing the Chrome Extenstion wallet, EOStock.

What prompted me to develop EOStock?

Similar to EOSCANNER, I started by studying eosjs when I first got into EOS. I made a web-type wallet by using eosjs, and when I saw metamask, I thought “This is something I can also make,” and started developing as practice. (The alpha version of the extension wallet I made as practice wasn’t as nice as it is now.)

Chrome Extension

At first, I simply used vue-cli as a start. Because an extension is a webpage that works on the web, there weren’t any problems. However, as I proceeded in developing, problems started to pop up one by one. The problems are as shown below.

Problems

01. It’s hard to test directly on the extension when developing.

Currently, the basic vue-clie is for making web-apps, as opposed to developing extensions. Therefore, when in development, I had to check on the webpage, leave a term in the middle to build, and then check on extension. Honestly, it was an inconvenient method. In addition, there were further difficulties during development because the api used for extensions are not usable for webpages.

02. The current cli is a setting for 1 vue webapp.

For extensions, you need to make many vue apps inside one extension. For example, you can make n amount of basic popups, options, etc. apps. However, when you build on cli, it comes out as 1 app. This is another problem I had to solve.

03. content_scripts, background, etc. files

On vue, there are unused files that are for the extension. content_scripts, background, etc. are files that cannot be used to build with vue. Moreover, it’s not good to use by putting it as public either (because the module is imported).

In truth, there were several other difficulties other than the three mentioned above (My skills are still insufficient..)

Problems Resolutions

01. It’s hard to test directly on the extension when developing.

First, if you take a look at the scripts of package.json, you would have seen the below before.

"scripts": {
"serve": "vue-cli-service serve",
...
}

The above vue-cli-service serve automatically refreshes the webpage if there are any revisions while watching the files to make the webpage testing more convenient. However, this is a feature that’s unneccessary for extensions. Because we’re building an extension, not a web, revisions need to be made as below.

"scripts": {
"serve": "vue-cli-service build --mode development --watch",
...
}

If you revise as above, you are able to build in development mode, and the files are checked with the -watch command language. This way, we can build in a more light way as opposed to before, and each time the file is changed, that light operation is executed.

Now, the first task is complete. The next task is to auto reloader the extension like how we used the previous serve. This is crucial to develop in a convenient way. :)

“Webpack Chrome Extension Reloader”module is used. This automatically reloaders the extension when the file is edited. In order to use this, you need to add it in the vue-cli’s web pack settings. In addition, you need to set the content_security_policy as well, but I’ll go over this when I explain the vue.config.js file.

When this is complete, light build is done when the file is changed during development, and the extension reloads as well. A much easier way to develop. :)

02. The current cli is a setting for 1 vue webapp.

This problem can be solved by editing the webpack config. Set as below.

01.pages

You can make n number of vue apps for 1 project by using pages. Add as below to the vue.config.js file.

pages: {
'popup/popup': {
entry: 'src/popup/main.ts',
template: 'src/popup/index.html',
},
'sdk/sdk': {
entry: 'src/sdk/main.ts',
template: 'src/sdk/index.html',
},
},

02.split-chunks

The module that needs to be split like the above plugin empirical method is automatically identified and split into chunks. It also has advantages such as the asynchronous chunks being effectively activated, and the many chunks being split. Yet, if this plugin is used, you cannot make independent vue apps. You need to set as below.

chainWebpack: config => {
config.optimization.splitChunks(false);
},

If you set as above, you can make n number of independent apps inside 1 project.

03. content_scripts, background, etc. files

You can process by revising the webpack config as below.

chainWebpack: config => {
config
.entryPoints
.delete('app')
.end()
.entry('contentScript')
.add('./src/contentScript.ts')
.end()
.entry('background')
.add('./src/background.ts')
.end();
},

Other Tips!

01.copy-webpack-plugin

Used to copy the existing icon and/or manifest.json, etc. In the case of manifest.json, you can change the info inside when copying, making it much more convenient.

02.zip-webpack-plugin

You need to use zip files when distributing extensions. It’s much more convenient if you compress the built code when building as a zip file.

03.Google Analytics

You cannot use the existing way if you want to use Google Analytics. Therefore, you need to set it separately.

  • Add the below to the manifest.json file (you need to use the below to use external cdn).
"content_security_policy": "script-src 'self' https://www.google-analytics.com; object-src 'self'"
  • Make a analytics.js file.
  • Imported onto index.html file.

If you do the above, you can use Google Analytics.

Setting our project’s webpack

We set and are using the below. Please let us know if there are any questions, or if you think of better methods than what we are using. :)

What are is the biggest difficulty?

I imagine everyone making a wallet would agree that the biggest difficulty is building trust with the customers and the service. Entering the private key is a must for wallets. This is because in order to execute transactions, the private key is necessary. I, along with everyone else, are very carefuly when it comes to the private key because if it is exposed, all of the coins I own can be taken. No matter how great of a wallet we make, and how much we say we are trustable, people are going to be skeptical (EOStock is really trustworthy..) Building this trust, and having consumers use our wallet is the biggest difficulty.

The future of EOStock?

01.Addition of notification feature

We are planning to add a notification feature every time a transaction is occured for the account registered to the wallet.

02.Additional support for testnet or multiverse

We are thinking of supporting EOS Black, which is a JungleNet, KylinNet, and Multiverse

03.Smart contract implementation

I believe this is critical when developing smart contracts.

The above 3 features are my own personal thoughts. I haven’t consulted with our planning team and development team, so I cannot say when it will be complete. :)

Conclusion

I’m a little worried because I wrote a wide range of things in this development story. But I hope you all enjoyed it. I’ll always try my best to provide the best version of EOStock. Also, please also look forward to not only the updated EOStock, but other ITAM extension apps that’ll be released in the future.

The final word I would like to conclude this post is, you can really trust our EOStock. :)

ITAM Games is a blockchain platform for a transparent gaming ecosystem

Subscribe to ITAM Games and receive the latest info.

Visit the ITAM Games Telegram to communicate regarding ITAM Games and Blockchain. Join by clicking the link below! 👫

Website: https://itam.games
Telegram: https://t.me/itamgames

--

--

--

CUBE brings P2E closer to your business. Take the next leap forward with CUBE middleware.

Recommended from Medium

JS Functions & Events

There are Two types of Hooks one is “Basic Hooks” and another is “Additional Hooks” let’s go get…

A beginner’s guide to understanding Closures in JavaScript

How To Publish a React Component Library

How to add custom breakpoints to TailwindCSS

Algorithm Question: Roman to Integer

How to a program on palendrome Numbers

ES2015 Loops

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
CUBE

CUBE

Official Site: https://cube.store

More from Medium

Xpansion Game Weekly Update

NBM and AIKON announce ORE ID integration partnership to bring easy-to-use blockchain solutions…

🛸 “SnailiX Metaverse” SxToken DeFi Model.

Xpansion Game Weekly Update