92229
### 全体のやりたいこと

webサイトで実装されている通知を拡張機能で検知し、ブロックリストに登録されているurlが遷移先urlになっている場合通知をブロックする  
拡張機能で拡張機能内のjsonファイル（ブロックリスト）を読み込んでjsonファイル内に登録されているurlと取得してきた遷移先urlと比較したい。  
方法はfetchでもxmlhttprequestでも構いません。

### 今回やりたいこと

拡張機能内で拡張機能内のjsonファイルを読み取りたい  
`content.js`の`if (url === "ブラックリストのurl"){}`で処理を変えたいのでこの処理より上でjsonファイルの中身を取得したい

### 分からないこと

  * manifestの`content_scripts`の`content.js`では非同期処理は出来ないのか
  * `content.js`内で相対パスでblocked.jsonをしているが読み取られない

以下のコードで実行すると、そもそも`blocked.json`がgetできないとconsoleでエラーが吐かれます。  
そして、 "getできません。" と表示されているurlが`GET https://demosite/blocked.json
404`のように拡張機能内のjsonファイルではなくサイトのjsonファイルを参照しようとしてエラーが吐かれているようです。

ご回答いただければ幸いです。

* * *

現在ディレクトリ構造は下記のようになっています。

```

     extension
     ├── js
     │   ├── blocked.json
     │   ├── content.js
     │   └── inject.js
     └── manifest.json
    
```

manifest

```

    {
      "name": "Blocking phishing sites",
      "description": "Control method for web push notification by browser extension",
      "version": "1.0",
      "manifest_version": 2,
      "web_accessible_resources": [
        "js/content.js",
        "js/blocked.json"
      ],
      "content_scripts": [
        {
          "matches": ["<all_urls>"],
          "run_at": "document_start",
          "js": ["js/inject.js"]
        }
      ],
      "permissions": [
        "*://*/*",
        "tabs",
        "webRequest",
        "webRequestBlocking",
        "webNavigation"
      ]
    }
    
```

blocked.json

```

    {
      "keyword":[
        "test",
        "test_1",
        "test_2",
        "test_3"
      ],
    
      "url":[
        "https://example.com/",
        "https://example_1.com/",
        "https://example_2.com/",
        "https://example_3.com/"
      ]
    }
    
```

inject.js

```

    console.log("-- inject script --");
    const script = document.createElement("script");
    script.src = chrome.runtime.getURL("js/content.js");
    (document.head || document.documentElement).insertAdjacentElement("afterbegin", script);
    
    
    console.log("-- load json --");
    const blockedPath = "js/blocked.json";
    const s = document.createElement("script");
    s.jsonUrl = chrome.runtime.getURL(blockedPath);
    
    console.log("blockedPath: ", s.jsonUrl);
    
    fetch(s.jsonUrl)
        .then(response => response.json())
        .then(data => {
          console.log(data);
          console.log(data.url[0]);
        });
    
```

content.js

```

    ・・・省略・・・
    
    window.open = function (open) {
      return function (url, name, features) {
        console.log("url: ", url);
    
        //jsonの中身とurlを比較
        if (url === "ブラックリストのurl") {
          console.log("url blocked!");
          return null;
        } else {
          return open.call(window, url, name, features);
        }
    
      };
    }(window.open);
    
```
CC BY-SA 4.0
2022-11-14T08:30:51.290
92220
2022-11-16T00:46:30.047
2022-11-16T00:46:30.047
3060
55256
question
javascript json chrome-extension
拡張機能で拡張機能内のjsonファイルを読み取りたい
相対URLは表示しているページのURLからの相対になるので、この用途には使えません。

`blocked.json` を
[`web_accessible_resources`](https://developer.chrome.com/docs/extensions/mv3/manifest/web_accessible_resources/)
に指定して、[`chrome.runtime.getURL()`](https://developer.chrome.com/docs/extensions/reference/runtime/#method-
getURL)の結果を`fetch()`に渡します。
CC BY-SA 4.0
2022-11-14T21:51:33.783
92229
2022-11-14T21:51:33.783
3475
92220
answer