我正在嘗試讓jQuery在我的chrome擴展程序的background.js中工作，並且它將無法工作。 為什么？

Question

我已經閱讀了很多有關jQuery和背景頁面的堆棧溢出問題，但是根本不了解參與規則。 我不知道他們是如何互動的。 有人可以告訴我為什么此代碼不起作用嗎？

manifest.json

{
  "name": "test 1",
  "description": "testing jquery",
  "version": "2.0",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": [ "jquery-2.1.1.js", "background.js"],
    "persistent": false
  },
  "browser_action": {
     "default_title": "test"
  },
  "manifest_version": 2
}

上傳擴展名時，我不會忘記包含jQuery文件

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(
    { code: 'console.log("this works");'},
    { code: '$( document ).ready(function() { console.log( "but this does not work :(" ); });' }
  );
});

請記住，我熟悉如何使用內容腳本使用jQuery，但是這些的問題是

chrome.****** 

命令不起作用。

請幫忙！

Answer 1

您正在將jQuery正確加載到后台頁面中。 如果要在其代碼中使用$(document).ready() ，它將可以正常工作。

問題是，當您使用executeScript ，您指定的代碼不會在與background.js相同的上下文中執行。 創建了一個全新的JS上下文，並將其附加到有問題的選項卡上，並且該上下文中沒有jQuery（即使該選項卡的上下文本身具有jQuery，請參見隔離的上下文 ）。

此外，您在調用executeScript錯誤。 它的參數是：

• 整數（可選） tabId
• 對象details
• 函數（可選） callback

您正在用兩個對象調用它； 它不是那樣工作的。

---

因此，要解決此問題，您需要先在該執行上下文中注入jQuery，然后再注入代碼。 您需要鏈接2個調用以確保它們以正確的順序執行。

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(
    tab.id,
    { file: 'jquery-2.1.1.js' },
    function() {
      chrome.tabs.executeScript(
        tab.id,
        { code: '$( document ).ready(function() { console.log( "This works now" ); });' }
      );
    }
  );
});