Bagaimana cara menggunakan jQuery di ekstensi chrome?

Saya sedang menulis ekstensi chrome. Dan saya ingin menggunakan jQueryekstensi saya. Saya tidak menggunakan halaman latar belakang apa pun , hanya skrip latar belakang .

Ini file saya:

manifest.json

{
    "manifest_version": 2,

    "name": "Extension name",
    "description": "This extension does something,",
    "version": "0.1",

    "permissions": [
        "activeTab"
    ],

    "browser_action": {
        "default_icon": "images/icon_128.png"
    },

    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },

    "icons": {
        "16": "images/icon_16.png",
        "48": "images/icon_48.png",
        "128": "images/icon_128.png"
    }
}

background.jsFile saya hanya menjalankan file lain bernamawork.js

// Respond to the click on extension Icon
chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript({
        file: 'work.js'
    });
});

Logika utama ekstensi saya ada di dalam work.js. Isi yang menurut saya tidak penting di sini untuk pertanyaan ini.

Yang ingin saya tanyakan adalah bagaimana saya bisa menggunakan jQuery di ekstensi saya. Karena saya tidak menggunakan halaman latar belakang apa pun. Saya tidak bisa menambahkan jQuery begitu saja. Jadi bagaimana saya dapat menambahkan dan menggunakan jQuery ke dalam ekstensi saya?

Saya mencoba menjalankan jQuery bersama dengan work.js saya dari background.jsfile.

// Respond to the click on extension Icon
chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript({
        file: 'thirdParty/jquery-2.0.3.js'
    });
    chrome.tabs.executeScript({
        file: 'work.js'
    });
});

Dan itu berfungsi dengan baik, tetapi saya memiliki kekhawatiran apakah skrip yang ditambahkan untuk dieksekusi dengan cara ini dijalankan secara asinkron. Jika ya maka bisa terjadi bahwa work.js berjalan bahkan sebelum jQuery (atau pustaka lain yang dapat saya tambahkan di masa mendatang).

Dan saya juga ingin tahu apa cara yang benar dan terbaik untuk menggunakan pustaka pihak ketiga, di ekstensi chrome saya.

Anda harus menambahkan skrip jquery Anda ke proyek ekstensi-chrome dan ke backgroundbagian manifest.json Anda seperti ini:

  "background":
    {
        "scripts": ["thirdParty/jquery-2.0.3.js", "background.js"]
    }

Jika Anda membutuhkan jquery di content_scripts, Anda harus menambahkannya juga di manifes:

"content_scripts": 
    [
        {
            "matches":["http://website*"],
            "js":["thirdParty/jquery.1.10.2.min.js", "script.js"],
            "css": ["css/style.css"],
            "run_at": "document_end"
        }
    ]

Inilah yang saya lakukan.

Juga, jika saya ingat dengan benar, skrip latar belakang dijalankan di jendela latar belakang yang dapat Anda buka melalui chrome://extensions.

Sangat mudah, cukup lakukan hal berikut:

tambahkan baris berikut di manifest.json Anda

"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'",

Sekarang Anda bebas memuat jQuery langsung dari url

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

Sumber: google doc

Dan itu berfungsi dengan baik, tetapi saya memiliki kekhawatiran apakah skrip yang ditambahkan untuk dieksekusi dengan cara ini dijalankan secara asinkron. Jika ya maka bisa terjadi bahwa work.js berjalan bahkan sebelum jQuery (atau pustaka lain yang dapat saya tambahkan di masa mendatang).

Itu seharusnya tidak menjadi perhatian: Anda mengantrekan skrip untuk dieksekusi dalam konteks JS tertentu, dan konteks itu tidak boleh memiliki kondisi balapan karena itu single-threaded.

Namun, cara yang tepat untuk menghilangkan kekhawatiran ini adalah dengan menyambung panggilan:

chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript({
        file: 'thirdParty/jquery-2.0.3.js'
    }, function() {
        // Guaranteed to execute only after the previous script returns
        chrome.tabs.executeScript({
            file: 'work.js'
        });
    });
});

Atau, digeneralisasikan:

function injectScripts(scripts, callback) {
  if(scripts.length) {
    var script = scripts.shift();
    chrome.tabs.executeScript({file: script}, function() {
      if(chrome.runtime.lastError && typeof callback === "function") {
        callback(false); // Injection failed
      }
      injectScripts(scripts, callback);
    });
  } else {
    if(typeof callback === "function") {
      callback(true);
    }
  }
}

injectScripts(["thirdParty/jquery-2.0.3.js", "work.js"], doSomethingElse);

Atau, dijanjikan (dan dibawa lebih sesuai dengan tanda tangan yang tepat):

function injectScript(tabId, injectDetails) {
  return new Promise((resolve, reject) => {
    chrome.tabs.executeScript(tabId, injectDetails, (data) => {
      if (chrome.runtime.lastError) {
        reject(chrome.runtime.lastError.message);
      } else {
        resolve(data);
      }
    });
  });
}

injectScript(null, {file: "thirdParty/jquery-2.0.3.js"}).then(
  () => injectScript(null, {file: "work.js"})
).then(
  () => doSomethingElse
).catch(
  (error) => console.error(error)
);

Atau, mengapa tidak, async/ await-ed untuk sintaks yang lebih jelas:

function injectScript(tabId, injectDetails) {
  return new Promise((resolve, reject) => {
    chrome.tabs.executeScript(tabId, injectDetails, (data) => {
      if (chrome.runtime.lastError) {
        reject(chrome.runtime.lastError.message);
      } else {
        resolve(data);
      }
    });
  });
}

try {
  await injectScript(null, {file: "thirdParty/jquery-2.0.3.js"});
  await injectScript(null, {file: "work.js"});
  doSomethingElse();
} catch (err) {
  console.error(err);
}

Catatan, di Firefox Anda bisa menggunakan browser.tabs.executeScriptkarena akan mengembalikan Promise.

Terlepas dari solusi yang telah disebutkan, Anda juga dapat mengunduh jquery.min.jssecara lokal dan kemudian menggunakannya -

Untuk mengunduh -

wget "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"

manifest.json -

"content_scripts": [
   {
    "js": ["/path/to/jquery.min.js", ...]
   }
],

dalam html -

<script src="/path/to/jquery.min.js"></script>

Referensi - https://developer.chrome.com/extensions/contentSecurityPolicy

Dalam kasus saya mendapat solusi yang berfungsi melalui Cross-document Messaging (XDM) dan Executing ekstensi Chrome onclick alih-alih memuat halaman.

manifest.json

{
  "name": "JQuery Light",
  "version": "1",
  "manifest_version": 2,

  "browser_action": {
    "default_icon": "icon.png"
  },

  "content_scripts": [
    {
      "matches": [
        "https://*.google.com/*"
      ],
      "js": [
        "jquery-3.3.1.min.js",
        "myscript.js"
      ]
    }
  ],

  "background": {
    "scripts": [
      "background.js"
    ]
  }

}

background.js

chrome.browserAction.onClicked.addListener(function (tab) {
  chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": "clicked_browser_action"});
  });
});

myscript.js

chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
        if (request.message === "clicked_browser_action") {
        console.log('Hello world!')
        }
    }
);