Chrome拡張機能のすすめ

[ShunS]

目次:

使う:
    全員におすすめ
        Asana
        Asana Expander
        Asana Load More
        Office Editing for Docs, Sheets & Slides
    ニーズによってはおすすめ
        Asana2Go
        Stylish
    おすすめしない or 注意が必要
        AdBlock
        Asana Navigator
        Asana Batch
    インストール方法
        Chrome ウェブストア
        手動インポート
        他のブラウザー
作る:
    特徴
    ガイド
        主な構成要素
    参考にする
        GitHub
        ローカルのソースコード
    注意点
        ライセンス周り
        ※Manifest V2/V3
        DOM操作
        AI
    配布する
まとめ

私は日本でもトップレベルの面倒くさがりの人間だと思います。効率化を求めて、これまでChrome拡張機能を探し、そして自分で作ってきました。個人の限られた知識の範囲内ですが、おすすめの拡張機能や、作り方をまとめました🤩

使う:

全員におすすめ

Asana

• Chrome ウェブストア
• GitHub (※Manifest V2、後述)
• 開発者: Asana
• 関連リンク: Asana Chrome 拡張機能: かんたんタスク追加 • Asana

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

Asana Expander

• Chrome ウェブストア
• GitHub
• 開発者: Stefan Zweifel
• 関連リンク: Asanaブックマークレットのご紹介

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

Asana Load More

• Chrome ウェブストア (※Manifest V2、後述)
• GitHub
• 開発者: Bill Coloe
• 関連リンク: サブタスクの表示の仕方の変更方法について

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

Office Editing for Docs, Sheets & Slides

• Chrome ウェブストア
• GitHub リンクは見つからず
• 開発者: Google
• 関連リンク: List of all previewable attachment types?

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

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

Asana2Go

• Chrome ウェブストア
• GitHub リンクは見つからず
• 開発者: Trilogi Software (フォーラムリーダー Larry Berger の会社)
• 関連リンク: Asana2GO + Asana: Asana のコンテンツの利用方法を拡張 • Asana

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

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

Stylish

• Chrome ウェブストア
• GitHub (古そうです)
• 開発者: SimilarWeb Ltd.
• 関連リンク: https://userstyles.org

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

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

AdBlock

• Chrome ウェブストア
• GitHub リンクは見つからず
• 開発者: Adblock, Inc.
• 関連リンク: https://asana.com/ja/guide/help/faq/connectivity#gl-troubleshooting

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

Asana Navigator

• Chrome ウェブストア
• GitHub
• 開発者: 私
• 関連リンク: Asana Navigator: Unofficial efficiency browser extension to enhance navigation for Asana tasks

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

Asana Batch

• Chrome ウェブストア
• GitHub
• 開発者: 私
• 関連リンク: コラボレータの一括登録、一括削除の機能が欲しい

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

インストール方法

Chrome ウェブストア

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

手動インポート

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

他のブラウザー

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

作る:

特徴

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

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で書いたものです:

• popupを使用する場合のおすすめ:
  Chrome-Extension-Example-Manifest-V3→
  上記、Asana公式の拡張機能の古いオープンソース版をアップデートしました。詳しくは "Chrome-Extension-Example" updated for Manifest V3 をお読みください。

• content_scriptsを使用する場合のおすすめ:
  Asana Navigator→動かない機能は多いですが、テンプレとして使用するには便利だと思います。

ローカルのソースコード

ソースコードが公開されていない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