Chrome拡張に関する覚書

個人用です
## manifest.jsonについて
### 基本構文
```json: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

### 待機ループ
```js:DOM待ち
(function () {
    if (document.getElementsByTagName("body")[0]) {
        wikidot_main();
    } else {
        return setTimeout(arguments.callee, 1000);
    }
})();
```
```js:JavaScript待ち
(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を挿入することで動作させる。

```js:loader.js
(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);
    }
})();
```
```js:script.js
(function () {
    if (typeof OZONE == "function") {
        スクリプト
    } else {
        console.log("OZONEが読み込まれていません。")
        return setTimeout(arguments.callee, 1000);
    }
})();
```
これをやるとき、manifest.jsonの**"web_accessible_resources"**に挿入するscriptを書いておかなければならない。