前言本教程的代码可以在GitHub上找到
Chrome 扩展程序的基础知识
manifest 文件 和后台脚本。manifest 文件采用JSON格式，提供有关扩展的重要信息，例如其版本、资源或所需的权限。后台脚本允许扩展对特定的浏览器事件做出反应，例如创建新选项卡。

mkdir hello-world-chrome
cd hello-world-chrome
touch manifest.json background.js
{
"name": "Hello World Extension",
"version": "0.0.1",
"manifest_version": 2,
"background": {
"scripts": ["background.js"],
"persistent": false
}
}
chrome.runtime.onInstalled.addListener(() => {
alert('Hello, World!');
});
恭喜！你刚刚制作了一个 Chrome 扩展程序。
覆盖 Chrome 的新标签页








My New Tab Page!
You can put any content here you like


"chrome_url_overrides": {
"newtab": "tab.html"
}
将Vue添加到扩展
icanhazdadjoke.com 获取一个笑话。
  
显示一个按钮，供用户查看已收藏的笑话。vue-web-extension 样板来实现此功能。

本节假定你的计算机上安装了 Node 和 npm。如果不是这样，你可以到 nodejs.org/en/ 获取相关二进制文件，或者你可以使用版本管理器。我建议使用版本管理器。
Vue CLI 和 @vue/cli-init package：

npm install -g @vue/cli
npm install -g @vue/cli-init
vue init kocal/vue-web-extension new-tab-page
? Project name new-tab-page
? Project description A Vue.js web extension
? Author James Hibbard 
? License MIT
? Use Mozilla's web-extension polyfill? No
? Provide an options page? No
? Install vue-router? No
? Install vuex? No
? Install axios? Yes
? Install ESLint? No
? Install Prettier? No
? Automatically install dependencies? npmaxios。我们会用它来获取笑话。

cd new-tab-page
npm install
npm run watch:dev
.
├── dist
│ └── 
├── node_modules
│ └── 
├── package.json
├── package-lock.json
├── scripts
│ ├── build-zip.js
│ └── remove-evals.js
├── src
│ ├── background.js
│ ├── icons
│ │ ├── icon_128.png
│ │ ├── icon_48.png
│ │ └── icon.xcf
│ ├── manifest.json
│ └── popup
│ ├── App.vue
│ ├── popup.html
│ └── popup.js
└── webpack.config.jsHot Module Reloading。
vue-loader 管理所有 .vue 文件并输出一个浏览器可以理解的 JavaScript 包。
browser action）。这就是从此文件夹中拿到的。如果单击它，你应该会看到一个弹出窗口，显示“Hello world！” 这是由 popup/App.vue 创建的。

在新标签页中使用 Vue 组件

mkdir src/tab
touch src/tab/{App.vue,tab.html,tab.js}












import Vue from 'vue';
import App from './App';
new Vue({
el: '#app',
render: h => h(App)
});



{
"name":"new-tab-page",
...
"chrome_url_overrides": {
"newtab": "tab/tab.html"
}
}
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 },
...
})
获取并显示笑话




mount 生命周期钩子，一旦我们的 Vue 实例被挂载就会触发，向 joke API 发出 Ajax 请求。请求完成后，更新两个数据属性使组件重新渲染。
将笑话持持久化到 Chrome Storage
Chrome's storage API 来保存这些笑话，所以可能需要添加第三个按钮来删除 storage 中的笑话。

将按钮添加到 v-else 块：


{{ joke }}
Like Joke
Log Jokes
Clear Storage

export default {
data () {
return {
loading: true,
joke: "",
likeButtonDisabled: false
}
},
methods: {
likeJoke(){
chrome.storage.local.get("jokes", (res) => {
if(!res.jokes) res.jokes = [];
res.jokes.push(this.joke)
chrome.storage.local.set(res);
this.likeButtonDisabled = true;
});
},
logJokes(){
chrome.storage.local.get("jokes", (res) => {
if(res.jokes) res.jokes.map(joke => console.log(joke))
});
},
clearStorage(){
chrome.storage.local.clear();
}
},
mounted() { ... }
}为扩展做一些美化
vue-awesome 库。它能够使我们在页面上使用 Font Awesome 图标，并使这些按钮看起来更漂亮一些：

npm install vue-awesome
import Vue from 'vue';
import App from './App';
import "vue-awesome/icons";
import Icon from "vue-awesome/components/Icon";
Vue.component("icon", Icon);
new Vue({
el: '#app',
render: h => h(App)
});

将扩展程序上传到 Chrome Web Store
Chrome Web Store 做到。
Developer Dashboard 。系统会提示你输入开发人员详细信息，在发布第一个应用程序之前，你必须支付 5 美元的开发人员注册费（通过信用卡）。
Publish in the Chrome Web Store 指南。总结

在本教程中，我重点介绍了 Chrome 扩展程序的主要部分，并展示了如何用在 Vue.js 中 vue-web-extension 样板构建扩展程序，最后讲解了如何将扩展上传到 Web Store。

希望你喜欢本教程，并用它指导你始构建自己的 Chrome 扩展。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自学php网。