0

我正在使用 chrome.tabs API 在使用 background.html 为我的扩展程序更新选项卡（onUpdated）时运行脚本。我在脚本中包含了一个检查页面上 iCheck 复选框的功能：

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

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

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

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

4

2 回答 2

0

不太确定您如何实现此功能。我假设你想在标签更新后在下面注入一个内容脚本。

iCheck.js

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

首先，您需要包含“iCheck”所需的库，例如 jQuery、iCheck.min.js 等。在清单文件中定义 URL 匹配模式，如果其 URL 匹配任何模式，内容脚本将被注入页面.

清单.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”。

背景.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;

截屏：

在此处输入图像描述

希望这会有所帮助。

于 2014-03-20T08:02:53.680 回答
0

您需要从内容脚本而不是从无权访问页面的背景中执行此操作。遵循现有的官方示例，了解如何在内容脚本中包含 jquery 等。

于 2014-03-20T02:19:12.363 回答