有读者反应. 点击插件,如果解锁密码的页面是以弹出框的方式出现,如下图所示:
助记词的页面以弹出框的方式显示, 用户体验很不好。
那现在我们在开启第六章之前先对工程进行改造，以达到某些页面必须是以tab的方式打开的效果
修改public目录下的html文件
-
把index.html文件的修改为 home.html
-
在该目录下创建popup.html文件,把home.html的内容全部复制到popup.html中。
修改后目录如下：
popup.html 和home.html的内容如下:
<!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>
修改manifest.json文件
打开public目录下manifest.json文件
{
"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"
]
}
把browser_action下的default_popup的值修改为popup.html,这一步的作用是,每次点击插件图标时弹出的都是popup.html这个页面
修改vue.config.js文件
把vue工程配置成多页应用, 修改后的代码为:
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"
}
}
};
这里配置了popup和home两个页面入口
修改 store.js文件
在这里增加一个标志用于全局判断是否是在tab打开的,代码如下:
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页面
把judgeJumpPage的代码修改如下:
async judgeJumpPage() {
// 用于判断当前是在是不是在tab打开
if (window.location.pathname !== "/popup.html") {
this.$store.commit("SetOpenInTab", true);
} else {
this.$store.commit("SetOpenInTab", false);
}
... 省略代码
}
unlock-page.vue文件
修改doUnlock函数,代码如下:
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("密码错误,解锁失败!");
}
},
这样就页面就以tab的方式打开页面啦
好啦, 多页应用的改造就到这里啦, 具体的用法我们在下一章再详细讲解.