使用Vue開發Chrome擴充程式的方法-Vue.js-PHP中文網

使用Vue開發Chrome擴充程式的方法

瀏覽器擴充功能是可以修改和增強 Web 瀏覽器功能的小程式。它們可用於各種任務，例如封鎖廣告，管理密碼，組織標籤，改變網頁的外觀和行為等等。

好消息是瀏覽器擴充功能並不難寫。可以用你已經熟悉的 Web 技術（HTML、CSS 和 JavaScript）來建立 —— 就像一般網頁一樣。但是與網頁不同的是，擴充功能可以存取許多特定於瀏覽器的 API，這才是有趣的地方。

在本教學中，我將向你展示如何為 Chrome 建立一個能夠改變新分頁行為的簡單擴充功能。這個擴充功能的 JavaScript 部分，我將使用 Vue.js 框架，因為它將允許我們快速啟動並執行，而且用 vue 工作是很有趣的。

本教學的程式碼可以在GitHub上找到

Chrome 擴充功能的基礎知識

Chrome擴充功能的核心部分是manifest檔案和後台腳本。 manifest 檔案採用JSON格式，提供有關擴展的重要信息，例如其版本、資源或所需的權限。後台腳本允許擴充功能對特定的瀏覽器事件做出反應，例如建立新分頁。

為了示範這些概念，讓我們先寫一個「Hello，World！」 Chrome 擴充功能。

建立一個名為hello-world-chrome 的新資料夾和兩個檔案：manifest.json 和background.js：

mkdir hello-world-chrome
cd hello-world-chrome
touch manifest.json background.js

登入後複製

開啟manifest.json 並新增以下程式碼：

{
  "name": "Hello World Extension",
  "version": "0.0.1",
  "manifest_version": 2,
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}

登入後複製

name、version 和manifest_version 都是必填欄位。 name 和 version 欄位可以是你想要的任何內容; manifest version 應設為2（從Chrome 18開始）。

background 允許我們註冊一個後台腳本，在scripts 後面的陣列中列出。除非擴充功能需要用 chrome.webRequest API來阻止或修改網路請求，否則 persistent 鍵應設定為 false。

將以下程式碼新增至 background.js ，使瀏覽器在安裝擴充功能時彈出出 hello 對話框：

chrome.runtime.onInstalled.addListener(() => {
  alert(&#39;Hello, World!&#39;);
});

登入後複製

最後安裝擴充功能。開啟 Chrome 並在網址列中輸入 chrome://extensions/。你應該會看到一個顯示已安裝擴充功能的頁面。

由於我們要從檔案（而不是Chrome線上應用程式商店）安裝自己的擴充程序，因此需要使用頁面右上角的切換按鈕來啟動開發者模式。這應該會添加一個額外的選單欄，其中包含 Load unpacked選項。點擊此按鈕並選擇你之前創建的 hello-world-chrome 資料夾。點擊打開，應該可以看到已安裝的擴展，並彈出“Hello，World！”視窗。

使用Vue開發Chrome擴充程式的方法

恭喜！你剛剛製作了一個 Chrome 擴充功能。

覆蓋 Chrome 的新標籤頁

為了在開啟新分頁時迎接我們的是自己的擴充功能。可以透過使用 Override Pages API 來完成此操作。

注意：在你取得進展之前，請務必停用其他能夠覆蓋 Chrome 新標籤頁的擴充功能。一次只允許一個擴展改變這種行為。

首先建立一個要顯示的頁面，而不是新的標籤頁。我們稱之為 tab.html。它應該與清單檔案和後台腳本位於同一資料夾中：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My New Tab Page!</title>
</head>
<body>
  <h1>My New Tab Page!</h1>
  <p>You can put any content here you like</p>
</body>
</html>

登入後複製

接下來需要讓擴充功能知道頁面的存在。可以透過在清單檔案中指定 chrome_url_overrides 來實現，如下所示：

"chrome_url_overrides": {
  "newtab": "tab.html"
}

登入後複製

最後，你需要重新載入擴充功能才能使變更生效。你可以透過在 Chrome 的擴充功能頁面上點擊 Hello World 擴充功能的 reload 圖示來執行此操作。

使用Vue開發Chrome擴充程式的方法

现在，当你打开新标签页时，你的自定义消息会出现。

将Vue添加到扩展

现在我们有一个非常基本的扩展，接下来要实现剩下的需功能了。当用户打开新标签页时，我希望扩展能够：

从精彩的笑话网站 icanhazdadjoke.com 获取一个笑话。
以良好的格式向用户显示该笑话。
显示用户喜欢该笑话的按钮。这样可以把笑话保存到 chrome.storage。
显示一个按钮，供用户查看已收藏的笑话。

当然你也可以用纯 JavaScript 或像 jQuery 这样的库来完成所有这些 —— 你开心就好！

但是出于本教程的目的，我将用 Vue 和令人敬畏的 vue-web-extension 样板来实现此功能。

用 Vue 可以让我又快又好地编写更有条理的代码。正如我们所看到的，样板文件提供了几个脚本，可以在构建 Chrome 扩展程序时解决一些痛苦的常见任务（例如：每当你进行更改时都必须重新加载扩展程序）。

vue-web-extension-boilerplate

本节假定你的计算机上安装了 Node 和 npm。如果不是这样，你可以到 https://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 <jim@example.com>
? License MIT
? Use Mozilla&#39;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? npm

登入後複製

你可以根据自己的喜好调整答案，但是你一定要安装 axios。我们会用它来获取笑话。

接下来，切换到项目目录并安装依赖项：

cd new-tab-page
npm install

登入後複製

然后就可以用样板提供的脚本构建我们的新扩展了：

npm run watch:dev

登入後複製

这会将扩展构建到项目根目录中的 dist 文件夹中，来进行开发并监视更改。

要将扩展程序添加到 Chrome，请执行上述相同的步骤，要选择 dist 文件夹作为扩展程序目录。如果一切按计划进行，那么当扩展程序初始化时，你应该看到“Hello world！”消息。

项目设置

让我们花一点时间来看看样板给了我们些什么。当前文件夹结构应如下所示：

.
├── dist
│   └── <the built extension>
├── node_modules
│   └── <one or two files and folders>
├── 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.js

登入後複製

在项目根目录中可以看到，样板文件正在使用 webpack。这很好，因为这为我们的后台脚本提供了 Hot Module Reloading。

src文件夹包含我们将用于扩展的所有文件。manifest 文件和 background.js 对于我们来说是熟悉的，但也要注意包含Vue 组件的 popup 文件夹。当样板文件将扩展构建到 dist 文件夹中时，它将通过 vue-loader 管理所有 .vue 文件并输出一个浏览器可以理解的 JavaScript 包。

在 src 文件夹中还有一个 icons 文件夹。如果你看一眼 Chrome 的工具栏，会看到我们的扩展程序的新图标（也被称为 browser action）。这就是从此文件夹中拿到的。如果单击它，你应该会看到一个弹出窗口，显示“Hello world！” 这是由 popup/App.vue 创建的。

最后，请注 scripts 文件夹的两个脚本：一个用于删除 eval 用法以符合 Chrome Web Store 的内容安全策略，另一个用于当你要把扩展上传到Chrome Web Store时将其打包到 .zip 文件中，。

在 package.json 文件中还声明了各种脚本。我们将用 npm run watch:dev 来开发扩展，然后使用 npm run build-zip 生成一个ZIP文件以上传到 Chrome Web Store。

在新标签页中使用 Vue 组件

首先从 background.js 中删除烦人的 alert 语句。

在 src 文件夹中创建一个新的 tab 文件夹来存放新标签页的代码。我们将在这个新文件夹中添加三个文件 —— App.vue，tab.html， tab.js：

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

登入後複製

打开 tab.html 并添加以下内容：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>New Tab Page</title>
  <link rel="stylesheet" href="tab.css">
</head>
<body>
  <div id="app"></div>
  <script src="tab.js"></script>
</body>
</html>

登入後複製

这里没什么特别的。这是一个简单的 HTML 页面，它将保存我们的 Vue 实例。

接下来在 tab.js 中添加：

import Vue from &#39;vue&#39;;
import App from &#39;./App&#39;;

new Vue({
  el: &#39;#app&#39;,
  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: {
  &#39;background&#39;: &#39;./background.js&#39;,
  &#39;popup/popup&#39;: &#39;./popup/popup.js&#39;,
  &#39;tab/tab&#39;: &#39;./tab/tab.js&#39;
}
plugins: [
  ...
  new CopyWebpackPlugin([
    { from: &#39;icons&#39;, to: &#39;icons&#39;, ignore: [&#39;icon.xcf&#39;] },
    { from: &#39;popup/popup.html&#39;, to: &#39;popup/popup.html&#39;, transform: transformHtml },
    { from: &#39;tab/tab.html&#39;, to: &#39;tab/tab.html&#39;, transform: transformHtml },
    ...
  })

登入後複製

你需要重新启动 npm run watch:dev 任务才能使这些更改生效。完成此操作后，重新加载扩展程序并打开新选项卡。你应该会看到“My new tab page”。

使用Vue開發Chrome擴充程式的方法

获取并显示笑话

好的，我们已经覆盖了 Chrome 的新标签页，并且将其替换为了 mini Vue app。但是我们要做的不仅仅是显示一条消息。

更改 src/tab/App.vue 中的模板部分如下：

<template>
  <div>
    <div v-if="loading">
      <p>Loading...</p>
    </div>
    <div v-else>
      <p class="joke">{{ joke }}</p>
    </div>
  </div>
</template>

登入後複製

将 <script> 部分更改为如下代码：

<script>
import axios from &#39;axios&#39;;

export default {
  data () {
    return {
      loading: true,
      joke: "",
    }
  },
  mounted() {
    axios.get(
      "https://icanhazdadjoke.com/",
      { &#39;headers&#39;: { &#39;Accept&#39;: &#39;application/json&#39; } }
    )
      .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 任务，则扩展程序会自动重新加载，并且每当你打开新标签页时都会看到一个笑话。

使用Vue開發Chrome擴充程式的方法

接下来花点时间来了解一下自己都做了些什么。

在模板中，我们使用 v-if 块来显示加载消息或笑话，具体取决于 loading 的状态。最初它被设置为 true（显示加载消息），然后我们的脚本将触发 Ajax 请求来检索笑话。一旦 Ajax 请求完成，loading 属性将被设置为 false，导致组件被重新渲染并显示笑话。

在 <script> 部分，我们导入了 axios，然后声明了几个数据属性——前面提到的 loading 属性和一个 joke 属性来保存这个笑话。然后使用了 mount 生命周期钩子，一旦我们的 Vue 实例被挂载就会触发，向 joke API 发出 Ajax 请求。请求完成后，更新两个数据属性使组件重新渲染。

到目前为止还挺好。

将笑话持持久化到 Chrome Storage

接下来，添加一些能够让用户喜欢一个笑话和列出喜欢的笑话列表的按钮。由于我们将使用 Chrome’s storage API 来保存这些笑话，所以可能需要添加第三个按钮来删除 storage 中的笑话。

将按钮添加到 v-else 块：

<div v-else>
  <p class="joke">{{ joke }}</p>

  <button @click="likeJoke" :disabled="likeButtonDisabled">Like Joke</button>
  <button @click="logJokes" class="btn">Log Jokes</button>
  <button @click="clearStorage" class="btn">Clear Storage</button>
</div>

登入後複製

没有什么令人兴奋的东西了。请注意我们将类似按钮的 disabled 属性绑定到 Vue 实例上的数据属性来确定其状态。这是因为用户不应该多次喜欢一个笑话。

接下来，将 click handler 和 Like Button Disabled 添加到脚本部分：

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() { ... }
}

登入後複製

在这里，我们声明了三个新方法来处理这三个新按钮。

likeJoke 方法在 Chrome 的存储中查找 jokes 属性。如果它不存在（也就是说，用户尚未喜欢一个笑话），会将其初始化为空数组。然后它将当前的笑话推送到此数组并将其保存到 storage。最后，将 likeButtonDisabled 数据属性设置为 true，并禁用 like 按钮。

logJokes 方法还在 Chrome storage 中查找 jokes 属性。如果找到了，会遍历其所有条目并将它们输出到控制台。

clearStorage 方法负责清除数据。

继续在扩展中调整这个新功能，直到自己满意。

使用Vue開發Chrome擴充程式的方法

为扩展做一些美化

它能够工作了，但是按钮是很丑，页面也有点简单。下面就要给扩展做一些润色。

下一步，安装 vue-awesome 库。它能够使我们在页面上使用 Font Awesome 图标，并使这些按钮看起来更漂亮一些：

npm install vue-awesome

登入後複製

在 src/tab/tab.js 中对库进行注册：

import Vue from &#39;vue&#39;;
import App from &#39;./App&#39;;
import "vue-awesome/icons";
import Icon from "vue-awesome/components/Icon";

Vue.component("icon", Icon);

new Vue({
  el: &#39;#app&#39;,
  render: h => h(App)
});

登入後複製

修改模板：

<template>
  <div>
    <div v-if="loading" class="centered">
      <p>Loading...</p>
    </div>
    <div v-else>
      <p class="joke">{{ joke }}</p>

      <div class="button-container">
        <button @click="likeJoke" :disabled="likeButtonDisabled" class="btn">
        <icon name="thumbs-up"></icon>
        </button>
        <button @click="logJokes" class="btn"><icon name="list"></icon></button>
        <button @click="clearStorage" class="btn"><icon name="trash"></icon></button>
      </div>
    </div>
  </div>
</template>

登入後複製

最后，让我们为按钮添加更多样式，并添加一张图片：

<style>
body {
  height: 98vh;
  text-align: center;
  color: #353638;
  font-size: 22px;
  line-height: 30px;
  font-family: Merriweather,Georgia,serif;
  background:url("https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2018/12/1544189726troll-dad
  .png") no-repeat 1% 99%;
  background-size: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.joke {
  max-width: 800px;
}

.button-container {
  position: absolute;
  right: 0px;
  top: calc(50% - 74px);
}

.btn {
  background-color: #D8D8D8;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
  display: block;
  margin-bottom: 5px;
  width: 50px;
}

.btn:hover {
  background-color: #C8C8C8;
}

.btn:disabled {
  background-color: #909090;
}
</style>

登入後複製

重新加载扩展并打开一个新标签，你应该看到这样的东西。

使用Vue開發Chrome擴充程式的方法