Trello Chrome拡張機能の構築方法-API認証

私は最近、非メンバーの特定のリストからカードのタイトルをエクスポートする必要があることに気付きました。デフォルトでは、TrelloはJSONへの完全なボードエクスポートのみをサポートしています。これは、数百のカードを含む100人以上のメンバーのボードで私のタブをクラッシュさせるものです。店にはトレロ拡張機能の小さな軍隊がありますが、不思議なことに、いかなる方法でも輸出リストがありません。

これを行うことができるChrome拡張機能を作成しましょう！急いで最終結果を確認したい場合は、このチュートリアルのコードの最終バージョンについては、GitHubリポジトリを参照してください。

キーテイクアウト

Chromeskelリポジトリを利用して、Trello Chrome拡張機能の開発をジャンプスタートし、事前に作られたスケルトンでプロセスを簡素化します。

Trello Webサイトにアクセスして、Trello APIキーと認証の秘密を取得します。

基本的なHTML構造とJavaScriptを使用して、ユーザーの認証ステータスに基づいて可視性を切り替えるために、ユーザー認証を処理するために拡張機能内に設定ページを実装します。
• Trello JavaScriptクライアントライブラリとカスタムスクリプト（HashSearch.js）を使用して、承認トークンを効果的に管理し、安全で効率的なユーザー認証を確保します。
マニフェストファイルを使用して特定のTrelloボードURLに拡張機能の機能を合理化し、拡張機能の操作の範囲を関連するページに制限することによりパフォーマンスを向上させます。
Chrome拡張機能の構築
これらのエクスポートのみを行う別のアプリケーションが多すぎる可能性があるため、最良のアプローチは拡張機能になると考えました。その上、Trelloには気の利いたAPIがあり、必要なものをすべて取得するために使用できます。また、それは拡張開発に戻る素晴らしい移行になると考えました。
• ブートストラップ
• 信頼できるChromeskel Repoを再利用します。これは、Chrome Extension開発の開始を容易にするために、ずっと前に構築したスケルトンエクステンションです。参考までに、私が過去に書いた他のクロム拡張チュートリアルをご覧になりたい場合は、こちらとこちらをご覧ください。
レポを任意のフォルダーにクローニングすることから始めます。

それが機能するかどうかを確認するには、Chromeにロードします。 [拡張機能]タブに移動し、[[未払いの拡張子]の読み込み]をクリックします。オプションがない場合は、右上隅の「開発者モード」チェックボックスを確認してください。

ロードされたら、拡張機能リストに表示されます。

認証

クロムの拡張機能を使用して画面上のデータを単純に収穫して解析することはできますが、Trelloは時々信頼できないことが証明されており、人口の多いボードでクラッシュする傾向があります。これが、Chrome ExtensionのTrello.comドメインとの統合のみを使用して、リストに新しいコンテキストメニューオプション（「エクスポートカード」オプション）を作成する理由です。 APIを介したデータ。

キーとシークレット

キーを作成したら、スクリプトサブフォルダーで、ファイルkey.jsを作成します：

あなたがそれにいる間、あなたはフラグメントとファンシーセティングフォルダーを削除することができます。それらは必要ありません。

git clone https://github.com/Swader/ChromeSkel_a.git

ワークフローとマニフェスト

拡張機能のワークフローのアイデアは次のとおりです

ユーザーがTrelloボードを開いていると

当該ユーザーが拡張機能を許可したかどうかを確認してください
• はいの場合は、
を続行します
• いいえの場合は、手順を完了できる承認ボタンで設定ページを開きます
• 承認されたら、[設定]ページを自動的に閉じて、拡張機能を承認したままにします
拡張機能がいくつかのコンテンツを含む新しいタブを自動的に開くには、そのコンテンツを「Webアクセス可能なリソース」としてマークする必要があります。 この目的では、[設定]ページを含むフォルダー設定を作成し、拡張機能のマニフェストをこのように更新します。
これのほとんどは馴染みがあるはずです。バージョンを設定し、メタデータを指定し、アイコンを定義し、イベントページを宣言し、前提条件のコンテンツスクリプト（Trello JSクライアントライブラリにjQueryが必要です）を読み、最後に「web_accessible_resources」を定義して、設定ページを使用できるように定義します。構築してください。また、拡張機能の効果をhttps://trello.com/b/*に制限します。つまり、ボードURLのみを意味します。

設定と承認

設定ページを作成するには、簡単なHTMLページを書きます。デモンストレーションのために、この場合は非常にシンプルに保ちます。ファンデーションを使用してスタイルを整えます（今はボタンのみですが、将来の投稿でより良い設定ページの作成に取り組んでいます）ので、基礎Essentialsバンドルをダウンロードし、その内容を /設定しないようにしてください。 index.htmlはそのフォルダーに分類されます。このようなフォルダー構造が必要です：

<span>// key.js
</span><span>var APP_KEY = '{{KEY}}';</span>

スクリーンショットに表示されていない追加のフォルダーがある場合は、自由に削除してください。ファイルsettings/js/settings.jsを作成して、今のところ空にしたままにしてください。

わかりました、ビジネスに取り掛かりましょう。したがって、ユーザーは、[拡張機能]タブで「オプション」に移動するか、許可されていないときに拡張機能を使用しようとすることにより、このページに終わることです。 2つのDIVを使用して、かなり基本的なHTMLページを作成しましょう。1つは「ログアウト」ボタンで認証されている場合、もう1つはまだ認知度が低く、[承認]ボタンをクリックする必要がある場合です。 index.htmlの内容をこれに置き換えます：

git clone https://github.com/Swader/ChromeSkel_a.git

ログインとログアウトボタンの2つのDIVがあり、必要なJSを引き込みます。この場合、財団のデフォルトに含まれるjqueryを使用していますが、プロジェクトの他の場所で自分のダウンロードしたものを使用することを選択しても、私がやったように最新の状態を取得した場合に備えて、実際には関係ありません（もっとそれは後で）。

次に、いくつかのロジックを追加しましょう。 settings.jsを開いて、このコンテンツを指定します：

<span>// key.js
</span><span>var APP_KEY = '{{KEY}}';</span>

ドキュメントを読むことで、クライアントアプリが認証されている場合、Trello_TokenがLocalStorageに存在することがわかります。これは、各DIVをいつ表示するかについてのインジケーターとして使用できることを意味します。 init機能では、divをつかみ、クリックハンドラーをボタンに追加します（まだロジックはありません）。最後に、trello_tokenに従って適切なdivを非表示にします。 たとえば、ユーザーが認証されている場合、このような画面を取得します。

今すぐTrello JSクライアントを取得しましょう。 Trelloのドキュメントは、Chrome拡張機能を念頭に置いて書かれているわけではなく、JSクライアントライブラリをドメインから取得しながら、URLにキーを添付することをお勧めします。

拡張の閉じた環境に対処しているのを見て、パフォーマンス上の理由でローカルで利用できるようにすることがはるかに理にかなっていると見て、本当にそうすることはできません。したがって、上記のURLにアクセスしますが、重要なパラマリはありません。
このファイルの内容をlib/trello_client.jsに保存してから、

タグの近くのスクリプトセクションに追加して、設定ページがロードされていることを確認してください。

<span>{
</span>    <span>"name": "Trello Helper",
</span>    <span>"version": "0.1",
</span>    <span>"manifest_version" : 2,
</span>    <span>"description": "Trello Helper adds some much needed functionality to Trello. The current version focuses on exporting card information from lists.",
</span>    <span>"background" : {
</span>        <span>"page" : "background.html",
</span>        <span>"persistent": false
</span>    <span>},
</span>    <span>"page_action" :
</span>    <span>{
</span>        <span>"default_icon": {
</span>            <span>"19": "icons/19.png",
</span>            <span>"38": "icons/38.png"
</span>        <span>}
</span>    <span>},
</span>    <span>"content_scripts": [
</span>        <span>{
</span>            <span>"matches": ["https://trello.com/b/*"],
</span>            <span>"js": [
</span>                <span>"lib/jquery-2.1.1.min.js",
</span>                <span>"scripts/main.js"
</span>            <span>],
</span>            <span>"run_at": "document_idle"
</span>        <span>}
</span>    <span>],
</span>    <span>"permissions": [
</span>        <span>"tabs"
</span>    <span>],
</span>    <span>"icons": {
</span>        <span>"16": "icons/16.png",
</span>        <span>"48": "icons/48.png",
</span>        <span>"128": "icons/128.png"
</span>    <span>},
</span>    <span>"web_accessible_resources": [
</span>        <span>"settings/index.html"
</span>    <span>],
</span>    <span>"options_page": "settings/index.html"
</span><span>}</span>

これにより、JavaScriptでTrelloオブジェクトを使用できるようになり、メソッドを使用できます。最初にログアウトを処理しましょう。ログアウトボタンのクリックハンドラーを変更します。

Trelloとの執着するのはそれだけです。メソッドを呼び出して、上にあるページをリロードします（設定画面、つまり）。

<span><span><!doctype html></span>
</span><span><span><span><html</span> class<span>="no-js"</span> lang<span>="en"</span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><meta</span> charset<span>="utf-8"</span>/></span>
</span>    <span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1.0"</span>/></span>
</span>    <span><span><span><title</span>></span>Trello Helper Settings<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/foundation.css"</span>/></span>
</span>    <span><span><span><script</span> src<span>="js/vendor/modernizr.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>
<span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="large-12 columns"</span>></span>
</span>        <span><span><span><h1</span>></span>Trello Helper Settings<span><span></h1</span>></span>
</span>    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="large-12 columns"</span>></span>
</span>        <span><span><span><div</span> class<span>="panel"</span> id<span>="trello_helper_loggedout"</span> <span>style<span>="<span>display: none</span>"</span></span>></span>
</span>            <span><span><span><p</span>></span>To get going, you'll need to authorize the extension to use your Trello account.<span><span></p</span>></span>
</span>
            <span><span><span><p</span>></span>Do it by clicking the big Authorize button below.<span><span></p</span>></span>
</span>
            <span><span><span><a</span> href<span>="#"</span> class<span>="medium success button"</span> id<span>="trello_helper_login"</span>></span>Authorize<span><span></a</span>></span><span><span><br</span>/></span>
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="panel"</span> id<span>="trello_helper_loggedin"</span> <span>style<span>="<span>display: none</span>"</span></span>></span>
</span>            <span><span><span><p</span>></span>You are already authorized. If something doesn't work, try logging out using the button below, and logging back in.<span><span></p</span>></span>
</span>
            <span><span><span><a</span> href<span>="#"</span> class<span>="medium success button"</span> id<span>="trello_helper_logout"</span>></span>Log out<span><span></a</span>></span><span><span><br</span>/></span>
</span>        <span><span><span></div</span>></span>
</span>
    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span><script</span> src<span>="../scripts/key.js"</span>></span><span><span></script</span>></span>
</span><span><span><span><script</span> src<span>="js/vendor/jquery.js"</span>></span><span><span></script</span>></span>
</span><span><span><span><script</span> src<span>="js/settings.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

さあ、ログインを処理しましょう。これは少し複雑です。

git clone https://github.com/Swader/ChromeSkel_a.git

オンラインドキュメントのロジックに続いて、Trelloオブジェクトにはセットキーメソッドがあり、これを設定するために使用することがわかります。次に、Authorizeメソッドをアクションに呼びます。ドキュメントによると、リダイレクトの代わりにタイプポップアップを使用すると、ユーザーが受信したときに秘密のキーを手動で貼り付ける必要がありますが、これは私たちが探しているものではありません。ただし、リダイレクトを使用すると、ページは認証にリダイレクトされ、一度完了したら戻ります。インタラクティブフィールドは、falseに設定された場合、ポップアップとリダイレクトの両方を無効にし、代わりにのみlocalStorage.TRELLO_TOKEN値が存在するかどうかをチェックします。ドキュメントに従って、最初にリダイレクトで通常の承認を呼び出す必要があります。次に、設定ページに戻ったら、再度呼び出す必要がありますが、インタラクティブセットをfalseにして、前のリダイレクトをつかむようにします提供された。それはすべて少し複雑ですが、それは機能します。

ただし、別の問題があります。 [設定]ページが開いた直後に非対話型認証を呼び出すと、許可後のリダイレクトがまだ発生していないため、ページにエラーが発生します。別の方法では、Treloからリダイレクトの後に表示される[設定]ページに「確認」などの別のボタンを追加することで、ユーザーが非対話承認を手動で開始できるようにします。しかし、これはUXの悪夢のように思えます。最後に、3番目のソリューションを選択しました。

次のコードをlib/hashsearch.jsに保存します。

<span>// key.js
</span><span>var APP_KEY = '{{KEY}}';</span>

Stackoverflowの答えからつかまったように、この小さなユーティリティは、URLから特定のハッシュの値をつかむのに役立ちます。

Redirectモードを介してTrelloを使用して承認すると、URLにトークンがありますが、それが来たページにリダイレクトされます。このトークンは、Trello JSクライアントのニーズの認証トークンとなります。したがって、URL内のこのトークンの存在を検出できれば、Trelloからのリダイレクトを扱っているため、非対話的な承認プロトコルを自動的かつ安全にトリガーできると結論付けることができます。

設定ページにHashsearchを追加した後…

…settings.jsファイルは、最後に次のようになります：

<span>{
</span>    <span>"name": "Trello Helper",
</span>    <span>"version": "0.1",
</span>    <span>"manifest_version" : 2,
</span>    <span>"description": "Trello Helper adds some much needed functionality to Trello. The current version focuses on exporting card information from lists.",
</span>    <span>"background" : {
</span>        <span>"page" : "background.html",
</span>        <span>"persistent": false
</span>    <span>},
</span>    <span>"page_action" :
</span>    <span>{
</span>        <span>"default_icon": {
</span>            <span>"19": "icons/19.png",
</span>            <span>"38": "icons/38.png"
</span>        <span>}
</span>    <span>},
</span>    <span>"content_scripts": [
</span>        <span>{
</span>            <span>"matches": ["https://trello.com/b/*"],
</span>            <span>"js": [
</span>                <span>"lib/jquery-2.1.1.min.js",
</span>                <span>"scripts/main.js"
</span>            <span>],
</span>            <span>"run_at": "document_idle"
</span>        <span>}
</span>    <span>],
</span>    <span>"permissions": [
</span>        <span>"tabs"
</span>    <span>],
</span>    <span>"icons": {
</span>        <span>"16": "icons/16.png",
</span>        <span>"48": "icons/48.png",
</span>        <span>"128": "icons/128.png"
</span>    <span>},
</span>    <span>"web_accessible_resources": [
</span>        <span>"settings/index.html"
</span>    <span>],
</span>    <span>"options_page": "settings/index.html"
</span><span>}</span>

これで拡張機能を試してみることができます。 [拡張機能]タブを読み込み、[オプション]リンクをクリックし、認証をテストしてログアウトします。すべてが正常に動作するはずです。

<span><span><!doctype html></span>
</span><span><span><span><html</span> class<span>="no-js"</span> lang<span>="en"</span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><meta</span> charset<span>="utf-8"</span>/></span>
</span>    <span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1.0"</span>/></span>
</span>    <span><span><span><title</span>></span>Trello Helper Settings<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/foundation.css"</span>/></span>
</span>    <span><span><span><script</span> src<span>="js/vendor/modernizr.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>
<span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="large-12 columns"</span>></span>
</span>        <span><span><span><h1</span>></span>Trello Helper Settings<span><span></h1</span>></span>
</span>    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="large-12 columns"</span>></span>
</span>        <span><span><span><div</span> class<span>="panel"</span> id<span>="trello_helper_loggedout"</span> <span>style<span>="<span>display: none</span>"</span></span>></span>
</span>            <span><span><span><p</span>></span>To get going, you'll need to authorize the extension to use your Trello account.<span><span></p</span>></span>
</span>
            <span><span><span><p</span>></span>Do it by clicking the big Authorize button below.<span><span></p</span>></span>
</span>
            <span><span><span><a</span> href<span>="#"</span> class<span>="medium success button"</span> id<span>="trello_helper_login"</span>></span>Authorize<span><span></a</span>></span><span><span><br</span>/></span>
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="panel"</span> id<span>="trello_helper_loggedin"</span> <span>style<span>="<span>display: none</span>"</span></span>></span>
</span>            <span><span><span><p</span>></span>You are already authorized. If something doesn't work, try logging out using the button below, and logging back in.<span><span></p</span>></span>
</span>
            <span><span><span><a</span> href<span>="#"</span> class<span>="medium success button"</span> id<span>="trello_helper_logout"</span>></span>Log out<span><span></a</span>></span><span><span><br</span>/></span>
</span>        <span><span><span></div</span>></span>
</span>
    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span><script</span> src<span>="../scripts/key.js"</span>></span><span><span></script</span>></span>
</span><span><span><span><script</span> src<span>="js/vendor/jquery.js"</span>></span><span><span></script</span>></span>
</span><span><span><span><script</span> src<span>="js/settings.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

結論

この部分では、拡張機能の基本を構築し、カスタムファンデーションを搭載した設定画面を介して認証を実装し、TrelloのJavaScriptクライアントライブラリを使用しています。

次のパートでは、拡張機能の背後にあるロジック全体を構築し、物事をまとめます。API認証を使用してTrello Chrome拡張機能の構築に関するよくある質問（FAQ） マニフェストファイルは、Chrome拡張機能の重要なコンポーネントです。これは、その名前、バージョン、アクセス許可、使用するスクリプトなど、拡張機能に関する重要な情報を提供するJSONファイルです。 Chromeはこの情報を使用して拡張機能を適切に読み込んで実行します。

Chrome拡張機能でTrelloのAPIを使用するにはどうすればよいですか？

Chrome拡張機能でTrelloのAPIを使用するには、APIを生成する必要があります。 Trelloの開発者プラットフォームのキーとトークン。これらの資格情報により、拡張機能はTrelloのAPIに承認されたリクエストを行うことができます。その後、JavaScriptを使用して拡張機能からAPI呼び出しを行い、Trelloデータと対話できるようにします。 Trello Chrome拡張機能の機能。これは、拡張機能に追加のスクリプトを追加し、TrelloのAPIを使用してTrelloデータと対話することで実行できます。たとえば、ユーザーが拡張機能から直接新しいTrelloカードを作成できる機能を追加できます。拡張機能。拡張機能管理ページで「ビューの検査」オプションを使用して、拡張機能のために開発者ツールウィンドウを開くことができます。これにより、スクリプトをデバッグし、コンソール出力を表示し、拡張機能のページのDOMを検査することができます。拡張機能では、Chrome Webストアに公開できます。開発者アカウントを作成し、1回限りの登録料を支払い、拡張機能を公開するためのストアのガイドラインに従う必要があります。 > Trello Chrome拡張機能を構築するときは、セキュリティ、パフォーマンス、ユーザーエクスペリエンスのベストプラクティスに従うことが重要です。これには、すべてのネットワーク通信にHTTPSを使用すること、バックグラウンドスクリプトの使用の最小化、明確で直感的なユーザーインターフェイスの提供が含まれます。

Trello Chrome Extensionで他のAPIを使用できますか？

Trello Chrome Extensionを収益化できますか？ Chrome Webストアにより、開発者は1回限りの購入またはサブスクリプションのいずれかとして、拡張機能を請求できます。アプリ内購入や広告を通じて拡張機能を収益化することもできます。

以上がTrello Chrome拡張機能の構築方法-API認証の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。