LoginSignup
0
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@PoodleMaster(ぽむた)

【ブラウザ拡張機能】chrome拡張で便利ツールを作成

Last updated at Posted at 2021-11-11

➊ はじめに

PowerAutomete for Desktopで簡易なスクレイピングやってみましたが、大まかな原理は一緒なので、ブラウザ拡張機能からできたら楽しそうだなと思ったので、こちらもやってみたいと思います。

➋ どんな感じ

「 https://qiita.com/PoodleMaster 」に表示されている記事を、Chrome拡張機能のアイコンボタンを押下することにより、「記事URL、記事題名、記事LGTM数を収集し、一覧化」します。

➌ 用意するもの

まずは、Chrome拡張機能開発者向けのドキュメントを熟読し全てを理解します。（嘘です）

用意するもの 説明
Chrome/Edge webブラウザ。
manifest.json 主にアプリの基本的な情報が含まれているファイル。
background.js バックグラウンドサービスワーカー。イベントをリッスンして応答することができます。本アプリでは、拡張機能ボタンの押下をトリガにメッセージを送信します。
script.js 拡張ツール本体。background.jsからのメッセージをトリガとしてツールを実行します。
icon-32x32.png 拡張機能のアイコン。32x32pxのPNGを適当に作ってください。

➍ manifest.json

マニフェストは、Version3で記述しました。見様見真似でOKです。

manifest.json
{
    "manifest_version": 3,
    "author": "PoodleMaster",
    "homepage_url": "https://qiita.com/PoodleMaster",
    "name": "Qiita情報収集",
    "description": "Qiitaから情報を収集します",
    "version": "0.1",
    "icons": {
        "32": "icon-32x32.png"
    },
    "content_scripts": [{
        "matches": ["https://qiita.com/PoodleMaster"],
        "js": ["script.js"]
    }],
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_icon": "icon-32x32.png",
        "default_title": "Qiita情報収集"
    },
    "permissions": [
        "tabs",
        "background"
    ]
}

➎ background.js

(1) クリックイベント

chrome.action.onClickedを使用して、GoogleChromeツールバーの拡張機能のアイコンを制御します。アクションアイコンがクリックされたときに発火し、content scriptへメッセージ送信を行います。

background.js
chrome.action.onClicked.addListener(function(tab) {
  chrome.tabs.sendMessage(tab.id, "Action");
});

➏ script.js

(1) メッセージ受信イベント

chrome.runtime.onMessageを使用して、メッセージ受信待ちを行います。メッセージ受信時発火し、qiita_getter関数を実行します。

script.js (snippet)
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request == "Action") {
    qiita_getter();
  }
});

(2) 記事URL/題名/LGTMの要素取得

window.document.querySelectorAllにて、指示されたCSSセレクターに一致する文書中の要素のリストを取得します。

script.js (snippet)
  // 記事URLと記事題名収集
  const docList10 = window.document.querySelectorAll("a.css-1j37wyh");
  console.log(docList10);

  // 記事LGTM収集
  const docList20 = window.document.querySelectorAll("div.css-1laxd2k");
  console.log(docList20);

CSSセレクターの調べ方は、調べたい箇所を[右クリック]し、出てきたメニューから[検証]を選択すると、「デベロッパーツール」が起動するので、それで調べることができます。

(3) まとめ

それでは、(1)と(2)をまとめていきますよー。
あとは、取得した全データから表示するものを切り出したり、テーブルを作成したり、見やすくするためのstyleなども付け加えるため、ゴニョゴニョしていきます。

script.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request == "Action") {
    qiita_getter();
  }
});

function qiita_getter() {

  var arrUrl = ["URL"];     // 記事URL
  var arrSub = ["Subject"]; // 記事題名
  var arrLgtm = ["LGTM"];   // 記事LGTM

  // 記事URLと記事題名収集
  const docList10 = window.document.querySelectorAll("a.css-2p454n");
  for( const item of docList10) {
    arrUrl.push(item.href);
    arrSub.push(item.innerText);
  }

  // ピックアップ記事を排除
  arrUrl.splice(1, 3);
  arrSub.splice(1, 3);

  // 記事LGTM収集
  const docList20 = window.document.querySelectorAll("span.css-a4xrgo");
  for( const item of docList20) {
    arrLgtm.push(item.innerText);
  }

  // ピックアップ記事を排除
  arrLgtm.splice(1, 3);

  // 新規作成ページ生成
  newPage = window.open("", "");

  // タイトル生成
  var titleJs = newPage.document.createElement('title');
  titleJs.innerText = "Qiitaデータ収集";

  // タイトル追加
  var headJs = newPage.document.head;
  headJs.appendChild(titleJs);

  // TABLE構成
  var r_end = arrUrl.length;  // 行数
  var c_end = 3;              // 列数

  // table要素を生成
  var tableJs = newPage.document.createElement('table');
  for (var r = 0; r < r_end; r++) {
      var trJs = newPage.document.createElement('tr');
      for (var c = 0; c < c_end; c++) {
          if (r == 0) {
            var tdJs = newPage.document.createElement('th');
          } else {
            var tdJs = newPage.document.createElement('td');
          }
          switch (c){
            case 0:
              str = arrUrl[r];
              break;
            case 1:
              str = arrSub[r];
              break;
            case 2:
              str = arrLgtm[r];
              break;
          }    
          tdJs.innerHTML = str;
          trJs.appendChild(tdJs);
      }
      tableJs.appendChild(trJs);
  }

  // table要素を追加
  var bodyJs = newPage.document.body;
  bodyJs.appendChild(tableJs);

  // style要素を生成
  const styleJs = newPage.document.createElement('style');
  styleJs.innerHTML = `
  table{
    width: 100%;
    border-collapse:separate;
    border-spacing: 0;
  }
  
  table th:first-child{
    border-radius: 5px 0 0 0;
  }
  
  table th:last-child{
    border-radius: 0 5px 0 0;
    border-right: 1px solid #3c6690;
  }
  
  table th{
    text-align: center;
    color:white;
    background: linear-gradient(#829ebc,#225588);
    border-left: 1px solid #3c6690;
    border-top: 1px solid #3c6690;
    border-bottom: 1px solid #3c6690;
    box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
    padding: 10px 0;
  }
  
  table td{
    border-left: 1px solid #a8b7c5;
    border-bottom: 1px solid #a8b7c5;
    border-top:none;
    box-shadow: 0px -3px 5px 1px #eee inset;
    padding: 10px 0;
  }
  
  table td:last-child{
    border-right: 1px solid #a8b7c5;
  }
  
  table tr:last-child td:first-child {
    border-radius: 0 0 0 5px;
  }
  
  table tr:last-child td:last-child {
    border-radius: 0 0 5px 0;
  }
`
  // style要素を追加
  headJs.appendChild(styleJs);

}

※Qiita HP改修による対応（2023/08/23対応）

Qiita HP改修によりclassの変更が合った場合は、下記を参考に適宜変更してください。

script.js
    // 記事URLと記事題名収集
    const docList10 = window.document.querySelectorAll("a.css-2p454n");
        ↓↓↓↓
    const docList10 = window.document.querySelectorAll("a.style-10d3113");
script.js
    // 記事LGTM収集
    const docList20 = window.document.querySelectorAll("span.css-a4xrgo");
        ↓↓↓↓
    const docList20 = window.document.querySelectorAll("span.style-mvmd7d");

➐ インストール

コードができたら、拡張ツールをインストールしていきます。このツールは「Chromeウェブストア」には公開はしていませんので、ブラウザの拡張機能をデベロッパーモードからインストールする必要があります。

※ちなみに、細かい手順は省きますが、同じ様な手順でインストールするれば、Edgeからでも動作します。（確認済み）

(1) ソースコードの入手

上記からソースコードを作ってもよいですが、作成済みのものを github にて公開しています。
必要に応じて、こちらから入手してください。

■ 公開ソースコード
https://github.com/PoodleMaster/QiitaExtention

(2) 拡張機能管理ページ

拡張機能をデベロッパーモードにするため、拡張機能管理ページにアクセスします。
アクセスの仕方はいくつかありますが、以下の手順でできます。

  1. Chromeの右上にある三点リーダ[︙]をクリックしてメニューを表示させる。
  2. 表示したメニューにある[その他のツール]－[拡張機能]をクリックし、拡張機能管理ページを表示させる。

■ 他の方法1
chrome://extensions/
上記へアクセスしてもOKです。

■ 他の方法2
ブラウザの右上にあるパズル[🧩]のようなアイコンをクリックすると、メニューが表示されます。メニューの最下部にある「拡張機能を管理」を押下してもOKです。

(3) デベロッパーモードON

  1. 拡張機能管理ページの右上にあるスイッチを[ON]にします。

(4) パッケージ化されていない拡張機能を読み込む

  1. 先程作成したmanifest.json、background.js、script.js、icon-32x32.pngをインストールホルダに格納します。インストールホルダは、拡張機能が動作している間は削除したり、移動したりできませんので、後々を考えて適当な場所に作成してください。win10であれば、例えば「%HOMEPATH%/QiitaExtention」あたりで良いかと思います。
1. 左上にある[`パッケージ化されていない拡張機能を読み込む`]ボタンを押下します。
  1. 先程のインストールホルダを選択すると、「Qiita情報収集」という名の拡張機能が追加されます。

(5) ブラウザにアイコンを表示させる

今回の拡張機能は、アイコンをボタン化していますので、ブラウザに表示させます。表示させ方は以下でできます。

  1. ブラウザの右上にあるパズル[🧩]のようなアイコンをクリックすると、メニューが表示されます。
  2. メニューの中に「Qiita情報収集」というのがあるので、これをピン留め[📌]して固定するとブラウザ上部に拡張機能のアイコンが表示されます。

➑ 実行結果

  1. まずブラウザから、以下のURLへアクセスします。

https://qiita.com/PoodleMaster

  1. 拡張機能のアイコンを押下します。
  1. 記事のURL、題名、LGTMを取得し、一覧化できました😉！

➒ 以上

Chromeの拡張機能は、できたら楽しいだろうなと思いきや、特にやることがないので敬遠していました。やってみると意外と簡単に作ることができました。一番の問題は、拡張機能で何をやりたいのかなどの「アイデア💡」ですね😅

お疲れ様でした😊

0
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?