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">
<head>
<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">
<title>DQTech</title>
<style>
.mord {
padding-left: 0px !important;
}
</style>
</head>
<body>
<div id="app"></div>
</body>
</html>
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": [
"tabs",
"storage",
"storage",
"unlimitedStorage",
"clipboardWrite",
"activeTab",
"webRequest"
]
}
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";
Vue.use(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);
}
... 省略代码
}
unlock-page.vue
Modify the doUnlock function. The code is as follows:
async doUnLock(password) {
// 解锁钱包
let bSuccees = await this.digging.PasswordManager.UnLock(password);
if (bSuccees) {
this.$message.success("解锁成功!");
// todo
// 1, 解锁成功后,需要判断是否已经有钱包,如果还没钱包,则跳转到创建或者导入钱的页面
// 2, 如果已经有钱包则跳转到主界面
if (this.isOpenInTab) {
this.$router.push("/seed-phrase");
} else {
chrome.tabs.create({ url: "home.html#/seed-phrase" });
}
} else {
this.$message.error("密码错误,解锁失败!");
}
},
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
