69545


[公式ドキュメント](https://developer.chrome.com/extensions/options)に従って以下のようなコードを書いたのですが、白紙のページが表示されます。

`alert('a')//test`も動かないのでDOMContentLoadedイベント自体起きてないようです。なお、options.htmlとoptions.jsは同じフォルダに置いてます。

また、これに限らずoptions.jsをデバッグする方法はあるでしょうか？

[code]

    <!DOCTYPE html>
    <html>
    <head>
        <title>W2UI Demo: grid-17</title>
        <script src="library/jquery-3.5.1.min.js"></script>
        <script type="text/javascript" src="library/w2ui-1.5.rc1.min.js"></script>
        <link rel="stylesheet" type="text/css" href=library/jquery-3.5.1.min.css" />
    </head>
    <body>
    
    <div id="grid" style="width: 100%; height: 400px;"></div>
    
    <script src="options.js"></script>
    </body>
    </html>
    
[/code]

[code]

    function load(){
        alert('a')//test
        $('#grid').w2grid({ 
            name: 'grid', 
            show: { 
                toolbar: true,
                footer: true,
                toolbarAdd: true,
                toolbarDelete: true,
                toolbarSave: false,
                toolbarEdit: true
            },
            columns: [                
                { field: 'url', caption: 'URL', size: '45%', sortable: true},
                { field: 'title', caption: 'Title', size: '45%', sortable: true },
                { field: 'day_of_the_week', caption: 'Day', size: '120px'},
                { field: 'interval', caption: 'Interval', size: '120px', sortable: true }
            ],
            onAdd: function (event) {
                w2alert('add');
            },
            onEdit: function (event) {
                w2alert('edit');
            },
            onDelete: function (event) {
                console.log('delete has default behavior');
            },
            records: [
                { url: 'twitter.com', title: 'Twitter', day_of_the_week: 'Mon', interval: '7' },
               
            ]
        })
    } 
    
    document.addEventListener('DOMContentLoaded', load);
    
[/code]


CC BY-SA 4.0
2020-08-11T21:56:09.017
69466
2020-08-16T08:27:21.243
2020-08-12T05:56:11.073
3060
816
question
javascript chrome-extension
Chrome拡張のoptions.jsが発火しない


manifest.jsonに、

[code]

    {
        "name": "My extension",
    
        // (略)...
    
        "options_page": "options.html",
    
        // (略)...
    }
    
[/code]

を書き、options.htmlのheadタグの中に、

[code]

    <html>
        <head>
            <script src="options.js"></script>
        </head>
        <body>
        </body>
    </html>
    
[/code]

options.jsを指定します。

あと

[code]

    alert('a')//test
    
[/code]

は、

[code]

    alert('a'); //test
    
[/code]

セミコロンを行末(コメントの手前)に付けないと動かないと思います。


CC BY-SA 4.0
2020-08-12T10:56:50.933
69489
2020-08-12T11:24:49.787
2020-08-12T11:24:49.787
40151
40151
69466
answer


いろいろ実験したところ、埋め込み形式で`options.html`を開いても`DOMContentLoaded`イベントはちゃんと発生することがわかりました。ただし、`alert()`など一部のメソッドは使えなくなるようです。  
`manifest.json`に以下のように書き新しいタブを開く方式に設定すると、`alert()`なども実行されるようになりました。

[code]

      "options_ui": {
        "page": "options.html",
        "open_in_tab": true
      },
    
[/code]

また、拡張機能の詳細画面から`background.js`と同じようにデバッグできることがわかりました。

**P.S.**  
w2uiというjavascriptでグリッド表示できるライブラリがありますが、Chrome
extensionの`options.html`では（メソッドがインラインに記述されるため）以下のエラーが出て使えません。

> Refused to execute inline event handler because it violates the following
> Content Security Policy directive: "script-src 'self' blob: filesystem:".
> Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce
> ('nonce-...') is required to enable inline execution.


CC BY-SA 4.0
2020-08-14T07:21:47.530
69545
2020-08-16T08:27:21.243
2020-08-16T08:27:21.243
32986
816
69466
answer