常連

### 実現したいこと

Chrome拡張機能の設定画面にvue.jsを取り入れようと思い、CDNを読み込もうとしたところエラーが発生し、vueが使用できませんでした。


### 前提




```manifest.json
{
    "name": "拡張機能テスト",
    "description": "説明文",
    "version": "0.1",
    "manifest_version": 3,
    "action": { ... },
    "permissions": [
        "storage", "tabs", "activeTab", "scripting"
    ],
    "web_accessible_resources": [{ ... }],
    "icons": { ... },
    "content_scripts": [{ ... }],
    "background": { ... },
    "options_page": "options.html"
}
```


### コンソールに出力されたエラー

```
Refused to load the script 'https://unpkg.com/vue@3/dist/vue.global.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
```
```
Refused to load the script 'https://unpkg.com/vue@3/dist/vue.global.js' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://127.0.0.1:*". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
```
```
options.js:627 Uncaught ReferenceError: Vue is not defined
```

### 該当のソースコード
#### options.html

```html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-eval'">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="css/style.css">
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

	<title>設定画面</title>
</head>
<body>
    <div id="app">{{ username }}</div>
    <script src="js/options.js"></script>
</body>
</html>
```

```javascript
const app = Vue.createApp({
	data() {
		return {
			username: 'なまえ'
		}
	},
}).mount('#app')
```

### 試したこと
`<meta http-equiv="Content-Security-Policy" content="〜〜'">`を色々試したり、`vue.global.js`をローカルファイル化したりもしましたが、全てダメでした。



### 補足情報
- Chrome拡張機能 manifest version 3
- Chrome バージョン 110

Chrome拡張機能開発 v3にて、options_pageで vue.jsを使用したい

### 実現したいこと
Chrome拡張機能から、ニコニコ動画の[スナップショット検索API](https://site.nicovideo.jp/search-api-docs/snapshot)を利用したい。

### 発生している問題・エラーメッセージ
```
Access to fetch at 'https://api.search.nicovideo.jp/api/v2/snapshot/video/contents/search?q=%E5%88%9D%E9%9F%B3%E3%83%9F%E3%82%AF&targets=title&fields=contentId,title,viewCounter&filters[viewCounter][gte]=10000&_sort=-viewCounter&_offset=0&_limit=3&_context=apiguide' from origin 'chrome-extension://【Extension ID】' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
```

### 該当のソースコード
・manifest.json
```json
{
  "manifest_version": 3,

  // 中略

  "background": {
    "service_worker": "event.js"
  },
  "permissions": [
    "tabs"
  ],
  "content_scripts": [
    {
      "matches": ["http://hogehoge/*"],
      "css": ["style.css"],
      "js": ["main.js"]
    }
  ],
  "host_permissions": [
    "<all_urls>"
  ]
}
```

・main.js
```JavaScript
async function fetchMovie(){  // 特定のhtmlボタンが押されたら発火する
    await chrome.runtime.sendMessage({name: 'fetchMovie'});
}

chrome.runtime.onMessage.addListener((request, options) => {
    if (request.name === 'movieTitle') {
        let title = request.data.returnValue;

        const movieTitle = document.getElementById('movieTitle');
        movieTitle.textContent = title;
    }
});
```

・events.js
```JavaScript
chrome.runtime.onMessage.addListener((request) => {
    let returnValue = null;

    if (request.name === 'fetchMovie') {
        let url = 'https://api.search.nicovideo.jp/api/v2/snapshot/video/contents/search' +
            '?q=%E5%88%9D%E9%9F%B3%E3%83%9F%E3%82%AF&targets=title&fields=contentId,title,viewCounter' +
            '&filters[viewCounter][gte]=10000&_sort=-viewCounter&_offset=0&_limit=3&_context=apiguide';

        fetch(url)
            .then(
                resp => {resp.json()}
            ).then(
                json => {returnValue = json}
            );
    }

    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
        chrome.tabs.sendMessage(
            tabs[0].id, {
            name: 'movieTitle',
            data: {returnValue}
            }
        )
    });
});
```

### 試したこと
[Chrome 拡張機能の CORS エラーを回避（Manifest V3）](https://qiita.com/not13/items/d805d66814a0bc81dc6a)を参考に、manifest.jsonに「host_permissions」を追加し、「https: //api.search.nicovideo.jp/\*」 や「https: //api.search.nicovideo.jp/api/v2/snapshot/video/contents/\*」、「https: //\*/\*」などを記載してみたのですが、いずれも上手くいきませんでした。（リンクになってしまうので空白入れています。）
また、fetch関数のmodeにno-corsを設定してみたところ空のレスポンスが返ってきました。


Chrome拡張機能開発での外部APIアクセス時にCORSを回避できない

### 実現したいこと

- [x] HTML内にある特定の文字列を全て置換する
- [ ] この時、置換してほしくない部分(URL)を対象外にする

### 前提

自動翻訳の精度を上げるため、固有名詞を先に日本語に置き換えるChrome拡張機能を作っています。
以下のコードである程度は目的通りに動作するのですが、<a href=>や<img src=>などのURLまで書き換えてしまうので、これを修正したいです。

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

```JavaScript
const api_url = 'https://スプレッドシートのAPI';  //[{"日a1":"あ","英a1":"A","中a1":"亜","日b1":"ア",,,},{"日a2":"い",,,},,,]

(async function() {
    nameDB = await (await fetch(api_url)).json();   //APIの取得(async-await辺り)はコピペ

    for (var i = 0; i < Object.keys(nameDB).length; i++) {
        getText = document.querySelectorAll('div > :not(script)'); //置換対象をタグで指定

        nameA = new RegExp(nameDB[i].aEng + '|' + nameDB[i].aChn, 'g');   //まとめて置換するため正規表現/aEng|aChn/gに変換
        nameB = new RegExp(nameDB[i].bEng + '|' + nameDB[i].bChn, 'g');
        nameC = new RegExp(nameDB[i].cEng + '|' + nameDB[i].cChn, 'g');
        nameD = new RegExp(nameDB[i].dEng + '|' + nameDB[i].dChn, 'g');

        for(var j = 0; j < getText.length; j++){
            getText[j].innerHTML = getText[j].innerHTML.replace(nameA, nameDB[i].aJpn);
            getText[j].innerHTML = getText[j].innerHTML.replace(nameB, nameDB[i].bJpn);
            getText[j].innerHTML = getText[j].innerHTML.replace(nameC, nameDB[i].cJpn);
            getText[j].innerHTML = getText[j].innerHTML.replace(nameD, nameDB[i].dJpn);
        }
    }
})()
```

### 試したこと
- querySelectorAllの条件に :not([href]) や :not([src]) を追加
  →変化なし
- querySelectorAllの条件を (h1, h2,,,) のようにタグを一つ一つ指定
  →置換が過剰/不足のどちらかになる
- getText[j].childrenで子要素を取得して配列に変換し、tagNameを基準に除外(下記コード)
  →変化なし、対象が奥深くにあることが原因？

```JavaScript
//14～19行目と入れ替え
for(let j = 0; j < getText.length; j++){
    const matchTags = Array.prototype.filter.call(getText[j].children, function (elem) {
        return elem.tagName === 'A' || elem.tagName === 'IMG';  //子要素を配列化してtagNameで抽出
    });
    if (matchTags.length === 0){  //子要素にaタグ、imgタグがない場合だけ実行
        /* (innerHTML.replace) */
    }
}
```


### 修正後のコード
需要は少なさそうですが、一応今回の最終的なコードを残しておきます。
```JavaScript
const api_url = 'スプレッドシートのAPI';       //[{"jpn0":"","eng0":"","chn0":"","jpn1":"",,,},{"jpn0":"",,,},,,]の形に変更

(async function() {
  nameDB = await (await fetch(api_url)).json();
  for (let i = 0; i < Object.keys(nameDB).length; i++) {
    let walkerText= document.createTreeWalker(
      document.body,
      NodeFilter.SHOW_TEXT,function(node){
        if(node.data.match(/\S/g)){           //ホワイトスペースなどの不必要な検索対象を除外し高速化
          return NodeFilter.FILTER_ACCEPT;
        }else{
          return NodeFilter.FILTER_REJECT;
        }
      }
    );
    while(true){
      tgt2Repl = walkerText.nextNode();
      if(tgt2Repl === null){                  //nextNode() が null の時 = 全てのノードの処理が完了した時
        break;
      };
      for(let j = 0; j < 4; j++){
        engElem = eval('nameDB[i].eng' + j);  //evalは脆弱性の関係で非推奨とのこと。今回は個人的な拡張機能ということで採用
        if(engElem !== ''){                   //元のAPIの構造上空白の辞書があるためここで弾く
          chnElem = eval('nameDB[i].chn' + j);
          jpnElem = eval('nameDB[i].jpn' + j);
          flElem = new RegExp(engElem + '|' + chnElem, 'g');
          if(tgt2Repl.data.includes(engElem) || tgt2Repl.data.includes(chnElem)){
            tgt2Repl = tgt2Repl.data.replace(flElem, jpnElem);
          };
        };
      };
    };
  };
})()
```

JS(Chrome拡張機能) HTML中の任意の文字列を、URLを除き全て置換したい

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の開発ツール内にエラーメッセージが表示される。

### 実現したいこと

Chrome拡張機能のプログラムでUncaught TypeErrorを回避したい。

### 前提

初質問のプログラミング初心者です。
Chrome拡張機能でkuromojiライブラリを使用したいのですが下記のエラーが発生します。
そもそもkuromojiライブラリと関係のないエラーな気もします。
エラーのないソースコードにしたいです。
よろしくお願いいたします。


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

Uncaught TypeError: Cannot read properties of undefined (reading 'onUpdated')
    at script.js:1:13

### 該当のソースコード
manifest.json

{
    "manifest_version": 3,
    "name": "a",
    "description": "a",
    "version": "0.0.1",
    "permissions": [
      "activeTab",
      "<all_urls>",
      "tabs",
      "*://example.com/*"
    ],
    "content_scripts": [
      {
        "matches": [
          "*://example.com/*",
          "<all_urls>"
          
      ],
        "js": [
          "kuromoji/build/kuromoji.js",
          "script.js"
        ]
      }
    ],
    "background.service_worker": {
      "scripts": ["script.js"],
      "persisten,t": false
    },
    
    "web_accessible_resources": [{
      "resources": [ 
      "/kuromoji/dict/*",
      "script.js"
    ],
    "matches": [
      "<all_urls>"
    ]
    }],
    "icons": {
      "128": "icon128.png"
    },
    "action": {
      "default_title": "a",
      "default_icon": "icon128.png"
    }
}



script.js

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
  // Do something when the tab is updated
  console.log(tabId, changeInfo, tab);
});

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo) {
    if (changeInfo.status === 'complete') {
      chrome.tabs.executeScript(tabId, { code: "var bodyText = document.body.innerText; console.log(bodyText); const dicPath = chrome.extension.getURL('/kuromoji/dict/'); kuromoji.builder({ dicPath: dicPath }).build(function (err, tokenizer) { var path = tokenizer.tokenize(bodyText); console.log(path); });" });
    }
})


### 試したこと

マニフェストのバージョンの2と3を切り替えたり、それに合わせてmanifest.jsonの構文を変えたりしました。



Chrome拡張機能のプログラムでUncaught TypeErrorを回避したい。chrome.tabs.onUpdated.addListener

### 前提

chrome拡張機能の開発をしています。
contents scriptで非同期処理を行い、popupに非同期処理の結果を送りたいのですが、うまく機能していないようなので質問させていただきます。

### 発生している問題

下に記述したコードの、`contents-script.ts:12`の`console.log(r)`では`1`と出力されることを確認しました。
`popup.ts:10`の`console.log(item)`では`undefined`となりました。
`popup.ts:10`で`1`が出力されるようにしたいです。

### 該当のソースコード
`contents-script.ts`
```typescript
const asyncTest = async () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(1)
    }, 1000)
  })
}

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
  if(request.message == "popup.load_start"){
    asyncTest().then((r) => {
      console.log(r);
      sendResponse(r)
    })
  }
});

export {}

```

`popup.ts`
```typescript
function Hoge() {
  const getMessage = () => {
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
      if (!tabs[0].id) {
        return;
      }
      chrome.tabs.sendMessage(
        tabs[0].id,
        { message: 'popup.load_start' },
        function (item) {
          console.log(item)
        }
      );
    });
  };
  // ...
  return (
     <button onClick={getMessage}>読み込み</button>
  )
}
```

ご指導お願いいたしますm(__)m




chrome拡張で、contents scriptとpopupで非同期処理のやり取りをしたいです

### 前提・実現したいこと
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”となる

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

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

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

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

Chrome extension