크롬 확장에 jQuery UI를 구현하는 방법

Chrome 확장 프로그램에서 jQueryUI를 구현하는 데 많은 문제가 있습니다. 옵션 페이지에서 선택 가능 항목을 구현하고 싶습니다.크롬 확장에 jQuery UI를 구현하는 방법

클릭 확장 프로그램은 페이지를 캐시 된 버전으로 리디렉션하는 브라우저 작업입니다. 내 옵션 페이지에서 사용자가 사용할 캐시 데이터베이스를 선택할 수 있도록합니다. 구글, 야후, 빙, 등. 나는 그들이 선택할 수 있도록 선택할 수 있습니다.

선택 : http://jqueryui.com/selectable/

나는 기본적으로 selectable- 그들이 가지고있는 단지 데모의 골자 버전을 구현하기 위해 노력하고있어 다음 나는 작업 버전의 주위에 내 웹 페이지를 만들 수 있습니다,하지만 난 할 수 없습니다 그것이 작동하도록하는 것 같습니다.

의 manifest.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>

나는 꽤 많은 단지 절단 및 데모 코드를 붙여 (참고 문헌에 더 자바 스크립트 파일을 추가), 그래서 '한 왜 그것이 작동하지 않는지에 관해서는 혼란 스럽다. 바로 지금 예제에서와 같이 올바른 형식의 CSS 목록을 표시하지만 자바 스크립트가 작동하지 않습니다. 어떤 도움을 진심으로 감사드립니다.

많은 감사, 다니엘

편집 2 : 내 편집기 코다의

자바 스크립트 작동하지만 아직도 확장한다. CSS는 모두 확장 기능에서 올바르게 표시됩니다.

출처

2013-03-08 Dbz

당신이 CSS와 JS를 참조하는 방법은 크롬 확장 프로그램 가이드를 했습니까 당신의 options.html에서 상대적으로 능숙 연결 것을 확인하십시오. –

어쩌면 자사의 bullsh **하지만 주문 관련성이있다 "jQuery/jquery.ui.core.js", "jQuery/jquery-1.9.1.js"?? – ggzone

이런 종류의 질문은 이전에 묻고 대답했습니다 : [Google 크롬 확장 - 팝업 페이지가 제대로 표시되지 않음] (http://stackoverflow.com/questions/11599365/google-chrome-extension-popup-page-not-showing- 올바르게/11599420 # 11599420). –

ressources를 콘텐츠 스크립트로 지정했습니다. 옵션 페이지에서만 사용하고 싶다면 그렇게하지 않아도됩니다.

devtools의 네트워크 탭을 참고하면 정확한 경로를 찾을 수 있습니다. 404가 있습니까?

는

출처

2013-03-11 20:22:42

와우, devtools의 네트워크 탭에 대해 가르쳐 주셔서 감사합니다. CSS가 올바르게 표시됩니다. 내 질문을 업데이 트했습니다,하지만 여전히 모든 자바 스크립트가 작동하더라도 작동하지 않습니다. 더 이상의 힌트? – Dbz

크롬 확장에 jQuery UI를 구현하는 방법

답변

관련 문제