🐦

TypeScript で作るシンプルな Chrome 拡張機能

2021/12/19に公開

Chrome

はじめに

僕は、ネットサーフィンが好きで日頃から Twitter のタイムラインに出てくる記事を読んだり、またそれらのリンクを投稿することが多いです。

しかし、サイトによっては Twitter へのシェアボタンがないサイトも珍しくなく、投稿する際は URL をコピーして投稿するしかなく少し面倒でした。そんな背景もあり今回 Chrome 拡張で解決できないかと思い作ってみました。

また少し前にこちらの記事を拝見して、なんか簡単に作れそうだなという印象を持ったのも 1 つの要因でもありました。（正直同じような拡張機能があるのは知っていましたが、自分で一から作ってみたいという衝動に駆られてしまいました笑）

作ったもの

現在表示しているサイトをツイートできる Tweet Current Page という超シンプルな Chrome 拡張機能を作りました。オープンソースで開発しているので良かったらバグ報告やフィードバックなどお気軽にいただけると幸いです。

使い方

まずは、下記のリンクからインストールしてください。

あとは、拡張機能のロゴをクリックすると、タイトル・URL を文章に含んだ状態で Twitter の小さなウィンドウが開きます。内容に問題がなかったらツイートボタンを押すだけです。Gif を見ても分かる通り、ウィンドウはツイートすると自動的に閉じるので、かなりストレスフリーです。

よく使う場合は、下記のようにピン留めしておくとアドレスバーの右側に表示されるようになります。

環境構築

使用しているのはざっくりと下記のような感じです。

ソースコード
- TypeScript
ビルド
- Webpack
静的解析
- husky + lint-staged
- Prettier + Eslint

この辺りはネット上の記事も多く、特に困ることなくストレスフリーな開発環境を整備できました。本当にありがたいです。下記に参考にした記事やテンプレートなどを記載します。

拡張機能のコアの実装

ポイントだけピックアップして解説します。ソースコードは GitHub に上げているので、詳細はそちらをご覧ください。

拡張機能のアイコンをクリックした際、現在開いているタブの情報を取得する

// 拡張機能のアイコンをクリックした際発火
chrome.action.onClicked.addListener((tab: chrome.tabs.Tab) => {
  getCurrentWindow(tab)
})

const getCurrentWindow = (tab: chrome.tabs.Tab) => {
  // タイトル、URL を取得
  console.log(`${tab.title}: ${tab.url}`)
}

ポップアップウィンドウを表示する

const openWindow = () => {
  const createData: chrome.windows.CreateData = {
    focused: true,
    // 好きな位置、サイズを指定
    left: 0,
    top: 0,
    height: 375,
    width: 500,
    type: "popup",
    url: `https://twitter.com` // 開きたいサイトの URL を指定
  }

  chrome.windows.create(createData, (window: chrome.windows.Window) => {
    // Do something
  })
}

マニフェストファイルを作成する

拡張機能は、公開するにあたって JSON 形式で拡張機能についての情報を定義する必要があります。
現在最新の Version 3 の仕様に従って今回は下記のような JSON を作成しました。

{
  "manifest_version": 3,  // マニフェストのバージョン
  // --- 拡張機能の概要
  "name": "Tweet Current Page",
  "description": "現在表示しているサイトをツイートできるシンプルな Chrome 拡張機能。",
  "version": "0.1.0",
  "icons": {
    "16": "icon_16.png",
    "48": "icon_48.png",
    "128": "icon_128.png"
  },
  // ---
  "action": {}, // 独自にポップアップ画面を表示したい場合
  "background": {  // 裏でサービスワーカーとして動したい場合
    "service_worker": "background.js"
  },
  "content_scripts": [],  // 特定のサイトで実行したい場合（eg. CSS を変更したり、DOM 操作したり…）
  "permissions": ["tabs"]  // Chrome API を使用する場合に必要となる権限を記載
}

申請・デプロイに対する課題

拡張機能を公開するにあたって、Google への申請が必要です。現在は、手動で Chrome Web ストアに申請を出しています。そこまで頻繁に変更を入れるわけではないですが、手動でやるのも面倒なので、もう少し仕組みを改善できないかなと模索しています。何かいいアイデアや方法があれば是非コメントや DM などでご教授いただけると幸いです。

まとめ

今回初めて Chrome 拡張を作ってみたので、記事にまとめてみました。複雑なことをしようとするともう少し手間がかかるかも知れませんが、ちょっとしたものであればサクッと作って公開までできてしまうんだなと感じました。

僕みたいに Twitter にサイトのリンクをツイートするという方は是非インストールして使ってみてください！

参考にさせていただいたサイト

GitHubで編集を提案