Как включить iCheck в фоновую страницу?

Question

Как включить iCheck в фоновую страницу?

0

Я использую API-интерфейс chrome.tabs для запуска скрипта при обновлении табуляции (onUpdated) для моего расширения с использованием background.html. Я включил функцию проверки флажка iCheck на странице в скрипте:

$('input').iCheck('check');

Когда скрипт запускается, консоль сообщает мне

Uncaught TypeError: Object [object Object] has no method 'iCheck'

Я попытался включить файл icheck.js в фоновый файл, без успеха. Что я должен делать? Заранее спасибо.

user3376905 20 март 2014, в 02:18

Источник

Теги:

javascript

jquery

google-chrome-extension

icheck

2 ответа

0

Вам нужно сделать это из сценария контента не из фона, который не имеет доступа к странице. Следуйте существующим официальным образцам о том, как включить jquery и т.д. В сценарий содержимого.

Zig Mandel 20 март 2014, в 00:59

0

где те официальные образцы, которые вы упоминаете?
Michele 25 апр. 2014, в 17:50
0

Вы гуглили «расширение jquery chrome»? Это также в официальных документах.
Zig Mandel 25 апр. 2014, в 18:37
0

Я не использую хром.
Michele 30 апр. 2014, в 17:33
0

У вас есть ссылка на официальные образцы? Вы имеете в виду < fronteed.com/iCheck >? Когда я копирую исходный код страницы примера, у меня возникает та же проблема, что и в моем собственном коде. Наведение и т. Д. Не появляется.
Michele 30 апр. 2014, в 17:40
0

Если вы не используете Chrome, то почему вы задаете этот вопрос, касающийся Chrome?
Zig Mandel 01 май 2014, в 02:29
0

Я собирался на подобный вопрос iCheck. Оригинальный вопрос не казался специфичным для Chrome, за исключением вкладок. Если вы не думаете, что это достаточно похоже, я извиняюсь и забываю это!
Michele 02 май 2014, в 13:54
0

и я имел в виду официальные образцы для расширений Chrome, а не ура iCheck :).
Zig Mandel 02 май 2014, в 18:01

Показать ещё 5 комментариев

Ещё вопросы

где те официальные образцы, которые вы упоминаете?
Вы гуглили «расширение jquery chrome»? Это также в официальных документах.
У вас есть ссылка на официальные образцы? Вы имеете в виду < fronteed.com/iCheck >? Когда я копирую исходный код страницы примера, у меня возникает та же проблема, что и в моем собственном коде. Наведение и т. Д. Не появляется.
Если вы не используете Chrome, то почему вы задаете этот вопрос, касающийся Chrome?
Я собирался на подобный вопрос iCheck. Оригинальный вопрос не казался специфичным для Chrome, за исключением вкладок. Если вы не думаете, что это достаточно похоже, я извиняюсь и забываю это!
и я имел в виду официальные образцы для расширений Chrome, а не ура iCheck :).

Chickenrice · Accepted Answer · 2014-03-20T05-22-00.000Z

Не совсем уверен, как вы реализуете эту функцию. Я предполагаю, что вы хотите ввести сценарий содержимого ниже, как только вкладка будет обновлена.

iCheck.js

//I used polaris skin here
$("input").iCheck({
  checkboxClass: 'icheckbox_polaris',
  radioClass: 'iradio_polaris'
});

Сначала вам нужно включить нужную библиотеку для "iCheck", такую как jQuery, iCheck.min.js и т.д. Определите шаблоны сопоставления URL-адресов в файле манифеста, а скрипт содержимого будет введен на страницу, если его URL-адрес соответствует любому шаблону,

manifest.json

"content_scripts":[
{
  "matches":["https://*/*","http://*/*"],
  "js":["js/jquery-1.9.1.js","js/iCheck.min.js"],
  "css":["css/polaris/polaris.css"]
}
]

В iCheck скин использует внешний ресурс изображения, и вам нужно указать их как доступную в Интернете, если вы хотите использовать их в контексте веб-страницы.

"web_accessible_resources": [
  "css/polaris/*"
]

А затем зарегистрируйте обработчик события обновления вкладки в background.js, который будет вводить скрипт содержимого "iCheck.js".

background.js

chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) {
  if (changeInfo.status == 'complete' && tab.active) {
    chrome.tabs.executeScript(null,{file:"iCheck.js"}); 
  }
});

Поскольку polaris.css использовал относительный url для включения спрайта значков, мы должны использовать абсолютный URL ресурса расширения для доступа к изображениям.

//replace this
background: url(polaris.png) no-repeat;

//with...
background: url(chrome-extension://your extension id/path/to/resource/polaris.png) no-repeat;

Скриншот:

Надеюсь, это полезно.