Chrome拡張機能のすすめ

Japanese Forum 質問とアドバイス アンバサダーのヒント
,
1
目次:
私は日本でもトップレベルの面倒くさがりの人間だと思います。効率化を求めて、これまでChrome拡張機能を探し、そして自分で作ってきました。個人の限られた知識の範囲内ですが、おすすめの拡張機能や、作り方をまとめました🤩

使う:

全員におすすめ

Asana

思いついたアイデアのメモや、今開いているWebページを、簡単にAsanaタスクとして追加できます。ツールを使う上で、入力を手軽に行えることは非常に重要です！

Asana Expander

タスク詳細ウィンドウで、長いコメントの「もっと見る」を自動的にクリックします。ブックマークレットの「2-1-2. :arrow_up_down: コメントの展開」を併用するのもおすすめです。

Asana Load More

タスク詳細ウィンドウで、サブタスクの数が多い場合、「サブタスクをもっと見る」を自動的にクリックします。
デフォルトでは20件のサブタスクしか表示されないので、このクリックの手間が減るのはとても快適です。
Manifest V3に移行されていないので、ウェブストアから非表示になってしまいました。現在新規インストールする場合は、GitHubのコードを手動でブラウザーに読み込む必要があります。(後述)

Office Editing for Docs, Sheets & Slides

Asanaに添付されているWord、Excel、PowerPointのファイルを、ブラウザーのタブで直接開いて内容を確認できます。ブラウザーからファイルをダウンロードして、Wordなど別のプログラムで開く必要はありません。

ニーズによってはおすすめ

Asana2Go

Asanaのデータを非常に多様な形式でレポート、エクスポート、印刷できるツールです。

ウェブストアでAsana拡張機能を検索すると、他にも面白いツールがたくさんあるのですが、紙幅と時間の都合で割愛します。長期間アップデートされていないものは動かなくなっているかもしれません。

Stylish

Asanaに対応したCSSを検索したり、自分でカスタムCSSを書いたりすることができます。Asanaの色やデザインをカスタマイズしたいとき、世界の他の人も同じことを考えているかもしれません。

おすすめしない or 注意が必要

AdBlock

もしかすると世界で最も有名なChrome拡張機能かもしれません。Webページの広告を非表示にするツールです。
これをインストールしておくこと自体には問題ありませんが、Asanaアプリ (app.asana.com) や他のAsanaサイト (asana.com/guide など) が正しく機能しなくなることがあるので、それらのURLは許可 (除外) しておくことがおすすめです。

Asana Navigator

Asanaに色々なナビゲーション機能を追加したChrome拡張機能です。
UIのDOM (HTMLコード) を直接いじる拡張機能のため、UIが変わるたびに影響を受け、現在ほとんどの機能が動きません。「あったらいいな」レベルの機能を詰め込みすぎてメンテナンスしきれなくなりました。
機能を削ぎ落としたシンプル版として再出発する予定です。

Asana Batch

複数のメンバーをグループとして登録し、Asanaタスクのコラボレーターとして一括で追加することを目指した拡張機能です。
現在は、「別のタスクのコラボレーターを、別のタスクにコピーする」という機能だけ実装しています。
フォーラムでも要望が多いので、Asanaの公式の対応を強く期待しつつ、時間があれば開発を進めます。

インストール方法

Chrome ウェブストア

インストール手順については、Chromeの公式ガイドをご覧ください。
アイコンをクリックして操作する場合や、アイコンに情報が表示される場合は、インストール後にツールバーにピン留めしておくのがおすすめです。

手動インポート

:warning: 信用できる人の作成した、信用できる拡張機能のみインストールすることをおすすめします。
ウェブストアで非表示になった拡張機能や、個人的に開発し、個人的に共有する拡張機能など、Chrome ウェブストアで配布されていない拡張機能は、手動でインポート可能です。
GitHubからZipダウンロードしたフォルダーを、chrome://extensions で開発者モードをオンにし、読み込みます。
例えば前述のAsana Load Moreは、GitHubからこのZipファイルをダウンロードできます。

GitHubからのダウンロードと、手動インストール
GitHubからのダウンロードと、手動インストール2126×762 115 KB

他のブラウザー

  • EdgeやBraveなどでは、Chromeウェブストアの拡張機能をそのままインストールできます。
  • 開発者視点の話ですが、Chromeの拡張機能は、ほんの少しの変更 (Zipする範囲を変えるなど) により、Firefoxのストアにリリースすることもできます。

作る:

特徴

Asanaブックマークレットのご紹介 でいくつかの開発方法を分類しました。

Table 4.1 from bookmarklet topic-ja
Table 4.1 from bookmarklet topic-ja1620×1280 358 KB

Chrome拡張機能は、Asana APIをフルに (POST/PUT/DELETEを含め) 使用する方法の中で、一番手軽だと言えます。個人アクセストークンが不要であること、テンプレートが豊富に用意されていることなどが理由です。
Webページがロードされたら自動的に処理を実行するなど、クリックが必要なブックマークレットに比べても便利です。また、キーボードショートカットも登録できます。

ガイド

基本的には、Googleの公式ドキュメントとAsana APIのドキュメントを読み、サンプルを参考にして開発することになると思います。

主な構成要素

  • manifest.json: 拡張機能の概要や設定を書き込むファイルです。
  • popup (action): アイコンをクリックした時に表示する画面や実行する処理を定義します。
  • content_scripts: 開いているWebページの内容や要素を操作する処理を定義します。
  • background: Asana APIとのやりとりを行います。セキュリティ上popupやcontent_scriptsから直接APIを呼べないので、「メッセージ」を介してbackgroundに任せます。
  • options: ユーザーがカスタマイズするオプションを定義します。

参考にする

最小限のコアの部分から、少しずつコードを書き始めましょう！すべてを一から書くよりも、既存の拡張機能を参考にし、必要な場所だけを書き換えると楽な場合があります。

GitHub

GitHubからコードをZipでダウンロードする、git cloneする、フォークする、などが可能です。
どちらも手前味噌ですみませんが、Manifest V3に対応、純粋なJavaScriptで書いたものです:

ローカルのソースコード

ソースコードが公開されていないChrome拡張機能でも、ウェブストアからインストールしたソースコードは必ずコンピューター上に保存され、参照することができます。
詳しい方法は「Chrome拡張機能 Windows/Mac 保存場所」などのキーワードでweb検索してみてください。

注意点

ライセンス周り

オープンソースのコードを再利用する場合、MIT LICENSEなどのライセンスがあれば、それに従う必要があります。
ただし、大部分をそのまま利用する場合を除き、私が書いたコードを再利用する場合には、それほど気にしなくて結構です。

※Manifest V2/V3

セキュリティやパフォーマンスの観点から、Chrome拡張機能のバージョンのメジャーアップデートがあり、最近V3が必須化されました。
Manifest V2のコードを参考にする場合は、必要な変更がいくつかあるので、ご注意ください。

DOM操作

操作対象は大きく分けるとAsana APIとDOM要素が考えられます。
AsanaのUIやデザインの変更に伴ってDOMは変化が激しく、コードのメンテナンスが必要です。なるべくAsana APIを使ったrobust (堅牢, 安定) なコードを書くことを考えましょう。

タスク説明欄の操作:
document.querySelector などを使用して、説明欄のテキストを直接取得・操作することも可能ではあります。この場合、content_scriptsを書く必要があります。
URL (window.location.href) からタスクのIDを取得し、Asana APIにPUTリクエストを送る方が、長い目で見ると確実です。

AI

ChatGPTにやりたいことを伝えるとChrome拡張機能のソースコードを書いてくれると聞いて生成してもらいました。確かに役に立つのですが、一部まったく機能しないコードもあり、成果物を調整するためにはやはり知識が必要でした。例えば、ページの内容にアクセスするために、content_scriptsを使用せず、chrome.tabsで何とかしようと頑張っていました。

配布する

上記「インストール方法」にあるように、以下のような選択肢があります。

  • Chromeウェブストアで公開する (公開、限定公開、非公開を選べます)
  • フォルダーをZipして渡す

まとめ

使ってみたい拡張機能や、作ってみたい拡張機能はありましたか？
作成した拡張機能があれば、ぜひウェブストアで公開し、フォーラムでも宣伝してみましょう。
この投稿がお役に立てば幸いです！

英語版: An Invitation to the World of Chrome Extensions

2 Likes