自分用のChrome拡張をスッと作る(ログ)

自分は基本的にtampermonkeyに雑に用意することが多く、それで事足りることが多いがChrome拡張を書く練習として作ってみる。

今回は、GitHubのヘッダーに自分のTODOリストへのリンクを追加する。自分はTODO管理をGitHubのプライベートレポジトリで運用しているのでどこからでもそれへのパスがあると非常に便利。

検索すると過剰なテンプレートが多いが、manifest.json さえあれば基本的によさそうだ。それに最新のChromeに対応すればいいので、特にトランスパイルは必要ない。まあライブラリが必要になればバンドルの必要があるので、webpackが必要になりそうだが今回は必要ない。

$ tree
.
├── content.js
└── manifest.json

manifest.json にいくつかの設定を書く。webページないのコンテンツをいじりたい場合は、content_scripts にどのサイトで実行するかや実行するスクリプトへのパスを追加する。公開する場合は、iconの画像等を用意する必要があるが、個人で使うなら関係ない。

{
  "name": "GitHub-Header-Plus",
  "description": "HeaderにLinkを追加",
  "version": "0.1.0",
  "manifest_version": 2,
  "content_scripts": [
    {
      "run_at": "document_start",
      "matches": [
        "https://github.com/*",
        "https://gist.github.com/*"
      ],
      "js": [
        "content.js"
      ]
    }
  ]
}

あとは、雑にスクリプトを書くだけ。

function insert({ title, href }) {
  const li = `
    <li>
      <a
        class="js-selected-navigation-item HeaderNavlink px-2"
        href=${href}
      >
        ${title}
      </a>
    </li>`
  document
    .querySelector('ul.flex-items-center')
    .insertAdjacentHTML('beforeend', li)
}

document.addEventListener('DOMContentLoaded', () => {
  const todo = {
    title: 'Todo',
    href: '/akameco/works/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc', // ここに任意のurlを追加する
  }
  insert(todo)
  console.log('👍 add todo')
})

あとは、chrome://extensions/ にアクセスしてパッケージ化されてない拡張としてディレクトリを指定してあげれば完了だ。

よくあるようにポップアップで任意のLinkを追加できれば汎用的になるので、公開はできる感じになるだろうが、記事を書きつつ30分でする作業だとここで限界。おわり