How to include iCheck in background page?

Question

I am using chrome.tabs API to run a script when tabs are updated (onUpdated) for my extension using background.html. I have included a function to check an iCheck checkbox on the page, in the script:

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

When the script is run, the console tells me

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

I have tried including the icheck.js file in the background file, with no success. What should i be doing? Thanks in advance.

Answer 1

Not quite sure how you implement this feature. I assume that you want to inject a content script below once tab is updated.

iCheck.js

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

At first, you need to include the required library for "iCheck", such as jQuery, iCheck.min.js, etc. Define the URL match patterns in manifest file and content script will be injected into a page if its URL matches any pattern.

manifest.json

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

iCheck skin uses the external image resource and you need to list them as web accessible if you want to use them in web page context.

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

And then register a tab update event handler in background.js which will inject the content script "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"}); 
  }
});

Because polaris.css used relative url to include the icon sprite, we have to use absolute extension resource URL to access images.

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

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

Screen shot:

Hope this is helpful.