DQtech Column | Learn from DEX about PlatON Application Development – Javascript (Engineering Transformation)

Some readers responded that by clicking the plug-in, the page to unlock the password will appear in a pop-up box, as shown in the following figure:


Mnemonic pages are displayed in a pop-up box, which brings a bad user experience.

Therefore, before starting the teaching of Chapter 6, we should transform the project to achieve the effect that some pages must be opened in the form of tab.

Modify the HTML File in the Public Directory

  • Change the file name index.html to home.html
  • Create popup.html in this directory and copy all the contents of home.html to popup.html.

The modified directory is as follows:

The contents of popup.html and home.html are as follows:

<!DOCTYPE html>

<html lang="en">


  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width,initial-scale=1.0">

  <link rel="icon" href="<%= BASE_URL %>favicon.ico">



    .mord {

      padding-left: 0px !important;





  <div id="app"></div>



Modify the File Manifest.json

Open manifest.json in the directory public


  "manifest_version": 2,

  "name": "Digging",

  "version": "1.0",

  "description": "Digging钱包",

  "author": "DQTech",

  "content_security_policy": "default-src 'self';script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline';img-src 'self' data: base64; connect-src *",

  "icons": {

    "48": "48.png"


  "browser_action": {

    "default_icon": "32.png",

    "default_title": "Digging",

    "default_popup": "popup.html"


  "background": {

    "scripts": ["js/web3-eth-accounts.js", "js/web3.js", "js/background.js"]


  "permissions": [










Change the value of default_popup in browser_action to popup.html. The purpose of this step is to make the page popup.html pop up every time you click the plug-in icon

Modify the File vue.config.js

Configure the vue project as a multi page application, and the modified code is:

const path = require("path");

module.exports = {

    pluginOptions: {

        "style-resources-loader": {

            preProcessor: "less",

            patterns: [path.resolve(__dirname, "src/assets/less/variable.less")]



    pages: {

        popup: {

            entry: "src/main.js",

            template: "public/popup.html"


        home: {

            entry: "src/main.js",

            template: "public/home.html"




Two page entries, popup and home, are configured here

Modify Store.js

A flag should be added here to judge whether the web page is opened in the tab. The code is as follows:

import Vue from "vue";

import Vuex from "vuex";


export default new Vuex.Store({

    state: {

        mnemonic: "", // 保存当前助记词

        isOpenInTab: false // 判断是不是在tab打开


    getters: {

        GetMnemonic(state) {

            return state.mnemonic;



    mutations: {

        SetMnemonic(state, mnemonic) {

            state.mnemonic = mnemonic;


        SetOpenInTab(state, isOpenInTab) {

            state.isOpenInTab = isOpenInTab;




App.vue Page

Modify the code of judgeJumpPage as follows:

        async judgeJumpPage() {

            // 用于判断当前是在是不是在tab打开

            if (window.location.pathname !== "/popup.html") {

                this.$store.commit("SetOpenInTab", true);

            } else {

                   this.$store.commit("SetOpenInTab", false);


             ... 省略代码



Modify the doUnlock function. The code is as follows:

        async doUnLock(password) {

            // 解锁钱包

            let bSuccees = await this.digging.PasswordManager.UnLock(password);

            if (bSuccees) {


                // todo

                // 1, 解锁成功后,需要判断是否已经有钱包,如果还没钱包,则跳转到创建或者导入钱的页面

                // 2, 如果已经有钱包则跳转到主界面

                if (this.isOpenInTab) {


                } else {

                    chrome.tabs.create({ url: "home.html#/seed-phrase" });


            } else {




In this way, the page will open in the form of tab

Well, that’s all for the transformation of multi – Page applications. We’ll explain the specific usage in detail in the next chapter.

The URL of github : https://github.com/DQTechnology/Platon_DevGuideProject

This article is reproduced from https://forum.latticex.foundation/t/topic/5863

Like (0)
PlatOnWorld-Kita's avatarPlatOnWorld-KitaOfficial
Previous January 14, 2022 11:34
Next January 14, 2022 16:40


Leave a Reply

Please Login to Comment