Chrome拡張機能を作ってみよう③

23914 ワード
Chrome C# chrome-extension JavaScript JavaScript テキストリンク

前回はChrome拡張機能とローカルプログラムの連携までを書きました。
今回はその続きです。

URLの監視

特定のURLにアクセスした場合にメッセージを表示するため
URLの監視を行います。

監視を行うには
manifest.jsonのcontent_scriptsの項目にあるjsで行います。
今回ですと「message.js」です。

message.js
/*
    ■ URL監視
*/
$(function() {
  try{
    // background.jsにurlを送る
    chrome.runtime.sendMessage({method: 'checkurl', url: document.URL},
    errorHandle(function(response1) {
      // 必要ないけどとりあえず受け取る
      var message = response1.data;
    }));
  }catch(e){
    console.error(e);
  }
});

/**
 * 例外をまとめて処理する
 */
function errorHandle(process) {
    return function(){
      try {
        return process.apply(this, arguments);
      } catch (e) {
        chrome.browserAction.setIcon({path:"images/abnormal.png"});
        console.error(e);
      }
    };
  }

message.jsから受け取るためbackground.jsを以下の内容に修正しています。

background.js
/*
  初期起動時の処理
*/
// インストール時かバージョンアップ時
chrome.runtime.onInstalled.addListener(function() {
  initialize();
});

// ブラウザ起動時
chrome.runtime.onStartup.addListener(function() {
  initialize();
});


function initialize() {
  // ファイルダウンロード先
  var dlFileName = "http://localhost/sample.txt";
  // ファイルを取得
  $.ajax({
    url: dlFileName,
    type: "GET",
    dataType: 'binary',
    responseType:'arraybuffer',
    timeout: 500
  })
  // 成功時
  .done(errorHandle(function (response) {
    var data = response;
    // ArrayBufferで取得するので
    var textfiledata = String.fromCharCode(...new Uint8Array(data));
    console.log(textfiledata);
    // 渡す前にbase64エンコードしておく
    textfiledata = btoa(textfiledata); 
    // ダウンロードした内容をprogramに連携する
    chrome.runtime.sendNativeMessage('put.message',
    {Action: "putmessage", Data: textfiledata},
    errorHandle(function(response, thread){
      // デコードしてJSON形式にする
      var getData = JSON.parse(decodeURIComponent(response));
      // 受け取ったコードがエラーの場合
      if(getData.Code != 0){
        throw new Error('programでエラーが発生');
      }
      // 受け取ったデータをlocalStorageに保存しておく
      localStorage.setItem('urllist', atob(getData.Data));
      return true;
    }));
    // 成功した場合は拡張機能のアイコンを切り替える
    chrome.browserAction.setIcon({path:"images/success.png"});
    // localStorageにステータスを保存
    localStorage.setItem('Status', 'ok');
  }))
  // 失敗時
  .fail(errorHandle(function () {
    // localStorageにステータスを保存
    localStorage.setItem('Status', 'ng');
  }));
  return true;
}

/**
 * Chrome拡張全体用
 */
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  switch (request.method) {
    // マニフェストファイルの内容を取得する
    case 'getManifest':
      var manifest = chrome.runtime.getManifest()
      sendResponse({data: manifest})
      break;
    // URLを受け取る
    case 'checkurl':
      var url = request.url;
      // urllistの内容と一致するか確認する
      localStorage.setItem('match', 'URLが一致しません。');
      var urllist = JSON.parse(localStorage.getItem('urllist'));
      for(var key of Object.keys(urllist)){
        if(url == urllist[key]){
          // 含んでいる場合
          localStorage.setItem('match', 'URLが一致します。');
          sendResponse({data: "URLが一致します。"});
          break;
        }
      }
      break;
    case 'getApInfo':
    default:
      console.log('no method:' + request.method);
      break;
  }
  return true;
});
/**
 * 例外をまとめて処理する
 */
function errorHandle(process) {
  return function(){
    try {
      return process.apply(this, arguments);
    } catch (e) {
      chrome.browserAction.setIcon({path:"images/abnormal.png"});
      console.error(e);
    }
  };
}

あとはメッセージを表示するためpopup系を修正します。

popup.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">

    <link href="../css/popup.css" rel="stylesheet">

    <script src="../js/jquery-3.4.1.js" ></script>
    <script src="../js/popup.js" ></script>
  </head>

  <body id="body">
  <div class="box">
    <div class="header">
      <h3 style="margin: 5px 0">動作状況</h3>
    </div>
    <div>
      <p id="status"></p>
    </div>
    <div>
      <p id="match"></p>
    </div>
  </div>
  <div class="footer">
    <div id="productver"></div>
  </div>
  </body>
</html>
popup.js
$(function() {
  /*** localStorageからステータスを取得。 ***/
  var Status = localStorage.getItem('Status');
  var match = localStorage.getItem('match');
  if(Status == 'ok'){
    $('#status').html('<b>正常</b>');
    $('#match').html(match);
  }else{
    $('#status').html('<b>異常</b>');
  }
  // 特に意味はないけどマニフェストファイルのバージョン情報を取得する
  chrome.runtime.sendMessage({method: 'getManifest'},
  function(response) {
    var manifest = response.data;
    $('#productver').text(manifest.name + '　ver.' + manifest.version);
  });
});

拡張機能の作成については以上になります。
次回はChrome拡張機能のインストールについて投稿します。

JAva二分検索実装
JAvaデータインポートノート