在 chrome 扩展中使用 jquery答案

【问题标题】：using jquery in chrome extension在 chrome 扩展中使用 jquery
【发布时间】：2013-03-30 12:10:25
【问题描述】：

当用户单击弹出窗口中的选择按钮时，我正在构建的 chrome 扩展从打开的选项卡中获取选定的文本。我正在尝试为此使用 jquery。

Manifest.json

    {
  "manifest_version": 2,

  "name": "cap",
  "description": "BLAH",
  "version": "1.0",

  "permissions": [ "tabs",
    "https://*/*","http://*/*"
  ],
  "content_scripts": [
  {
    "matches": ["http://*/*","https://*/*"],
    "js": ["selection.js"],
    "run_at": "document_start",
    "all_frames": true
  }
 ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup_main.html"
  }
}

我已经在 popup.html 中包含了 jquery 脚本

<html><head>
<meta charset="utf-8">
<title>popup</title>
<link rel="stylesheet" href="/popup.css">
<script type="text/javascript" src="popup.js"></script>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<!-- <script type="text/javascript" src="js/tag-it.js"></script> -->
</head>
<body>

</body></html>

popup.js

$(document).ready(function(){
  $("p").click(function(){
      chrome.tabs.getSelected(null, function(tab) {
    chrome.tabs.sendRequest(tab.id, {method: "getSelection"}, function (response) {
      var text = document.getElementById('text'); 
      text.innerHTML = response.data;
    });
  });
  });
});

在执行这个脚本时我得到了错误：

Uncaught ReferenceError: $ is not defined

请帮忙！

【问题讨论】：

标签： jquery google-chrome google-chrome-extension

【解决方案1】：

您需要更改脚本标签的顺序以允许 jQuery 首先加载：

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="popup.js"></script>

【讨论】：

【解决方案2】：

改变顺序。你必须先加载jquery核心插件，然后再加载其他插件

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="popup.js"></script>

【讨论】：