Chrome拡張機能で特定のサイトのurlを自動収集してスプレッドシートに出力する

作ったもの

アクセスしたページのURLがgoogleのスプレッドシートに自動で吐き出されます。

対象のURL以外は吐き出されません。

拡張機能の実装

ディレクトリ構成

　URLを取得する拡張
    ├ manifest.json
    ├ content.js
    └ icon.png

manifest.json

Chrome:Manifest File Format
Chromeの拡張を作るのに必須のファイル。

{
  "manifest_version":2, //マニフェストファイル形式のバージョン。2を指定
  "name":"リヴリーの島のURLを出力する",　//必須。公開した時の表示名等になる
  "version":"1.0",
  "permissions": [ //要求するAPIなどの設定
    "https://script.google.com/*",
    "https://script.googleusercontent.com/*"
  ],
"browser_action": { //Chromeツールバー設定するアイコンの設定
    "default_icon":"icon.png"
},
"icons" : {　//アイコンの設定
    "128": "icon.png"
  },
  "content_scripts":[ //アクセスしたwebページの読み込む設定
    {
      "matches":[
         //このスクリプトが挿入されるページを指定
        "http://www.livly.com/room/myroom*" 
      ],
      "js":[　//一致するページに挿入されるJavaScriptファイルの設定
 　       "content.js"
      ]
    }
  ]
}

content.js

const gasUrl = "「Webアプリケーションとして導入」しているGASのURL";

$(function() {
        //開いてるページのurlを取得
        const url   = location.href;
        postGAS(url);
    });

function postGAS(url){
  const data = {
    url: url,
  }
  
  $.ajax({
      type: 'POST',
      url: gasUrl,
      data: JSON.stringify(data)
  })
  .done( function(data) {
      console.log("成功");
  })
  .fail( function(jqXHR, textStatus, errorThrown) {
      console.log("失敗");
   })
  .always( (data) => {
      console.log("処理終了");
  });
}

GASの実装

function doPost(e) {
  
  // エクステンションから送信されたデータを取り出す
  var params = JSON.parse(e.postData.getDataAsString());
  var url    = params.url;

  // スプレッドシートを取得
   var spredSheet = SpreadsheetApp.openById('スプレッドシートのID');
  // 出力するシート名を年月日にするので日時をパースする
   var today = Utilities.formatDate(new Date(), "JST", "yyyyMMdd");
 
  //シートの取得
  var sheet = spredSheet.getSheetByName(today);
  if(sheet == null){
    //今日の日付のシートが存在しない時シート作成
    var sheet = spredSheet.insertSheet(today);
  }   
  
  
  //urlの置換
  if ( !url.match(/smart/)) {
    //スマホ版ではない
    url = url.replace("myroom", "myroom_smart");
  } 
   // スプレッドシートの最終行に書き出す
   sheet.appendRow([url]);
 
  // 拡張機能にレスポンスを返却
  var output = ContentService.createTextOutput();
  output.setMimeType(ContentService.MimeType.JSON);
  output.setContent(JSON.stringify( { sucsess: true }));
  return output;
}

作った拡張機能を使えるようにする

1. googleにログイン

2. chrome://extensions/にアクセスする

3. ツールバーのデベロッパーモードをONにする　image.png

4. [パッケージされていない拡張機能を読み込む]から拡張機能を作成したフォルダを読み込む

5. chromeのツールバーにアイコンが表示されたら設定完了

まとめ

公開することを考えるとURLを吐き出す時にGASを使っているので実行回数などの制限に引っかかってしまう可能性がある。
スプレッドシートではなく、ローカルに吐き出せるように改善したい、、、。

参考

ページのタイトルとURLを取得するChrome拡張を作った。
Chrome拡張とGASを連携させる例