全体のやりたいこと
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);