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;
}

만든 확장 기능을 사용할 수 있도록

google에 로그인

chrome://extensions/ 방문

툴바의 개발자 모드를 ON으로 한다 image.png

[패키지되지 않은 확장 기능 불러오기]에서 확장 기능을 만든 폴더 가져오기

크롬 도구 모음에 아이콘이 표시되면 설정 완료

요약

공개하는 것을 생각하면 URL을 토해낼 때 GAS를 사용하고 있기 때문에 실행 횟수 등의 제한에 걸려 버릴 가능성이 있다.
스프레드 시트가 아닌 로컬로 내뿜을 수 있도록 개선하고 싶습니다,,,.

참고

페이지 제목과 URL을 얻기 위해 Chrome 확장 프로그램을 만들었습니다.
Chrome 확장 프로그램과 GAS를 함께 사용하는 예