Chrome拡張に関する覚書
個人用です
manifest.jsonについて
基本構文
{
"name": "Wikidot日本語化拡張",
"version": "1.0.0",
"manifest_version": 2,
"description": "Wikidotに日本語を覚え直させる拡張機能です。",
"author": "Yuuki Watanabe / ukwhatn",
"permissions": ["storage", "*://*.scp-wiki.net/*", "*://*.wikidot.com/*"],
"web_accessible_resources": ["js/ozone-script.js"],
"content_scripts": [
{
"matches": ["*://*.scp-wiki.net/*", "*://*.wikidot.com/*"],
"js": ["js/main.js", "js/ozone-loader.js"],
"run_at": "document_start"
},
{
"matches": ["*://*.wikidot.com/account/*"],
"js": ["js/account.js"],
"run_at": "document_start"
},
{
"matches": ["*://*.wikidot.com/account/settings", "*://*.wikidot.com/account/settings#/*"],
"js": ["js/account-settings.js"],
"run_at": "document_start"
}
]
}
manifest_version : 2以外ないので固定
permissions : storageでアドオンの設定をstorageに格納・読み出し/URL指定でページ読み込み時に自動実行
web_accessible_resources : 後述
content_scripts : ページ読み込み時に読み込むJSとCSSを指定
content_scriptsについて
matches
必須。ここで指定したURLにアクセスしたときにスクリプトを読み込む。
permissionsでURL指定してないと拡張機能アイコンのクリック時にしか起動しないっぽい。
exclude_matches
matchesにヒットするURLの中で除外したいものを定義
js
読み込むJavaScriptファイルを指定
css
読み込むCSSファイルを指定
run_at
document_start
DOMを読み込む前に起動 : これ+後述の待機ループをかけたほうがよさそう
document_end
DOMを読み込んだあと、その他のリソースを読み込む前に起動 : なんか発火しない時がある
document_idle
DOMもリソースも読み込み終わった後に起動(デフォルト): 罠
window.onloadなどで読み込んだJSを発火させたい場合、document_idleだと発火点を過ぎたあとで読み込んでいる可能性がある。
all_flames
iframeなど、全てのフレームを対象にするならtrue
デフォルトはfalse
待機ループ
(function () {
if (document.getElementsByTagName("body")[0]) {
wikidot_main();
} else {
return setTimeout(arguments.callee, 1000);
}
})();
(function () {
if (typeof OZONE == "function") {
wikidot_main()
} else {
return setTimeout(arguments.callee, 1000);
}
})();
document_startだと全てのリソース、つまりDOMや他のJavaScript等に先んじて読み込まれるため、回線速度が遅いと「定義されてへんねんけど」って言われる。
かといってdocument_endだとなぜか発火しない時が結構ある。
なので、発火点として「bodyが定義されたら」or「任意の関数が定義されたら」を指定する。
開発時はconsole.logつかうと見やすくて良さげ
content_scriptsの罠
拡張機能で実行されるスクリプトはページ本体とは別のwindowで実行されるが、documentだけは本体に干渉できる。
つまり、拡張機能側からページ本体のスクリプト(JQueryなども)を参照することは出来ない。
よって、scriptを挿入することで動作させる。
(function () {
if (document.getElementsByTagName("body")[0]) {
console.log("bodyの読み込みが完了しました。")
var s, th;
th = document.getElementsByTagName("body")[0];
s = document.createElement('script');
s.setAttribute('type', 'text/javascript');
s.setAttribute('src', chrome.extension.getURL('/script.js'));
return th.appendChild(s);
} else {
console.log("bodyの読み込みを待っています。")
return setTimeout(arguments.callee, 1000);
}
})();
(function () {
if (typeof OZONE == "function") {
スクリプト
} else {
console.log("OZONEが読み込まれていません。")
return setTimeout(arguments.callee, 1000);
}
})();
これをやるとき、manifest.jsonの"web_accessible_resources"に挿入するscriptを書いておかなければならない。
Author And Source
この問題について(Chrome拡張に関する覚書), 我々は、より多くの情報をここで見つけました https://qiita.com/ukwhatn/items/56b20f6a639c8e4f4ddc著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .