気軽にTwitterにメモできるChrome拡張機能を作ってみた

Twitter が大好きな私です

一日の半分以上はTwitterを閲覧またはツイートしていると思います

よかったらフォローしてください @momijinn_aka

日頃からもっと気軽にメモ程度にツイートできたらなぁと考えてました

そこで、Twitter を開かなくても手軽にツイートできる APP を作ってみました

この記事では、実際に作ってみたものとその概要をまとめたものです

作ったアプリケーション

作ったものは Chrome 拡張機能として動作し、ツイートのみに特化した APP ( ChromeExtenstionTweet ) です

言葉だけでは分かりづらいので動画をはります

00:06 qiita.com を開く
00:15 App を起動
00:16 ”Share URL” のスイッチをクリックして表示しているURLをシェアするようにする
00:20 適当なメッセージを入れてツイート
00:21 ツイートが成功すると “Memo”ボタンの左に “Success” が表示される
00:25 ホームボタンをクリックして google.com を開く
00:33 適当なメッセージを入れてツイート
00:41 Twitter を開いてツイートできているか確認する

セールスポイント

一番のセールスポイントは、ブラウザを開いていればいつでもツイートできる点です
※ ただしブラウザは Chrome のみ

わざわざ Twitter のサイトに行かなくてよいです

また見た目も少し工夫しており、ツイートしている感じを出さないようにしています

周りからはメモをとっていると思われるようにしています

このような見た目にした理由として、公共の場や職場でも周りの目を気にせずツイートしたいからです

上記の場にてTwitterを開くのはかなり抵抗があります

しかし、ブラウジングしていたときに有益な情報があったりするとメモとしてツイートしたい気持ちになります

「Google Docs や Ever Note とかじゃだめなの?」と思うかもしれませんが、答えは NO です

いつでも見えるところにないとメモを忘れてしまいます

私はいつも使うのが Twitter なので Twitter に残しておきたいです

いつも見るTwitterに参考となった記事や解決方法を残しておき、帰宅後に見返し、そしてブログや Qiita 等の記事にちゃんとまとめたほうが自分のためになりますし、他の方たちにとっても有益になると思います

構成図

構成図は下の図のようになっています

ごりごりに Firebase を使用しています

Firebase Authentication で Twitter の Authon 認証を行っています

Firebase で簡単に Authon 認証が作れるので大変便利です

また、Firebase Cloud Functions で REST サーバを構築し、Twitter へツイートを投稿しています

自分で実装した部分は Firebase の REST サーバと クライアントである Chrome 拡張機能の2箇所です

使用したライブラリやAPI等

今回は諸事情により、現時点(2019/09/23)においてプログラムを公開しない予定です
※ 諸事情の理由は、下記のつまづきメモに記載あり

そのため使用したライブラリ等々を記載してきます

クライアント

サーバ

つまづいたところやメモ

JavaScript

fetch() を使用して request をする

response code が 200 以外でも サーバーからもらったものとして判断するため、400 や 401等のサーバーエラーは catch には行かない

参考: https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch#Uploading_JSON_data

Object型に入っているすべての要素を console.log で出力

参考: https://qiita.com/ms2sato/items/27e82d6d881fce012459

Chrome Extension

page_action と browser_action の違い

Chrome 拡張 は manifest.json の中に Permission や バックグラウンドで実効するスクリプトを定義してあげる

その中に page_action と browser_action がある

2つの違いは、

page_action: 常に利用するためのもの
browser_action: 特定URLにしようするためのもの

です

参考: https://stackoverflow.com/questions/44712495/what-are-the-differences-between-page-action-and-browser-action/44713058

onClick

html 内で button タグを定義するときに onClick で js で定義した関数を呼びたいときがあるができません

エラーをはきます

エラーメッセージ

button タグに id を定義してあげて js 内に addEventListener(“click”,func); で呼ぶのが定石です

参考: https://stackoverflow.com/questions/36324333/refused-to-execute-inline-event-handler-because-it-violates-csp-sandbox/36349056

Firebase 認証

Chrome 拡張 で Firebase から認証を受けるには、

  1. Firebse コンソールで Authentication の設定にて、認証ドメインリストに URI を追加

    ※ CHROME_EXTENSION_ID : Chrome 拡張のID
  2. Chrome 拡張 の manifest.json に https://apis.google.com という URL を content_security_policy ホワイトリストに追加

をする必要があります

参考: https://firebase.google.com/docs/auth/web/twitter-login?hl=ja

初回起動

Chrome 拡張機能をインストールしたときや、App が更新されたときの一度だけスクリプトを実行するためには以下のものを呼び出す

参考: https://developer.chrome.com/extensions/background_pages#initialization

Firebase Cloud Functions

Cloud Functions を開発する
  1. ライブラリをゲット
  2. login して色々もらってくる
  3. functions/index.js にゴニョゴニョ書いていく
環境変数の確認・追加・削除

PROJECT_NAME : firebase のプロジェクト名

確認

追加

以下のようにセットされる

削除

参考: https://stackoverflow.com/questions/45820280/how-to-unset-firebase-cloud-functions-environment-variable

環境変数をプログラム内で呼び出す

例として以下のものが環境変数で定義されているとします

参考: https://firebase.google.com/docs/functions/config-env?hl=ja

Cloud Functions から 外部 API へ Request

無料バージョンだ 外部 API を叩くことができない

そのため、定額バージョンが従量制バージョンに課金する必要がある

※ 公開できないのはこの制約があるためです

EX) エラーログ

cors を導入

cors を導入していないと firebae から Response をもらうときにエラーがでる

cors に準拠してないよばーかばーかといわれます

EX) エラーログ

手っ取り早い方法は unctions.https.onRequest{} 関数内の直近に cors を定義してあげる

参考: https://qiita.com/seya/items/0f12bd09c8e856123bc3

テスト

Cloud Functions のデプロイは大変時間がかかります

そのため、ローカルでサーバーを立てて検査をすることができます

コマンド

参考: https://firebase.google.com/docs/functions/local-emulator

実際に作ってみて

はじめて Chromej 拡張 App を作ってみました

もっと大変なのかと思いましたがそうでもなく、意外とぱぱっとつくることができました

サーバー側である Firebase も新しい使い方がわかって面白かったです

そして、今回作った App ですが個人的には満足です

利用としていた Twitter クライアントとなりました

これを使用して気兼ねなくメモをとったり独り言をいったり、わからなかった箇所の解決策をつぶやいたりしようと思います

そして、ブログに記事にすることでもっとブログ収益を増やしたいです

スポンサーリンク