使用 Vue.js 和 InboxSDK 构建 Gmail/Chrome 扩展程序

我们将创建一个小型 Chrome 扩展程序，它使用InboxSDK和Pipl，让您可以直接在 Gmail 中搜索电子邮件地址以获取用户信息。您可以修改此演示以使用您喜欢的任何 API。例如，您可以：

使用Aylien等 API 进行情感分析
使用SpamCheck查看您的电子邮件的垃圾邮件评分。

您可以使用以下命令克隆演示的Git 仓库：

git clone git@github.com:mikeeus/vue-demo-inboxsdk.git

创建 Chrome 扩展

创建 Chrome 扩展程序非常简单。首先，我们需要一个manifest.json文件来描述我们的扩展程序。您可以在这里找到 Chrome 清单文件的文档。

// manifest.json
{
  "manifest_version": 2,
  "name": "Vue Pipl Search",
  "version": "1.0",
  "permissions": [
    "https://mail.google.com/",
    "https://inbox.google.com/",
    "https://api.pipl.com/",
    "https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js",
    "https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"
  ],
  "content_scripts" : [
    {
      "matches": ["https://mail.google.com/*", "https://inbox.google.com/*"],
      "js": ["inboxsdk.js", "app.js"]
    }
  ],
  "web_accessible_resources": [
    "icon.png"
  ],
  "icons": {"128": "icon.png"}
}

我们希望使用2.0清单文件的版本。我们将扩展程序命名为“Vue Pipl Search”，并将其版本设置为1.0。

由于我们希望扩展程序能在 Gmail 上运行，因此我们需要添加https://mail.google.com/相应https://inbox.google.com/的权限。此外，我们还需要添加pipl.com我们的vue.jsCDNaxios.min.js链接，因为我们将在应用中使用它们。

接下来，我们将添加一个键，告诉 Chrome 我们希望在浏览器处于开启或关闭状态时content_scripts运行inboxsdk.js我们的脚本。app.jsmail.google.cominbox.google.com

最后，我们将icon.png在web_accessible_resources数组中声明icon该扩展程序。将其声明为可访问网页后，我们就可以稍后使用 InboxSDK 加载它了。

InboxSDK

在使用 InboxSDK 之前，我们需要一个 AppId，可以从这里获取。我们还会包含一个inboxsdk.js文件，可以从这里下载。

现在让我们创建一个app.js文件，该文件将使用 InboxSDK 将我们的扩展程序添加到 Gmail。

// app.js

InboxSDK.loadScript('https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js')
InboxSDK.loadScript('https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js')

// Load InboxSDK 1.0 using our AppID
InboxSDK.load('1.0', 'INBOX_SDK_APP_ID').then(function(sdk){
  // the SDK has been loaded
  // We want to register a view handler on the Compose view
  sdk.Compose.registerComposeViewHandler(function(composeView){
    // a compose view has come into existence, do something with it!
    composeView.addButton({
      title: "Vue Pipl Search",
      iconUrl: chrome.extension.getURL('icon.png'),
      onClick: function(event) {
        sdk.Widgets.showModalView({
          title: 'Vue Pipl Search',
          'el': `<div id="vue-pipl-search"></div>`,
        });

        // new Vue(...)
      },
    });
  });
});

更新后的 InboxSDK 版本加载完毕后，InboxSDK.load我们可以sdk.Compose注册一个视图处理程序，并在撰写邮件视图中添加一个按钮，点击该按钮即可启动我们的 Vue 组件。在弹出的窗口中，我们将渲染一个 div 元素，id='vue-pipl-search'该元素将被 Vue 组件识别。

Vue组件

现在我们可以定义 Vue 组件了。我们在处理程序中定义组件onClick，这样它就能在#vue-pipl-search元素出现在页面上之后再进行定义。另外，我们还需要Pipl 提供的示例 API 密钥。

为了让 Vue 组件获取电子邮件的收件人，我们可以使用InboxSDK 的 composeView方法。composeView.getToRecipients()它会返回一个收件人数组，因此我们可以使用recipients[0].emailAddress.

综合以上内容，我们得到以下结果。

// app.js

InboxSDK.load('1.0', 'INBOX_SDK_APP_ID').then(function(sdk){
  sdk.Compose.registerComposeViewHandler(function(composeView){
    composeView.addButton({
      // ...
      onClick: function(event) {
        // ...

        const vuePiplSearch = new Vue({
          el: '#vue-pipl-search',
          template: `
            <div>
              <template v-if="recipients.length">
                <div v-if="person" style="text-align: center;">
                  <h2 style="text-align: center">
                    {{person.names[0].display}}
                  </h2>
                  <img :src="person.images[0].url" width="80px">
                  <p v-if="person.jobs[0]">{{person.jobs[0].title}}</p>
                </div>
                <div v-else>
                  Person was not found.
                </div>
              </template>
              <div v-else>
                Add an email recipient to search Pipl Api.
              </div>
            </div>
          `,

          data() {
            return {
              recipients: composeView.getToRecipients(),
              person: null
            }
          },

          created() {
            if (this.recipients.length) {
              this.loading = true

              axios.get(`https://api.pipl.com/search/v5/?email=${this.recipients[0].emailAddress}&key=[PIPL_SAMPLE_KEY]`)
                .then(res => {
                  if (res.status === 200) {
                    this.person = res.data.person;
                    this.loading = false
                  }
                })
            }
          }
        })
      },
    });
  });
});