ダウンロード ／ 動作確認 ／ 実装する

ダウンロード

Chrome拡張を簡単に作れるテンプレとライブラリ造ったので紹介

動作確認

manifest.json を更新
"matches" の URL をこの拡張を有効にしたい URL に置き換える

Chrome で動かしてみる
Chrome 拡張を Chrome に取り込む

対象URL(https://twitter.com/)へアクセス
成功なら Title の頭に ◆ と ■ が交互に表示されて回ってるようになる

F12 で「デベロッパーツール」を開く
Console に下記文言が出力されていることを確認

実装する

content_script.js に実装
デフォルト

//----------------------

$(function () {

    //↓疎通確認コード：タイトルの■が回転するはず

    console.log('Chrome拡張の疎通確認コードが動いています。動作確認ができたら削除してください。');

    let flag = false;

    setInterval(function () {

        document.title = (flag ? "■" : "◆") + document.title.replace(/^[■◆]/, '');

        flag = !flag;

    }, 1000);

    //↑疎通確認コード

});

data属性に特定の値を持つノードを選択
HTM

<div data-hoge="a">あ</div>

jQuery

$(function(){

    var elem = $('[data-hoge="a"]');

    console.log(elem.text());

})

console
あ

ChEx.jsを外す
干渉することがあるため、manifest.jsonより削除

"js": ["jquery-2.2.0.min.js", "content_script.js"]