Блог

Главная - Вопросы по программированию - элементы графического интерфейса jquery не работают в расширении Chrome

элементы графического интерфейса jquery не работают в расширении Chrome

#javascript #jquery #html #google-chrome-app

#javascript #jquery #HTML #google-chrome-app

Вопрос:

Однако, экспериментируя с расширениями Chrome, используя jquery для создания элементов графического интерфейса, не удается отобразить элементы графического интерфейса jquery на странице html… что я делаю не так?

manifest.json:

 {
  "name": "my extension",
  "description": "my first chrome extension",
  "version": "0.1",
  "manifest_version": 2,
  "app": {
    "background": {
      "scripts": ["background.js", "js/jquery-1.10.2.js", "js/jquery-ui-1.10.4.js"], "pages": ["window.html"]
  }
 },
  "icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}

window.html:

 <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

<title>Well Hello</title>
<link href="css/south-street/jquery-ui-1.10.4.css" rel="stylesheet">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.js"></script>
<script>
$(function() {

    $( "#accordion" ).accordion();

});
</script>

</head>

<body>

<div id="accordion">
<h3>test</h3>
<div>details</div>
<h3>test</h3>
<div>details</div>
<h3>test</h3>
<div>details</div>
<h4>test</h4>
<div>SOME JAZZ GOES HERE</div>
</div>
</body>

background.js:

 chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    'bounds': {
      'width': 800,
      'height': 600
    }
  });
});

Комментарии:

1. Я думаю, вы вставили неправильную вещь в свой manifest.json… Также какую ошибку вы получаете в консоли?

2. ха-ха, так я и сделал! нет ошибки в консоли элементы графического интерфейса jquery просто не отображаются на странице, они работают, когда я просто открываю страницу в браузере…

3. Обратите внимание, что из вашего объявления манифеста вы создаете приложение Chrome, а не расширение Chrome. Вы найдете вещи запутанными, если прочитаете документы по расширениям и предположите, что они применяются к приложениям (и наоборот). Во многих случаях это не так.

Ответ №1:

Проблема в том, что вы пытаетесь запустить встроенный javascript, который больше не разрешен в расширениях Chrome начиная с версии манифеста 2. Поместите свой javascript из window.html в файле под названием window.js а затем включите его в свои сценарии.

Иерархия расширений:

 MyExtension/
  background.js
  manifest.json
  window.html
  window.js
  js/
      jquery-1.10.2.js
      jquery-ui-1.10.4.js
  css/
      jquery-ui-1.10.4.js
      images/
             ....jqueryui images....

window.html

 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Well Hello</title>
  <link href="css/south-street/jquery-ui-1.10.4.css" rel="stylesheet">
  <script src="js/jquery-1.10.2.js"></script>
  <script src="js/jquery-ui-1.10.4.js"></script>
  <script src="window.js"></script>
</head>
<body>
  <div id="accordion">
    <h3>test</h3>
    <div>details</div>
    <h3>test</h3>
    <div>details</div>
    <h3>test</h3>
    <div>details</div>
    <h4>test</h4>
    <div>SOME JAZZ GOES HERE</div>
  </div>
</body>
</html>

window.js

 $(function() {
    $( "#accordion" ).accordion();
});

manifest.json

 {
  "name": "my extension",
  "description": "my first chrome extension",
  "version": "0.1",
  "manifest_version": 2,
  "app": {
      "background": {
        "scripts": ["background.js", "js/jquery-1.10.2.js", "js/jquery-ui-1.10.4.js"], "pages": ["window.html"]
      }
    }
}

background.js

 chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    'bounds': {
      'width': 800,
      'height': 600
    }
  });
});

Для дальнейшего использования вы можете щелкнуть правой кнопкой мыши в окне запуска и проверить элемент, который показал бы вам встроенную ошибку. Поиск в Google этого сообщения об ошибке дает много результатов для подобных проблем.

Комментарии:

1. спасибо за это, по-прежнему ничего не появляется — когда вы говорите «окно запуска», что вы имеете в виду? Я просто экспериментирую с этим в Aptana studio? При создании window.js и ссылаться на html-файл, чтобы window.js элемент графического интерфейса jquery не отображается при просмотре страницы в веб-браузере? Приветствия!

2. Вы управляете своими расширениями Chrome с помощью вкладки chrome:// extensions в Google Chrome. Рядом с вашим расширением обратите внимание на Launch кнопку. Когда вы нажимаете на это, ваш window.html появляется страница, это то, что я имел в виду под вашим окном запуска. Вы разместили window.js в той же папке, что и window.html ? Это должно сработать, это работает для меня..

3. привет, судья, все еще не повезло — можете ли вы показать мне всю имеющуюся у вас структуру и файл jquery? приветствия

4. Эй, я добавил туда весь макет, какой он у меня есть.. Я почти уверен, что вам тоже не нужен "pages": ["window.html"] бит в вашем манифесте, но я оставил его на всякий случай, если вы используете его в другом месте, и это все равно не наносит никакого вреда.

5. Я не думаю, что я достаточно ясно изложил проблему, с которой я столкнулся… github.com/toniprada/jqueryUi-chromeExtension-adapter Это описывает проблему и решение, спасибо за вашу помощь, хотя judgeja