質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

Microsoft Edge拡張機能 ファイル出力について

受付中

回答 0

投稿

  • 評価
  • クリップ 1
  • VIEW 2,502

Ante-Mode

score 6

 前提・実現したいこと

Edge拡張機能 によるファイル出力を行いたいです。
下記を参考にサンプルを作成中ですが、うまくいかない状況です。
https://blogs.msdn.microsoft.com/osamum/2016/07/05/how-to-make-extension-for-msedge/

何か解決策があれば教示願います。

 発生している問題・エラーメッセージ

Javascriptによるファイル出力する方式を下記の通り試しましたが、
いずれもうまくいかない状況です。

出力方式1:WScript.CreateObject:NG
エラー内容:SCRIPT5009: 'WScript' is not defined

出力方式2:HTML5 BLOB(FileAPI)
エラー内容:SEC7134: リソース 'blob:ms-browser-extension://Edge_CC03413E48944602882F3D4B240A4BF2/4dc6e12c-ca60-4e4f-b9a1-932067ab04e6' を読み込むことはできません。

出力方式3:FileSystem API ※対応しているのはGoogle Chrome だけか?
エラー内容:SCRIPT5009: 'webkitRequestFileSystem' is not defined

出力方式4:window.navigator.msSaveOrOpenBlob 
エラー内容:SCRIPT16386: インターフェイスがサポートされていません

後述の、②background.js内、OutputResult()関数で試行した経緯を記載しております。

 該当のソースコード

①manifest.json

{
    "name": "Edge拡張機能による調査",
    "author": "(Your name write down here.)",
    "version": "2",
    "description": "TEST",
    "background": {
        "scripts": ["background.js","jquery.min.js","angular.min.js"],
        "persistent": true
    },
    "permissions": [
        "contextMenus", "tabs", "downloads", "https://*/*", "http://*/*"
    ]
}

②background.js

//Edge の名前空間(browser) がなけれぱ chrome の名前空間を使用する
var browser = browser||chrome;
var result = "";

browser.contextMenus.create({
  id: 'menu_1st_extension',
  title: '"%s"を取得', //%s は選択している文字列で置き換わる
  contexts: ['selection'], //選択しているときのみメニューに表示される
    onclick: (info, tab)=>{ //クリックされた際のアクション
        // タブ情報を取得
        GetOrgTabInfo();

        // 0.5秒遅延させる ※browser.tabs.queryが非同期なため
        setTimeout(function(){
          OutputResult();
        }, 500);
    }
});

/**
* Tab情報取得
*
* @param なし
* @return なし
*/
function GetOrgTabInfo() {
    browser.tabs.query({}, (tabs) =>  {
      for (let tab of tabs) {
        this.result = this.result + "Title:" + tab.title + "\n";
        this.result = this.result + "Url:" + tab.url + "\n";
      }
    });
}

function OutputResult(){
    if (this.result != ""){
      alert(this.result);
// ■ファイル出力方式1:WScript.CreateObject:NG
// SCRIPT5009: 'WScript' is not defined
//          FileExport01(this.result);
// ■ファイル出力方式2:HTML5 BLOB
// SEC7134: リソース 'blob:ms-browser-extension://Edge_CC03413E48944602882F3D4B240A4BF2/4dc6e12c-ca60-4e4f-b9a1-932067ab04e6' を読み込むことはできません。
//          FileExport02(this.result);
// ■ファイル出力方式3:FileSystem API ※Google Chrome だけか?
// SCRIPT5009: 'webkitRequestFileSystem' is not defined
//          FileExport03(this.result);
// ■ファイル出力方式4:window.navigator.msSaveOrOpenBlob
// SCRIPT16386: インターフェイスがサポートされていません
//          FileExport04(this.result);
      this.result = "";
    }
}

// ■ファイル出力方式1:WScript.CreateObject
function FileExport01(pResult){
  // 新規ファイル作成
  var fs = WScript.CreateObject("Scripting.FileSystemObject");
  var file = fs.OpenTextFile("text.txt", 2, true, 0);
  file.Write(pResult);
  file.Close();
}

// ■ファイル出力方式2:HTML5 BLOB File API
function FileExport02(pResult){
  var content = pResult;
  var blob = new Blob([ content ], { "type" : "text/plain" });
  var a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.setAttribute('download', "tmp.txt");
  a.dispatchEvent(new CustomEvent('click')); 
  a.click();
}

// ■ファイル出力方式3:FileSystem API ※Google Chrome だけか?
function FileExport03(pResult){
  var errorCallback = function(e){};

  webkitRequestFileSystem(TEMPORARY, 1024*1024, function(fileSystem){
    fileSystem.root.getFile("testfile.txt", {'create':true}, function(fileEntry){
      fileEntry.createWriter(function(fileWriter){
        //  ファイルの書き込み位置は、一番最後とする
        fileWriter.seek(fileWriter.length);
        //  出力行
        var lines = '';
        //  0バイトファイルの場合、ヘッダ行を作成する
        if (fileWriter.length == 0){
          var headers = new Array(addQuote("サイトタイトル"),
                                  addQuote("URL"));
          lines = headers.join(",") + "\n";
        }
        //  データ行の作成
        var details = new Array(addQuote(request.siteTitle),
                                addQuote(request.siteUrl));
        lines += details.join(",") + "\n";
        var blob = new Blob([lines], {
            type: 'text/plain'
          }
        );
        fileWriter.write(blob);
        fileWriter.onwriteend = function(e) {
          console.log('Write completed.');
        };
        fileWriter.onerror = function(e) {
          console.log('Write failed: ' + e.toString());
        };
      }, errorCallback);
    }, errorCallback);
  }, errorCallback);
}

/*
  CSVファイル用に、項目をダブルクオートで囲む
*/
function addQuote(field){
  return  "\"" + field + "\"";
}

// ■ファイル出力方式4:window.navigator.msSaveOrOpenBlob
function FileExport04(pResult){

    // (1) Csvデータ生成
    var csv = pResult;

    // (2) BOM生成
    var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
    // (3) BOM 付き CSV ファイルの元となる Blob を作成
    var blobObject = new Blob([bom, csv], { "type": "text/csv" });

    // ◆IEか他ブラウザかの判定 ※msSaveBlob関数の存在を確認
    if (window.navigator.msSaveBlob) {
        // ●IE/Edgeなら独自関数を使用
        // 拡張機能の場合、SCRIPT16386: インターフェイスがサポートされていませんが発現
        window.navigator.msSaveOrOpenBlob(blobObject, "data.csv");
    }
    else {
        // ●それ以外はaタグを生成してイベントを発動させる
        var url = "";
        var wkBrowser = IsBrowser();
        if (wkBrowser == "chrome") {
            var link = document.createElement("a");
            link.target = '_blank';
            link.download = "data.csv";
            link.href = URL.createObjectURL(blobObject);
            link.click();
        }
        else {
            window.location.href = URL.createObjectURL(blobObject);
        }
    }
}

 試したこと

唯一、拡張機能ではない、純粋なEdgeにて、出力方式4の、
window.navigator.msSaveOrOpenBlob でファイル出力ができましたが、
拡張機能を経由した場合、
エラー内容:SCRIPT16386: インターフェイスがサポートされていません
が発現し、ファイル出力が行えない状況です。

 補足情報(FW/ツールのバージョンなど)

Microsoft Edge 41.16299.248.0

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る