0

全体のやりたいこと

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

今回やりたいこと

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

分からないこと

  • manifestのcontent_scriptscontent.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);

1 件の回答 1

1

相対URLは表示しているページのURLからの相対になるので、この用途には使えません。

blocked.jsonweb_accessible_resources に指定して、chrome.runtime.getURL()の結果をfetch()に渡します。

7
  • content.jsの1~4行目を追記したのですが、console上でUncaught TypeError: Cannot read properties of undefined (reading 'getURL')とエラーが吐かれてしまいます、 認識としては、content.js内でchrome.runtime.getURL()を行いその結果をcontent.js内でfetch()に渡すということで間違いないでしょうか?
    – te94d
    2022年11月15日 4:59
  • あ、構成を見誤ってました。content.js はコンテントスクリプトではないのですね。では content.js 内で chrome.runtime は利用できません。 inject.js 内で chrome.runtime.getURL() と fetch() を行い、その結果を何とかしてHTML中に挿入する必要があります。
    – int32_t
    2022年11月15日 6:17
  • 拡張機能内にhtmlを配置する必要があるということですね、なるほどです。 「htmlに挿入はするが表示はしない」ように実装できればjsonファイル内の値をcontent.js内で変数に入れて比較できそうですかね、、
    – te94d
    2022年11月15日 6:55
  • JSONなので、"const json = " + fetchで得たテキスト + ";" のような文字列を <script> で囲って挿入すればいいです。
    – int32_t
    2022年11月15日 7:32
  • 1
    はい。response.json() を response.text() に変えて、その結果で私の前のコメントの文字列を作って、それを s.textContent に代入して、s を script と同じように insertAdjacentElement() すればよいです。content.js の中からは変数 json が見えるはずです。
    – int32_t
    2022年11月15日 14:17

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。