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

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

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

5992閲覧

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

Ante-Mode

総合スコア6

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/04/11 07:47

前提・実現したいこと

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

json

1{ 2 "name": "Edge拡張機能による調査", 3 "author": "(Your name write down here.)", 4 "version": "2", 5 "description": "TEST", 6 "background": { 7 "scripts": ["background.js","jquery.min.js","angular.min.js"], 8 "persistent": true 9 }, 10 "permissions": [ 11 "contextMenus", "tabs", "downloads", "https://*/*", "http://*/*" 12 ] 13}

②background.js

javascript

1//Edge の名前空間(browser) がなけれぱ chrome の名前空間を使用する 2var browser = browser||chrome; 3var result = ""; 4 5browser.contextMenus.create({ 6 id: 'menu_1st_extension', 7 title: '"%s"を取得', //%s は選択している文字列で置き換わる 8 contexts: ['selection'], //選択しているときのみメニューに表示される 9 onclick: (info, tab)=>{ //クリックされた際のアクション 10 // タブ情報を取得 11 GetOrgTabInfo(); 12 13 // 0.5秒遅延させる ※browser.tabs.queryが非同期なため 14 setTimeout(function(){ 15 OutputResult(); 16 }, 500); 17 } 18}); 19 20/** 21* Tab情報取得 22* 23* @param なし 24* @return なし 25*/ 26function GetOrgTabInfo() { 27 browser.tabs.query({}, (tabs) => { 28 for (let tab of tabs) { 29 this.result = this.result + "Title:" + tab.title + "\n"; 30 this.result = this.result + "Url:" + tab.url + "\n"; 31 } 32 }); 33} 34 35function OutputResult(){ 36 if (this.result != ""){ 37 alert(this.result); 38// ■ファイル出力方式1:WScript.CreateObject:NG 39// SCRIPT5009: 'WScript' is not defined 40// FileExport01(this.result); 41// ■ファイル出力方式2:HTML5 BLOB 42// SEC7134: リソース 'blob:ms-browser-extension://Edge_CC03413E48944602882F3D4B240A4BF2/4dc6e12c-ca60-4e4f-b9a1-932067ab04e6' を読み込むことはできません。 43// FileExport02(this.result); 44// ■ファイル出力方式3:FileSystem API ※Google Chrome だけか? 45// SCRIPT5009: 'webkitRequestFileSystem' is not defined 46// FileExport03(this.result); 47// ■ファイル出力方式4:window.navigator.msSaveOrOpenBlob 48// SCRIPT16386: インターフェイスがサポートされていません 49// FileExport04(this.result); 50 this.result = ""; 51 } 52} 53 54// ■ファイル出力方式1:WScript.CreateObject 55function FileExport01(pResult){ 56 // 新規ファイル作成 57 var fs = WScript.CreateObject("Scripting.FileSystemObject"); 58 var file = fs.OpenTextFile("text.txt", 2, true, 0); 59 file.Write(pResult); 60 file.Close(); 61} 62 63// ■ファイル出力方式2:HTML5 BLOB File API 64function FileExport02(pResult){ 65 var content = pResult; 66 var blob = new Blob([ content ], { "type" : "text/plain" }); 67 var a = document.createElement('a'); 68 a.href = URL.createObjectURL(blob); 69 a.setAttribute('download', "tmp.txt"); 70 a.dispatchEvent(new CustomEvent('click')); 71 a.click(); 72} 73 74// ■ファイル出力方式3:FileSystem API ※Google Chrome だけか? 75function FileExport03(pResult){ 76 var errorCallback = function(e){}; 77 78 webkitRequestFileSystem(TEMPORARY, 1024*1024, function(fileSystem){ 79 fileSystem.root.getFile("testfile.txt", {'create':true}, function(fileEntry){ 80 fileEntry.createWriter(function(fileWriter){ 81 // ファイルの書き込み位置は、一番最後とする 82 fileWriter.seek(fileWriter.length); 83 // 出力行 84 var lines = ''; 85 // 0バイトファイルの場合、ヘッダ行を作成する 86 if (fileWriter.length == 0){ 87 var headers = new Array(addQuote("サイトタイトル"), 88 addQuote("URL")); 89 lines = headers.join(",") + "\n"; 90 } 91 // データ行の作成 92 var details = new Array(addQuote(request.siteTitle), 93 addQuote(request.siteUrl)); 94 lines += details.join(",") + "\n"; 95 var blob = new Blob([lines], { 96 type: 'text/plain' 97 } 98 ); 99 fileWriter.write(blob); 100 fileWriter.onwriteend = function(e) { 101 console.log('Write completed.'); 102 }; 103 fileWriter.onerror = function(e) { 104 console.log('Write failed: ' + e.toString()); 105 }; 106 }, errorCallback); 107 }, errorCallback); 108 }, errorCallback); 109} 110 111/* 112 CSVファイル用に、項目をダブルクオートで囲む 113*/ 114function addQuote(field){ 115 return "\"" + field + "\""; 116} 117 118// ■ファイル出力方式4:window.navigator.msSaveOrOpenBlob 119function FileExport04(pResult){ 120 121 // (1) Csvデータ生成 122 var csv = pResult; 123 124 // (2) BOM生成 125 var bom = new Uint8Array([0xEF, 0xBB, 0xBF]); 126 // (3) BOM 付き CSV ファイルの元となる Blob を作成 127 var blobObject = new Blob([bom, csv], { "type": "text/csv" }); 128 129 // ◆IEか他ブラウザかの判定 ※msSaveBlob関数の存在を確認 130 if (window.navigator.msSaveBlob) { 131 // ●IE/Edgeなら独自関数を使用 132 // 拡張機能の場合、SCRIPT16386: インターフェイスがサポートされていませんが発現 133 window.navigator.msSaveOrOpenBlob(blobObject, "data.csv"); 134 } 135 else { 136 // ●それ以外はaタグを生成してイベントを発動させる 137 var url = ""; 138 var wkBrowser = IsBrowser(); 139 if (wkBrowser == "chrome") { 140 var link = document.createElement("a"); 141 link.target = '_blank'; 142 link.download = "data.csv"; 143 link.href = URL.createObjectURL(blobObject); 144 link.click(); 145 } 146 else { 147 window.location.href = URL.createObjectURL(blobObject); 148 } 149 } 150} 151

試したこと

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

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

Microsoft Edge 41.16299.248.0

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問