Question

我正在尝试编写一个Chrome扩展程序，在目标页面上放置一个小脚本，然后针对页面上的项目执行特定操作。作为Chrome扩展程序的新手，我从“Hello World”提醒开始。这工作正常，但我真正想要做的是使用jquery对象。

虽然我的目标页面已经导入了jQuery，但如果我尝试在我的脚本中使用它，我会得到一个异常，即$ is undefined。但是，如果我自己尝试导入它，即使alert也停止工作。

以下是我的代码，任何人都可以指出我出错的地方吗？

的manifest.json

{
  "manifest_version": 2,

  "name": "Hello World",
  "description": "Simple Hello World Extension",
  "version": "1.0",

  "content_scripts": [
    {
      "matches": ["http://localhost:46950/"],
      "run_at": "document_end",
      "js": ["http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", "popup.js"]
    }
  ] 
}

popup.js

$(helloWorld());

function helloWorld()
{
    alert("Hello World");
}

更新

深入了解Chrome：//扩展程序，我意识到当我尝试使用下面的代码时，扩展程序根本没有加载到Chrome中。如果我尝试再次手动加载它，我会得到以下异常：

无法从''加载扩展程序。无法为内容脚本加载javascript''。

Answer 1

好的，我找到了this回答，这给了我一些关于发生了什么的线索。

Chrome似乎无法加载扩展程序中的外部资源。因此，当我尝试通过谷歌加载jQuery时，它不会加载它，并且会破坏整个扩展程序。

我试图这样做的原因是为了不引起我的多个版本的jquery在我的扩展和目标站点之间发生冲突的问题。但是，答案表明这些进程基本上是孤立运行的，所以它不应该有问题。考虑到这一点，我刚刚手动将jquery添加到我的扩展中并直接加载它。这似乎工作正常。

<强>的manifest.json

{
  "manifest_version": 2,

  "name": "Hello World",
  "description": "Simple Hello World Extension",
  "version": "1.0",

  "content_scripts": [
  {
      "matches": ["http://localhost:46950/"],
      "run_at": "document_end",
      "js": ["jquery-2.0.3.min.js", "popup.js"]
  }] 
}

Answer 2

JQuery期待一个dom元素，所以它会抛出一个错误。

听起来你正在寻找像$（document）.ready（）这样的东西： http://learn.jquery.com/using-jquery-core/document-ready/

添加jQuery会阻止脚本执行

2 个答案: