如何在背景页面中包括iCheck？

Question

我正在使用chrome.tabs API来运行一个脚本，当选项卡被更新(onUpdated)时，我的扩展将使用background.html。我在脚本中包含了一个函数，用于检查页面上的iCheck复选框：

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

当脚本运行时，控制台告诉我

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

我尝试过将icheck.js文件包含在后台文件中，但没有成功。我该怎么做？提前谢谢。

Answer 1

不太确定如何实现此功能。我假设，一旦选项卡被更新，您希望在下面注入一个内容脚本。

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资源。

"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来包含图标sprite，所以我们必须使用绝对扩展资源URL来访问图像。

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

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

屏幕截图：

​

​

希望这会有帮助。

Answer 2

你需要从一个内容脚本，而不是从没有访问页面的背景。遵循现有的官方示例，说明如何在内容脚本中包含jquery等。