先日からTweet: Now Browsing!というChrome拡張が正常に動作しなくなってしまったという情報をTwitterなどでちらほら見かけるようになりました。
完全に同じものではありませんが、簡単に似たような動きをするものを作れそうだったので作ってみました。

作ったもの

Tweet This Page - Chrome Web Store

元ネタの拡張機能のように多くの人に使ってもらえるとは余り思っていませんが、Twitter APIを使うとどうしてもTwitter APIの仕様変更や制限の影響を受けてしまいます。

そのためこの拡張機能ではTwitter APIは使用せず、右クリックメニューに特定の文言とともにTwitterの投稿画面を新しいタブで開くメニューを追加するようになっています。

『Tweet This Page』をクリックすると以下のような画面のタブが開きます。
例として、YouTubeの急上昇ページでやってみました。

この部分について、元となった拡張機能とは違った挙動となっていて気に入らないという方も居るのではないかなと思いますが、メンテナンスの都合など考えてこのような形にしました。

また、今の所『NowBrowsing: タイトル URL』というフォーマットで固定になっていて、ツイートの画面を開いて手動で変えてから投稿する以外では変更できません。

もしFeature Requestなどありましたら、TwitterかGitHubのIssuesまでお願いします。自分も頻繁に使っているので、もしかしたらしれっと機能が追加されるかも知れません。

それと、自分があまりFirefoxを使わないのでMozilla Add-ons(Firefox向け)では公開していないです。もし、Firefoxでも使いたいという方が居ましたら、Twitter、GitHub Issues、Qiitaのコメントなどでご連絡ください。多分審査含め数日で公開できると思います。

(余談)安直にTweet This Pageという名前にしたのですが、同じ名前のChrome拡張があって検索性に乏しくなってしまいました。気がついたのがリリース後だったので修正は諦めてしまいました…(名前被りには気をつけよう)
そのため、Chrome Web Storeで検索しても上位に表示されないかも知れません

技術的な話

リポジトリはこちらにMITライセンスで公開しています。

GitHub - shuymn/tweet-this-page

目新しいことは特にありませんが、

TypeScriptで書く(with eslint, prettier)
webpackでJavaScriptにトランスパイル&静的ファイルのコピー
バージョンアップのcommitがmasterにmergeされたらreleasesに成果物をzipで圧縮してリリース(GitHub Actionsを使用)

と言った感じで、テンプレートとして参考にしてもらえそうな感じで作ってあるので、今後Chrome拡張を作ってみたいと思っている方は是非参考にしていただけたら嬉しいです。

Chrome拡張のテンプレートとしては、いくつか候補がありますが今回はそれを参考にしつつ手動で環境を整えています。

参考にしたテンプレートや記事

webpackについて

webpackを扱う上で気をつけたことや工夫したことなどを書きます。

設定をTypeScriptで書くことにこだわらない

webpackの実行時にSyntaxError: Unexpected token importというエラーが出てしまい、軽く調べたのですが解決に至らず、そこまでしてTypeScriptで書くことに固執しなくても良いだろうと判断して、JavaScriptで記述しました。

VSCodeの場合は以下のようなJSDocを書いてあげるとプロパティ名などを補完してくれるので、おすすめです。

/**
 * @type import("webpack").Configuration
 */
module.exports = {
 // ...
}

設定を分割しない

chibat/chrome-extension-typescript-starterでは、webpack-mergeを使ってwebpack.config.jsをproductionビルドとdevelopmentビルドように分けていますが、今回はwebpackのmodeオプションを使って1ファイルで完結させるようにしました。

これはwebpackのドキュメントにも書いてあるのですが、

const config = {
  // ...
}

module.exports = (env, argv) => {
  if (argv.mode === "development") {
    config.devtool = "inline-source-map";
  }
  return config;
};

参考: https://webpack.js.org/configuration/mode/

このように記述することでwebpack --mode productionとwebpack --mode developmentでの挙動を変えることができます。
ここでは、developmentビルドでのみinline-source-mapを有効化しています。

その他参考にした記事など

俺の webpack.config.js-20200503 - mizchi's blog
- ts-loaderをtranspileOnly: trueにすること、CIでtypecheckを走らせるといった部分を参考にしました

TypeScriptの設定(tsconfig.json)について

GitHubに公開されているChrome拡張やテンプレートなどを見ると、compilerOptionsの module: CommonJSにしていることが多いのですがこの拡張ではmodule: ESNextにしています。

そもそも拡張機能自体が新しいバージョンのブラウザを使っていることがほとんどだと思うので、CommonJSじゃなくても良いのでは？と思ってそうしていますが、そもそもコード量が少なくて運良くトランスパイルに成功しているだけかも知れないです。
targetやmoduleを変えることでどのようにトランスパイルの動作が変わるのかしっかりと把握していなく申し訳ありませんが、今の所問題はありませんでしたということは記述しておきます。

Chrome Web Storeの審査について

記述が必須になっている事項を埋めて審査に出して1日ぐらいで公開されていました。
昨今の情勢の関係で審査が遅くなるかも〜みたいなことが(Chrome Web Storeの)Developer Dashboardに書いてありますが、この規模の拡張機能では特別時間がかかったりはしませんでした。

おわりに

このプロダクトで一番凝ったかもしれないReleaseのCIの話もしようかと思ったのですが、ちょっと趣旨から外れてしまうのでまた別の記事として公開しようと思っています。

読んでいる記事を右クリックメニューでツイート画面まで飛ばせるのはかなり便利で、こういったものをサクっとつくれるのはChrome拡張機能の良いところだなと思います(最悪オレオレ拡張機能ならStoreに公開せずともインストールできます)

この記事を読んで良かった、参考になったと思っていただけたら、LGTMやSNSでのシェアをしてくれたらとても嬉しいです。拡張機能も是非使ってみてください！

NowBrowsingを簡単につぶやくためのChrome拡張を作りました