Vue.js 및 InboxSDK로 Gmail/Chrome 확장 프로그램 빌드

InboxSDK 및 Pipl을 사용하여 Gmail에서 바로 사용자 정보에 대한 이메일 주소를 검색할 수 있는 작은 Chrome 확장 프로그램을 만들 것입니다. 원하는 API를 사용하도록 이 데모를 변경할 수 있습니다. 예를 들어 다음과 같이 할 수 있습니다.

aylien과 같은 API를 사용하여 감정 분석 수행

spamcheck으로 이메일의 스팸 점수를 확인하세요.

다음을 사용하여 데모git repository를 복제할 수 있습니다.

git clone [email protected]:mikeeus/vue-demo-inboxsdk.git

크롬 확장 프로그램 만들기

Chrome 확장 프로그램을 만드는 것은 놀라울 정도로 간단합니다. 먼저 확장을 설명하는 manifest.json 파일이 필요합니다. Chrome manifest documentation here을 찾을 수 있습니다.

// 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/[email protected]/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.js 및 axios.min.js cdn 링크를 앱에서 사용할 것이기 때문에 추가할 것입니다.

다음으로 브라우저가 content_scripts 또는 inboxsdk.js 에 있을 때 app.js 및 mail.google.com 스크립트를 실행할 것임을 Chrome에 알리는 inbox.google.com 키를 추가합니다.

마지막으로 icon.png 배열에서 web_accessible_resources를 선언하고 확장을 위한 icon로 선언합니다. 웹 액세스 가능으로 선언하면 나중에 InboxSDK를 사용하여 로드할 수 있습니다.

InboxSDK

InboxSDK를 사용하려면 AppIdcan get from here가 필요합니다. 그리고 우리는 download from here 할 수 있는 inboxsdk.js 파일을 포함할 것입니다.

이제 InboxSDK를 사용하여 Gmail에 확장 프로그램을 추가할 app.js 파일을 만들어 보겠습니다.

// app.js

InboxSDK.loadScript('https://cdn.jsdelivr.net/npm/[email protected]/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 구성 요소를 실행할 Compose 이메일 뷰에 버튼을 추가할 수 있습니다. 팝업 내부에서 Vue 구성 요소가 선택할 div를 id='vue-pipl-search'로 렌더링합니다.

뷰 컴포넌트

이제 Vue 컴포넌트를 정의할 수 있습니다. 페이지에 onClick 요소가 존재한 후에 정의되도록 #vue-pipl-search 핸들러에서 이 작업을 수행합니다. 또한 sample Api key from Pipl 이 필요합니다.

Vue 구성 요소가 이메일 수신자를 가져오려면 InboxSDK's 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
                  }
                })
            }
          }
        })
      },
    });
  });
});

구성 요소가 생성되면 수신자를 확인한 다음 Pipl에 요청합니다. 템플릿에서 렌더링할 데이터 속성에 결과를 저장합니다.

이것은 매우 간단하지만 오류 처리를 추가하거나 여러 수신자에 대한 지원을 추가하도록 확장할 수 있습니다.

다른 Api를 사용하고 싶거나 다른 사용 사례가 있는 경우 composeView.getHTMLContent()와 같은 방법을 사용하여 이메일 본문을 가져와 Api로 보낼 수 있습니다.

체크아웃the docs for more ideas .

확장 프로그램 로드 중

확장을 실행하려면 로드해야 합니다. 프로젝트를 압축하여 로드할 수 있지만 이 자습서에서는 압축을 푼 폴더만 로드합니다. 왼쪽 상단의 'Load Unpacked'를 선택하고 extensions 폴더로 이동한 다음 확인을 선택합니다. 이렇게 하면 크롬에 확장 프로그램이 추가됩니다.



이제 gmail.com로 이동하여 이메일을 작성하면 Vue 아이콘이 표시됩니다.



"[email protected] "을 이메일 수신자로 추가하고 아이콘을 클릭합니다. Vue 컴포넌트가 있는 모달이 열릴 것입니다. 만세! Pipl Api를 검색하여 사람을 반환합니다.



마법! 이제 상사처럼 PI 경력을 시작할 수 있습니다!

이 튜토리얼이 마음에 드셨다면 좋아요를 누르는 것을 잊지 마세요. 질문이 있으시면 아래에 의견을 남겨주세요. :)