常連

### テーマ・知りたいこと
ブラウザ上で動作するJavaScriptと、別の何かを組み合わせて、ローカルファイルの読み書きを可能にする方法をご提案いただきたいです。
### 背景
HTML、CSS、JavaScriptを用いて開発した、ブラウザ上で動作するアプリケーションから、HTMLと同じフォルダに配置したローカルファイル(テキスト、バイナリ問わず)を操作したいです。アプリケーションは自宅PCでのみ使用し、サーバーへのアップロードや、PCをWebサーバー化することなどは想定していません。
実際にローカルファイルに触るのはC#で開発したexeやdllになると思われますが、JavaScript上では、下記のような形で利用できることを理想とします。
```js
let str = await readTextFile("test.txt"); //読み込み
await writeTextFile("test.txt", str); //書き込み
```
読み込みだけなら```--allow-file-access-from-files```の起動オプションで起動したChromeで```XMLHttpRequest```や```fetch```が利用できることは知っています。
これまでに検討したことや、すでにやったことがあることを列挙します。
### C#で作成したCOMをActiveXObjectで利用する
IE限定。Chrome等のブラウザでは当たり前のように利用できるオブジェクトやメソッド、CSSのプロパティが利用できない。ブラウザで読み込んだときに一度だけ警告ダイアログが表示される。
### Chrome ExtensionとNative messagingの組み合わせ
C#で作成したexeとNative messagingを通じてやりとりする。
exeからChrome Extensionへの通信には1MBという制限がある(逆は4GB)。
### chrome.fileSystem
Chrome App限定。
### File System Access API
一度ファイル選択ダイアログで、操作するファイルを選択する必要がある。
### WebSocket API
 WebSocketサーバーとして動作するexeを作成し、JavaScriptのWebSocket APIでexeと通信する。JavaScriptから発行されたコマンドをWebSocket APIを通じてexeに送信し、exeがローカルファイルを作成する。
### 除外
「ブラウザ上で動作するJavaScript」であるため、
- Electronでexe化する
- C#で開発するアプリケーションにWebViewを配置し、その中のJavaScriptからC#のクラスやメソッドに触れる(いわゆるハイブリッドアプリケーション)
は方法として除外します。また、
- PCをApacheなどでWebサーバー化し、PHPなどを通じてローカルファイルの読み書きを行う
ことも除外します。

---
上記以外で方法があればご教授ください。
よろしくお願いします。

ブラウザ上で動作するJavaScriptからローカルファイルの読み書きをする方法について

javascriptのコードを作成中、Chorome の開発ツールで動作確認を行うと下記のようなエラーメッセージが出ます。
【エラーメッセージ1】
DevTools failed to load SourceMap: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

【エラーメッセージ2】
DevTools failed to load SourceMap: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/content.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

作成し、実行したのは下記のような非常に単純なソースコードです。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>   
</head>
<body>
    <h1>javascriptの練習</h1>
<script src="index.js"></script>
</body>
</html>
```
```javascript
console.log('hello world!');
```

コンソール上に"hello world!"は表示されますが、
既述のようなエラーメッセージも下に表示されてしまいます。
原因が何かわからず、困っております。
ネットで検索すると、実行上問題ないと書いてあるサイトもありましたが、
どうなのでしょうか？
ご教示いただけますと幸いです。

javascriptのコード実行中に、Chromeの開発ツール内にエラーメッセージが表示される。

input type=”file” で選択したファイルを、ブラウザ再立ち上げ時に、初期値としてセットすることはできないでしょうか？

検索してみますと、セキュリティ的な問題で、input type=”file”の書き換えができないように、制限されているとのことでしたが、なんとかして実現したいです。

一案としまして、Chrome拡張として作成し、chrome.storageに<input type="file">の要素ごと保存しておく方法を思いつきましたが、
chrome.storageに要素の保存はできないようです。
他に、IndexedDB等もあるようですが、今すぐに試すことはできないため、確認できない状態です。

どなたか、何らかの実現方法をご存じの方がいらっしゃいましたら、ご教授いただきたいです。
よろしくおねがいします。

input type=”file” の初期値をセットする方法は？

### 前提・実現したいこと
chromeの拡張機能開発の勉強中、いきなり壁にぶつかりました。
公式ドキュメント中のサンプルで、機能拡張アイコンをクリックでポップアップを表示させることは問題なくできました。
その簡単なカスタマイズとして、アイコンクリックでアラートメッセージを出そうとしているのですが、以下のエラーメッセージが出て立ち往生中です。

### 発生している問題・エラーメッセージ

```
Service worker registration failed
```
Service workerの登録に失敗している、ということはわかりますが、何が原因なのかが不明です。
(下記manifest.jsonの"sample.js"が黄色でハイライト表示されます)
manifest.jsonやsample.jsで足りない記述や間違っている部分などご指摘いただけましたら幸いです。

### 該当のソースコード

```json
//manifest.json
{
  "name": "Hello Extensions",
  "description" : "Base Level Extension",
  "version": "1.0",
  "manifest_version": 3,//Ver.88 later
  "permissions": [
      "activeTab"
  ],
  "action": {
    "default_icon": "icon_32.png"
  },
  "icons": {
    "16": "icon_16.png",
    "32": "icon_32.png",
    "48": "icon_48.png",
    "128": "icon_128.png"
  },
  "background": {
    "service_worker": "sample.js"
  }
}
```
```javascript
//sample.js
const test = "test"
```
※表題のエラーを通過させるため、JSファイルの内容は上記のようにシンプルな記述にしています。
### 試したこと

以下のようにbackgroundをcontent_scriptsに差し替えた際はサイトの読み込み時にアラートが表示されました。
（正常動作）

その他、末尾にセミコロンを付けてみても同様のエラー。


```json
"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["sample.js"]
  }
]
```
```javascript
//sample.js
window.onload = () => {
   alert("test")
}
```
### 補足情報（FW/ツールのバージョンなど）

Chromeのバージョンは88.0.4324.182です。

2021.03.10 追記
Qiita：[「自作のChrome拡張機能をManifestV3に移行してみた」](https://qiita.com/TiggeZaki/items/bb35afe43c347d38dc4e)にて、同様の現象を経験された方がいらっしゃいました。
JSファイルはmanifest.jsonと同階層でないといけないという記述がありましたが、そもそも同階層に配置しているにも関わらずエラーとなっているので原因がわかりません。

Chrome拡張機能、Manifest.json Ver.3(MV3)で読み込み時に”Service worker registration failed”となる

### 実現したいこと
メルカリで、ショップスかどうか判別する拡張機能を作りたいです

### 発生している問題・分からないこと
HTMLの書き換えすらしたことがなく、原因も分からず、初心者の私には手詰まりになってしまいました。



### 該当のソースコード

```manifest.json
{
  "name": "ショップス",
  "version": "3.0.0",
  "manifest_version": 3,
  "description": "ショップスに表示します",
  "content_scripts": [
    {
      "matches": [
        "https://jp.mercari.com/*"
      ],
      "js": [
        "script.js"
      ],
      "run_at": "document_end",
      "all_frames": true
    }
  ]
}

```

```script.js
window.addEventListener("load", main, false);
let after = document.createElement("p"); // <p></p> タグ作成

function main(e) {
    const jsInitCheckTimer = setInterval(jsLoaded, 1000);
    function jsLoaded() {
        if (document.querySelectorAll('html body') != null) {
            clearInterval(jsInitCheckTimer);
            let target = document.querySelectorAll("div[itemtype='ITEM_TYPE_BEYOND']"); // 追加したい要素を見つけてくる
            for (let i = 0; i < target.length; i++) {       // 追加したい要素ごとに繰り返し
                after.textContent = "これはメルカリShops";               // <p>Push Me!</p> タグに文字を追加
                target.appendChild(after); // 子タグとして追加
            };
        };
    };
};

```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
https://zenn.dev/ukkz/articles/69cda7047f23c9
非常に重くなり、エラーも出ず、タグの追加もされませんでした。
Twitterでは動きました。

https://qiita.com/3mc/items/c3c580ca5de4a2d3990d
エラーもでず、タグの追加もされませんでした。

### 補足
何卒、よろしくお願いいたします。

自作のChrome拡張機能が動きません

### 実現したいこと
chrome拡張のcontent_scriptsで、閲覧中のWebページにajaxCompleteのイベントリスナーをDOM注入したが、このイベントリスナーが実行されたことをcontent_script側で検知したい。

### 発生している問題・分からないこと
以下のソースコードで、ajaxCompleteのイベントリスナーが実行されたときに、
> console.log('call ajaxComplete');
のログは出力されるが、
> console.log( 'callback : ' + $(this).val() );
のログは出力されない。
一方で、対象のWebページの、$('#control_flg')のテキストボックスに対して、直接、手で値を入力すると、
> console.log( 'callback : ' + $(this).val() );
のログが出力される。
そもそも何をしたかったかというと、
ajaxCompleteでサーバから取得した値を、content_scriptsに渡して、
さらに、background.jsに渡して値を保存することで、
対象のWebページが画面遷移した後でもその値を取得して使えるようすることです。
これが実現できれば、まったく別のアプローチでも問題ありません。



### 該当のソースコード

```JavaScript、content_scripts
const injectScript = (filePath, tag) => {
	var node = document.getElementsByTagName(tag)[0];
	var script = document.createElement('script');
	script.setAttribute('type', 'text/javascript');
	script.setAttribute('src', filePath);
	node.appendChild(script);
	var controllFlg = document.createElement('input');
	controllFlg.setAttribute('id', 'control_flg');
	controllFlg.setAttribute('type', 'text');
	controllFlg.setAttribute('value', '0');
	node.appendChild(controllFlg);
	$('#control_flg').change(function() {
		console.log( 'callback : ' + $(this).val() );
	});
}
injectScript(chrome.runtime.getURL('web_accessible_resources.js'), 'body');

```

```JavaScript、web_accessible_resources.js
$(document).ajaxComplete(async function() {
	console.log('call ajaxComplete');
	$('#control_flg').change();
});
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
content scriptと、閲覧中のWebページのJavaScript環境が別のものであることが原因だと思われますが、この両者でイベントを連動させる方法が調べても分かりませんでした。

### 補足
特になし

chrome拡張のcontent_scriptsで、閲覧中のWebページにajaxCompleteのイベントリスナーをDOM注入したが、これの発火をcontent_script側で検知したい。

### 前提・実現したいこと

ここに質問の内容を詳しく書いてください。
Chromeの拡張機能を作っています。
音声のボリュームを調整する機能でエラーが発生しました。
このエラーの解決方法を教えていただきたいです。

### 発生している問題・エラーメッセージ

```
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
```



### 該当のソースコード

```HTML
    <p><input type="number" id="volume" value="3" onclick="save()"/></p>

```


### 試したこと


manifest.jsonに下記の情報を追記しましたが、変わりませんでした。
 "content_security_policy": "script-src 'self'",

Chromeの拡張機能がうまく動かない。 it violates the following Content Security Policy directiveのエラー

firebaseを利用したサーバサイドの開発をしており、非同期処理を同期的に直す過程でエラーが出ました。

データをajaxで受け取る→それをfirebaseのデータベースと突合→合致する場合はresponse(500)を帰す
というバックエンドの処理をしようとしています。

「データを格納→完了後に突合」としたく、[async/awaitの非同期処理](https://sbfl.net/blog/2016/07/13/simplifying-async-code-with-promise-and-async-await/)の最後の例にならって、
promise,async,awaitを用いた非同期処理の待ちを実装しましたが、下記のエラーが出ます。
> 65:9  error  Parsing error: Unexpected token function

```node.js
/////////////////////////////////////////index.js//////////////////////////////////

const functions = require('firebase-functions');
// // Create and Deploy Your First Cloud Functions
// // https://firebase.google.com/docs/functions/write-firebase-functions
// The Firebase Admin SDK to access the Firebase Realtime Database.

// Import Admin SDK
const admin = require('firebase-admin');
admin.initializeApp(functions.config().firebase);

// Get a database reference to our posts
var db = admin.database();
var ref  = db.ref("/product");

//chromeExtensionからのデータを受信
exports.product = functions.https.onRequest((request, response) => {
    //POSTを受けると発火
    if (request.method === "POST") {
        const body = request.body;
        const pushRef = admin.database().ref("/product").push();
        pushRef.set({
          //薬処方時のデータ
          patientId: body["patientId"],
          doctor:    body["doctor"],
          idisease:  body["idisease"],
          medicine:  body["medicine"],
          medicineID:body["medicineID"],
        }, error => {
            if (error) {
                console.log("save error", error.message);
            } else {
                console.log("save Success!!");
            }
        }
      );
  }//ajaxの受け取り

////////////////////////////////////////////////////////////////////　　問題個所はここ以降
  //medicineIDを薬マスタと突合

  //薬のIDを配列に格納
  function getInMedId() {
    const p = new Promise((resolve,reject) => {
      var inMedId = body.medicineID;
      resolve(inMedId);
    });
    return p;
  }

  //マスター側の薬のIDを配列に格納
  function getPreMedId() {
    const q = new Promise((resolve,reject) => {
       var preMedId = [];
       for(j=0; j<(90+1); j++){
         var m = db.ref("/"+j+"/medicineId");
         m.on("value", function(snapshot){
           preMedId = snapshot.val();
         });
       }
       resolve(preMedId);
     });
     return q;
   }

  //薬のIDを突合
  async function checkMedId() {         <============================================ ※エラー箇所※
   for(i=0; i<inMedId.length+1; i++){
     for(j=0; j<(90+1); j++){
       var a = await getInMedId();
       var b = await getPreMedId();
       if(a[0][i] === b[j]){
         console.log('This medicine is skeptical:'+a);
         response.status(500).send(error.message).end();
       }
     }
   }
 }
 checkMedId();
  //for回して無事だったら普通のレスポンス
 response.status(200).end();

})

```

Chrome extension