Chystáme se vytvořit malé rozšíření pro Chrome, které využívá InboxSDK a Pipl, které vám umožní vyhledávat informace o uživatelích v e-mailových adresách přímo v našem Gmailu. Tuto ukázku můžete změnit tak, aby používala jakékoli rozhraní API, které se vám líbí. Můžete například:
- proveďte analýzu sentimentu pomocí rozhraní API jako aylien
- zkontrolujte spamové skóre svého e-mailu pomocí kontroly spamu
Repozitář git dema můžete naklonovat pomocí:
git clone [email protected]:mikeeus/vue-demo-inboxsdk.git
Vytvořte rozšíření Chrome
Vytvoření rozšíření pro Chrome je překvapivě jednoduché. Nejprve potřebujeme manifest.json soubor, který bude popisovat naši příponu. Dokumentaci manifestu Chrome naleznete zde
// 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"}
}
Chceme použít 2.0 verze manifestu. Naše rozšíření budeme nazývat "Vue Pipl Search" a uděláme z něj verzi 1.0 .
Protože chceme, aby naše rozšíření fungovalo v Gmailu, přidáme https://mail.google.com/ a https://inbox.google.com/ na naše povolení. Přidáme také pipl.com a naše vue.js a axios.min.js cdn odkazy, protože je budeme používat v naší aplikaci.
Dále přidáme content_scripts klíč, který Chrome říká, že chceme spustit inboxsdk.js a naše app.js skripty, když je prohlížeč na mail.google.com nebo inbox.google.com .
Nakonec deklarujeme icon.png v web_accessible_resources pole a jako naše icon pro prodloužení. Když jej deklarujeme jako web přístupný, můžeme jej později načíst pomocí InboxSDK.
InboxSDK
Než budeme moci používat InboxSDK, potřebujeme AppId, které odtud můžeme získat. A přidáme inboxsdk.js soubor, který si můžeme stáhnout zde.
Nyní vytvoříme náš app.js soubor, který použije InboxSDK k přidání našeho rozšíření do Gmailu.
// 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(...)
},
});
});
});
Po načtení aktualizované verze InboxSDK s InboxSDK.load můžeme použít sdk.Compose pro registraci obslužného programu zobrazení a přidání tlačítka do zobrazení e-mailu Vytvořit, které spustí naši komponentu Vue. Uvnitř vyskakovacího okna vykreslíme div s id='vue-pipl-search' který bude vyzvednut komponentou Vue.
Komponenta Vue
Nyní můžeme definovat naši komponentu Vue. Děláme to v onClick handler tak, aby byl definován za #vue-pipl-search prvek na stránce existuje. Také potřebujeme ukázkový klíč Api od Pipl.
Aby komponenta Vue získala příjemce e-mailu, můžeme použít metody composeView InboxSDK. composeView.getToRecipients() vrátí pole příjemců, takže můžeme získat e-mailovou adresu s recipients[0].emailAddress .
Když to dáme dohromady, dostaneme následující.
// 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
}
})
}
}
})
},
});
});
});
Když je komponenta vytvořena, zkontrolujeme příjemce a poté požádáme Pipl. Výsledek uložíme do vlastnosti data, která se vykreslí v šabloně.
Je to super jednoduché, ale můžeme to rozšířit a přidat zpracování chyb nebo podporu pro více příjemců.
Pokud chceme použít jiné API nebo mít jiný případ použití, můžeme použít metody jako composeView.getHTMLContent() získat tělo e-mailu a odeslat jej do rozhraní API.
Další nápady najdete v dokumentech.
Načítání rozšíření
Aby bylo možné naše rozšíření spustit, musíme jej načíst. Můžeme zazipovat náš projekt a načíst jej tímto způsobem, ale pro tento tutoriál pouze načteme rozbalenou složku. Na stránce rozšíření prohlížeče Chrome vyberte vlevo nahoře „Načíst rozbalené“ a přejděte do složky rozšíření a poté vyberte OK. Tím se rozšíření přidá do Chromu.
Nyní přejděte na gmail.com a napište e-mail, uvidíte ikonu Vue.
Přidejte „[email protected]“ jako příjemce e-mailu a klikněte na ikonu. Měl by se otevřít modal s naší komponentou Vue, hurá! Prohledá Pipl Api a vrátí osobu.
Kouzlo! Nyní můžete začít svou kariéru PI jako šéf!
Pokud se vám tento návod líbil, nezapomeňte dát like. Pokud máte nějaké dotazy, zanechte níže komentář. :)