Bagaimana cara menggunakan jquery di halaman ekstensi google chrome action background.js?

Saya sedang mengembangkan ekstensi Google Chrome "tindakan halaman". Manifes saya memiliki:

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

Di file background.js saya, saya punya:

function doSomething() {
     alert("I was clicked!");
}

chrome.pageAction.onClicked.addListener(doSomething);

Ini bekerja. Sekarang dalam fungsi doSomething saya, saya ingin membaca beberapa data di halaman saat ini. Akan lebih mudah bagi saya menggunakan jquery untuk membaca data sehingga saya dapat dengan mudah menargetkan data yang saya inginkan. Bagaimana saya bisa memasukkan jquery (sebaiknya disajikan dari CDN Google) sehingga dapat diakses oleh fungsi doSomething saya?


jquery google-chrome-extension content-script
person User    schedule 25.10.2012    source sumber

Jawaban (4)


arrow_upward
69
arrow_downward

Spesifikasi "background" di manifest.json harus menentukan jquery.js sehingga dimuat sebelum background.js:

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

Ini akan berhasil.
Ingatlah bahwa file js dimuat sesuai urutan yang ditentukan.

uji apakah jquery dimuat.

di latar belakang.js

if (jQuery) {  
    // jQuery loaded
} else {
    // jQuery not loaded
}
person Jaydeep Solanki    schedule 02.01.2013
comment
stackoverflow.com/ question/27542186/ Bisakah Anda memberi tahu saya kesalahan apa yang saya lakukan? - person Deadcow; 18.12.2014
comment
ini memberitahu Anda cara memuat JQuery dengan skrip latar belakang Anda, tetapi perhatikan jawaban lainnya... Anda tidak dapat mengakses DOM halaman web yang aktif. Anda dapat mengakses $(document), tetapi itu adalah halaman HTML latar belakang. - person PMorganCA; 15.04.2016
comment
Ketika saya menggunakan pengujian Anda di content_script saya (bukan latar belakang), saya akan mendapatkan pengecualian yang mengatakan bahwa jQuery tidak ditentukan. Saya harus mengubah ke if (typeof jQuery !== 'undefined') untuk benar-benar memeriksa apakah jQuery telah didefinisikan. - person Chip Thien; 28.12.2016
comment
kenapa jawabanmu tidak ada di atas? - person Anwar Hossain; 10.08.2019
comment
lucunya saya juga menggunakan jquery di dalam background.js tetapi sepertinya $.get() tidak berfungsi seperti yang diharapkan seperti content.js - person gumuruh; 17.09.2019
comment
@gumuruh tentu saja lokasinya berbeda, latar belakang dibuat di chrome secara lokal, sedangkan konten dieksekusi di halaman web saat ini - person Taufik Nur Rahmanda; 25.07.2020

arrow_upward
10
arrow_downward

Saya tidak tahu apakah ini cara yang ideal, tapi saya bisa membuatnya berfungsi menggunakan bantuan dari pertanyaan ini: Ekstensi Google Chrome: Bagaimana cara menyertakan jQuery dalam skrip konten yang disuntikkan secara terprogram?.

Rupanya halaman javascript "latar belakang" tidak dapat mengakses DOM halaman web di browser sehingga memuat jquery tidak masuk akal di skrip latar belakang. Sebaliknya saya memiliki skrip latar belakang menyuntikkan secara terprogram perpustakaan jQuery dan kemudian skrip konten ke halaman web saat ini. Skrip konten (tidak seperti skrip latar belakang) dapat mengakses informasi di laman web.

latar belakang.js:

function handleClick(tab) {
    chrome.tabs.executeScript(null, { file: "jquery-1.8.2.min.js" }, function() {
        chrome.tabs.executeScript(null, { file: "content.js" });
    });
}

chrome.pageAction.onClicked.addListener(handleClick);

konten.js

var text = jQuery('h1').text();
alert('inside content! ' + text);
person User    schedule 25.10.2012
comment
Anda masih dapat menggunakan JQuery untuk melakukan panggilan Ajax dll. Tidak perlu menggunakan JQuery di background.js - person nullwriter; 07.05.2015

arrow_upward
1
arrow_downward

Pemahaman saya adalah tidak perlu menggunakan background.js. Anda dapat memiliki kode Anda di popup.js sebagai gantinya. Oleh karena itu, Anda juga tidak perlu memasukkan apa pun ke dalam file manifes.

Saya menyarankan untuk memasukkan jQuery JS dan popup.js Anda di popup.html Anda:

<script src="/js/jquery-1.8.1.min.js"></script>
<script src="/js/popup.js"></script>

Kemudian di popup.js Anda seharusnya bisa mengakses jQuery, sehingga eventHandler Anda akan terlihat seperti ini:

$(document).ready(function(){
 $('#anyelement').on('click', doSomething);

 function doSomething(){
   alert ('do something');
 };
})

Saya tidak berpikir mengapa Anda menginginkan CDN untuk jQuery, semua file akan dihosting di mesin pengguna.

Saya harap ini membantu, Rob

person robertp    schedule 25.10.2012
comment
poin bagus tentang tidak memerlukan CDN. Apa itu popup.html? Saya tidak tahu apa itu. Untuk memperjelas, onclick dipicu ketika pengguna mengklik ikon tindakan halaman. - person User; 25.10.2012
comment
popup.html adalah konten html yang 'muncul' saat Anda mengeklik ikon ekstensi di Chrome. - person robertp; 25.10.2012
comment
Baiklah, coba solusi @ Archer di atas, itu mungkin yang lebih baik untuk Anda. - person robertp; 25.10.2012
comment
Ini tidak diperbolehkan di ekstensi chrome. - person Shiva; 14.07.2021

arrow_upward
0
arrow_downward

Dalam file manifes, pastikan Anda mereferensikan file jquery.js lokal Anda (apa pun namanya) di blok content_scripts:

"content_scripts": [{
    "js": ["jquery.js"]
}]

Itu akan memastikan bahwa itu tertanam dalam file crx dan dapat diakses oleh skrip Anda yang lain.

person Reinstate Monica Cellio    schedule 25.10.2012