twitterのフォロワー数を書き換えるブックマークレットを作りたい

タイトルの通り。
プログラムの知識は殆どないため見苦しいことになっているが悪しからず。

javascriptで要素を取得する

普通ならdocument.getElementById()を使えば良いのだが、今回はそうも行かない。
twitterのHTMLソースを見てもらえばわかるように、id名がほとんど使われていないからである。
かろうじて使われているclass名もランダムな文字列になっているので（Reactの仕組みによるものらしい）、あまり使いたくない。

そこで出てくるのがdocument.querySelector()である。
CSSセレクタを与えれば、どんな要素も指定することができる。
Document.querySelector() - Web API | MDN
余談だがこの関数にたどり着くまでに数時間を要した。

CSSセレクタを書く

CSSセレクタの書き方はこちらのサイトがとても参考になった。
意外と知らない!?CSSセレクタ20個のおさらい｜Webpark

さて、フォロワー数を示す要素を特定したいのだが、前述の通りidやclassは使えない（使いたくない）ので、今回はtitle属性を用いることにする。
 
以下はtwitterのソースの一部である。クラス名など煩雑な部分は省いた。

<a href="ここにユーザーIDが入る/followers" dir="auto" 
role="link" data-focusable="true" class="クラス1" title="0">
  <span class="クラス2">
    <span class="クラス3">
      0
    </span>
  </span>
  <span class="クラス4">
    <span class="クラス5">
      Followers
    </span>
  </span>
</a>

0やFollowerという文字が見えると思う。0というのはフォロワー数を表す数字である（つまりフォロワーが100人いれば100になる）。
最終目標はこの数字を書き換えることであるが、この数字を囲むspan要素には煩雑なclass要素しかない。
そのため、2段上のaタグに含まれるtitle属性を目印にしようというわけだ。

この方針でできたセレクタは次になる。

 a[title="0"] :first-child span

意味としては「title属性が"0"のaタグの中で、最初に現れる子要素の中の、spanタグ」を指定している。

ブックマークレットを作る

まずjavascriptを組む。フォロワー数は適当に1千万人にした。

var element = document.querySelector('a[title="0"] :first-child span');
element.textContent = "10000000";

次に、実際にブックマークレットを作っていく。
参考にしたのはこれらのサイト。 
ブックマークレット／Bookmarkletの作り方 - catch.jp-wiki
Bookmarkletを作ろう(準備編） - Qiita

作ったjsコードを
javascript:(function(){ここにそのまま入れれば良い})();
ということはわかった。

以下のサイトで作成するとデバッグしてくれるので便利。
Closure Compiler Service

できた

こちら。

javascript:(function(){document.querySelector('a[title="現在のフォロワー数を入力"] :first-child span').textContent="なりたいフォロワー数を入力"})();

2つの入力欄に適切な数値を入力すると正常に動作した。