Chrome拡張のoptions.jsが発火しない

投稿者: Anonymous

公式ドキュメントに従って以下のようなコードを書いたのですが、白紙のページが表示されます。

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

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

<!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>
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);

解決

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

  "options_ui": {
    "page": "options.html",
    "open_in_tab": true
  },

また、拡張機能の詳細画面から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.

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *