<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>New Tab Page</title> <link href="https://www.jb51.net/tab.css" > </head> <body> <div></div> <script src="https://www.jb51.net/article/tab.js"></script> </body> </html>
这里没什么特别的。这是一个简单的 HTML 页面，它将保存我们的 Vue 实例。
接下来在 tab.js 中添加：
import Vue from 'vue'; import App from './App'; new Vue({ el: '#app', render: h => h(App) });
在这里导入 Vue，用它为元素传递一个选择器，然后告诉它渲染 App 组件。
最后在 App.vue 中写如下代码：
<template> <p>{{ message }}</p> </template> <script> export default { data () { return { message: "My new tab page" } } } </script> <style scoped> p { font-size: 20px; } </style>
在使用这个新标签页之前，我们需要更新 manifest 文件：
{ "name":"new-tab-page", ... "chrome_url_overrides": { "newtab": "tab/tab.html" } }
为了使它们可用于扩展，我们还需要让样板编译我们的文件并复制到 dist 文件夹。
像下面这样修改 webpack.config.js，更新entry和plugins键：
entry: { 'background': './background.js', 'popup/popup': './popup/popup.js', 'tab/tab': './tab/tab.js' } plugins: [ ... new CopyWebpackPlugin([ { from: 'icons', to: 'icons', ignore: ['icon.xcf'] }, { from: 'popup/popup.html', to: 'popup/popup.html', transform: transformHtml }, { from: 'tab/tab.html', to: 'tab/tab.html', transform: transformHtml }, ... })
你需要重新启动 npm run watch:dev 任务才能使这些更改生效。完成此操作后，重新加载扩展程序并打开新选项卡。你应该会看到“My new tab page”。
获取并显示笑话
好的，我们已经覆盖了 Chrome 的新标签页，并且将其替换为了 mini Vue app。但是我们要做的不仅仅是显示一条消息。
更改 src/tab/App.vue 中的模板部分如下：
<template> <div> <div v-if="loading"> <p>Loading...</p> </div> <div v-else> <p>{{ joke }}</p> </div> </div> </template>
将 <script> 部分更改为如下代码：
<script> import axios from 'axios'; export default { data () { return { loading: true, joke: "", } }, mounted() { axios.get( "https://icanhazdadjoke.com/", { 'headers': { 'Accept': 'application/json' } } ) .then(res => { this.joke = res.data.joke this.loading = false; }); } } </script>
最后，将 <style> 部分更改为如下代码：
<style> body { height: 98vh; text-align: center; color: #353638; font-size: 22px; line-height: 30px; font-family: Merriweather,Georgia,serif; background-size: 200px; display: flex; align-items: center; justify-content: center; } .joke { max-width: 800px; } </style>
如果你正在运行 npm run watch:dev 任务，则扩展程序会自动重新加载，并且每当你打开新标签页时都会看到一个笑话。
接下来花点时间来了解一下自己都做了些什么。
在模板中，我们使用 v-if 块来显示加载消息或笑话，具体取决于 loading 的状态。最初它被设置为 true（显示加载消息），然后我们的脚本将触发 Ajax 请求来检索笑话。一旦 Ajax 请求完成，loading 属性将被设置为 false，导致组件被重新渲染并显示笑话。
在 <script> 部分，我们导入了 axios，然后声明了几个数据属性——前面提到的 loading 属性和一个 joke 属性来保存这个笑话。然后使用了 ，一旦我们的 Vue 实例被挂载就会触发，向 joke API 发出 Ajax 请求。请求完成后，更新两个数据属性使组件重新渲染。
到目前为止还挺好。
将笑话持持久化到 Chrome Storage
接下来，添加一些能够让用户喜欢一个笑话和列出喜欢的笑话列表的按钮。由于我们将使用 Chrome's storage API 来保存这些笑话，所以可能需要添加第三个按钮来删除 storage 中的笑话。
将按钮添加到 v-else 块：