2

クロム拡張機能で jQueryUI を実装するのに多くの問題があります。オプションページに選択可能なものを実装したいと思います。

chrome 拡張機能は、クリックするとページをキャッシュ バージョンにリダイレクトするブラウザ アクションです。私のオプション ページでは、Google、Yahoo、Bing など、使用するキャッシュ データベースをユーザーが選択できるようにします。

選択可能: http://jqueryui.com/selectable/

私は選択可能なものの最低限のバージョンを実装しようとしています-基本的に彼らが持っているデモだけです。次に、動作中のバージョンを中心にWebページを構築しますが、動作させることができないようです.

マニフェスト.json:

{
    "manifest_version": 2,

    "name": "WebCache",
    "version": "2.0.0",
    "description": "View a cached version of a web page",

    "browser_action": {
        "default_icon": {
            "19":"/images/icon.png"
        },
        "default_title": "Cache Page"
    },

    "background": {
        "scripts": [
            "redirect.js"
        ]
    },

    "options_page": "options.html",

    "permissions": [
        "tabs", "http://*/*", "https://*/*"
    ]
}

options.html:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Selectable - Serialize</title>

    <link rel="stylesheet" href="jQuery/jquery.ui.all.css">
    <link rel="stylesheet" href="options.css" />
    <link rel="stylesheet" href="jQuery/demos.css">
    <link rel="stylesheet" href="jQuery/jquery.ui.base.css">
    <link rel="stylesheet" href="jQuery/jquery.ui.all.css">
    <link rel="stylesheet" href="jQuery/jquery.ui.core.css">
    <link rel="stylesheet" href="jQuery/jquery.ui.selectable.css">
    <script src="options.js"></script>
    <script src="jQuery/jquery-1.9.1.js"></script>
    <script src="jQuery/jquery.ui.core.js"></script>
    <script src="jQuery/jquery.ui.widget.js"></script>
    <script src="jQuery/jquery.ui.mouse.js"></script>
    <script src="jQuery/jquery.ui.selectable.js"></script>

    <style>
    #feedback { font-size: 1.4em; }
    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
    </style>
    <script>
    $(function() {
        $( "#selectable" ).selectable({
            stop: function() {
                var result = $( "#select-result" ).empty();
                $( ".ui-selected", this ).each(function() {
                    var index = $( "#selectable li" ).index( this );
                    result.append( " #" + ( index + 1 ) );
                });
            }
        });
    });
    </script>
</head>

<body>
<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>

<ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
</ol>
</body>
</html>

私はほとんどデモ コードをカット アンド ペーストしただけなので (さらに多くの JavaScript ファイルへの参照を追加しただけです)、なぜ動作しないのか非常に混乱しています。現在、例のように適切にフォーマットされた CSS のリストが表示されますが、javascript が機能していません。どんな助けでも大歓迎です。

どうもありがとう、ダニエル

編集2：

javascript はエディタの Coda では機能しますが、拡張機能では機能しません。ただし、cssはすべて拡張機能に正しく表示されます。

4

1 に答える 1

1

リソースをコンテンツ スクリプトとして指定しました。オプション ページでのみ使用する場合は、その必要はありません。

devtools のネットワーク タブを参照すると、リソースをリンクするための正しいパスを見つけることができるかもしれません。404はありますか？

options.html から相対的なリソースをリンクしていることを確認してください。

于 2013-03-11T20:22:42.187 に答える