วิธีใช้ jquery ในการดำเนินการหน้าส่วนขยายของ Google Chrome พื้นหลัง js

ฉันกำลังพัฒนาส่วนขยาย "การกระทำของหน้า" ของ Google Chrome รายการของฉันมี:

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

ในไฟล์ background.js ของฉันฉันมี:

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

chrome.pageAction.onClicked.addListener(doSomething);

มันได้ผล ตอนนี้ในฟังก์ชัน doSomething ของฉัน ฉันต้องการอ่านข้อมูลบางอย่างในหน้าปัจจุบัน มันจะง่ายกว่ามากสำหรับฉันที่จะใช้ jquery เพื่ออ่านข้อมูล เพื่อให้ฉันสามารถกำหนดเป้าหมายข้อมูลที่ต้องการได้อย่างง่ายดาย ฉันจะรวม jquery (ควรให้บริการจาก CDN ของ Google) เพื่อให้สามารถเข้าถึงฟังก์ชัน doSomething ของฉันได้อย่างไร


jquery google-chrome-extension content-script
person User    schedule 25.10.2012    source แหล่งที่มา

คำตอบ (4)


arrow_upward
69
arrow_downward

ข้อกำหนด "background" ใน manifest.json ควรระบุ jquery.js เพื่อให้โหลดก่อน background.js:

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

สิ่งนี้น่าจะได้ผล
จำไว้ว่าไฟล์ js จะถูกโหลดตามลำดับที่ระบุไว้

ทดสอบว่าโหลด jquery หรือยัง

ใน background.js

if (jQuery) {  
    // jQuery loaded
} else {
    // jQuery not loaded
}
person Jaydeep Solanki    schedule 02.01.2013
comment
stackoverflow.com/ questions/27542186/ คุณช่วยบอกฉันหน่อยได้ไหมว่าฉันทำอะไรผิด? - person Deadcow; 18.12.2014
comment
สิ่งนี้จะบอกวิธีโหลด JQuery ด้วยสคริปต์พื้นหลังของคุณ แต่ให้สังเกตคำตอบอื่น ๆ ... คุณไม่สามารถเข้าถึง DOM ของหน้าเว็บที่ใช้งานอยู่ได้ คุณสามารถเข้าถึง $(document) ได้ แต่นั่นคือหน้า HTML พื้นหลัง - person PMorganCA; 15.04.2016
comment
เมื่อฉันใช้การทดสอบของคุณใน content_script ของฉัน (ไม่ใช่พื้นหลัง) ฉันจะได้รับข้อยกเว้นโดยบอกว่าไม่ได้กำหนด jQuery ฉันต้องเปลี่ยนเป็น if (typeof jQuery !== 'undefined') เพื่อตรวจสอบว่าได้กำหนด jQuery หรือไม่ - person Chip Thien; 28.12.2016
comment
ทำไมคำตอบของคุณไม่อยู่ด้านบน? - person Anwar Hossain; 10.08.2019
comment
สิ่งที่ตลกคือฉันใช้ jquery ใน background.js ด้วย แต่ดูเหมือนว่า $.get() ไม่ทำงานอย่างที่คาดไว้เหมือน content.js - person gumuruh; 17.09.2019
comment
@gumuruh แน่นอนว่าตำแหน่งของพวกเขาแตกต่างกัน พื้นหลังถูกสร้างขึ้นใน Chrome ในเครื่อง ในขณะที่เนื้อหาถูกดำเนินการในหน้าเว็บปัจจุบัน - person Taufik Nur Rahmanda; 25.07.2020

arrow_upward
10
arrow_downward

ฉันไม่รู้ว่านี่เป็นวิธีที่เหมาะหรือไม่ แต่ฉันสามารถทำให้มันใช้งานได้โดยใช้ความช่วยเหลือจากคำถามนี้: ส่วนขยายของ Google Chrome: จะรวม jQuery ในสคริปต์เนื้อหาที่แทรกโดยทางโปรแกรมได้อย่างไร

เห็นได้ชัดว่าหน้าจาวาสคริปต์ "พื้นหลัง" ไม่สามารถเข้าถึง DOM ของหน้าเว็บในเบราว์เซอร์ได้ ดังนั้นการโหลด jquery จึงไม่สมเหตุสมผลในสคริปต์พื้นหลัง แต่ฉันมีสคริปต์พื้นหลังฉีดโดยทางโปรแกรมให้กับไลบรารี jQuery จากนั้นตามด้วยสคริปต์เนื้อหา ลงในหน้าเว็บปัจจุบัน สคริปต์เนื้อหา (ไม่เหมือนกับสคริปต์พื้นหลัง) สามารถ เข้าถึงข้อมูลบนเว็บเพจ

พื้นหลัง 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);

content.js

var text = jQuery('h1').text();
alert('inside content! ' + text);
person User    schedule 25.10.2012
comment
คุณยังคงสามารถใช้ JQuery เพื่อโทร Ajax ฯลฯ ได้ ไม่จำเป็นต้องใช้ JQuery บน background.js - person nullwriter; 07.05.2015

arrow_upward
1
arrow_downward

ความเข้าใจของฉันคือไม่จำเป็นต้องใช้ background.js คุณสามารถมีรหัสของคุณใน popup.js แทนได้ ดังนั้นคุณไม่จำเป็นต้องรวมสิ่งใดไว้ในไฟล์ Manifest เช่นกัน

ฉันขอแนะนำให้รวม jQuery JS และ popup.js ของคุณใน popup.html ของคุณ:

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

จากนั้นใน popup.js คุณควรจะสามารถเข้าถึง jQuery ได้ ดังนั้น eventHandler ของคุณจะมีลักษณะดังนี้:

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

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

ฉันไม่คิดว่าทำไมคุณถึงต้องการ CDN สำหรับ jQuery ไฟล์ทั้งหมดจะถูกโฮสต์บนเครื่องของผู้ใช้

ฉันหวังว่ามันจะช่วยได้ ร็อบ

person robertp    schedule 25.10.2012
comment
จุดดีที่ไม่ต้องใช้ CDN popup.html คืออะไร ฉันไม่รู้ว่ามันคืออะไร เพื่อชี้แจงให้ชัดเจน onclick จะถูกทริกเกอร์เมื่อผู้ใช้คลิกที่ไอคอนการทำงานของเพจ - person User; 25.10.2012
comment
popup.html คือเนื้อหา html ที่ 'ป๊อปอัป' เมื่อคุณคลิกไอคอนส่วนขยายใน Chrome - person robertp; 25.10.2012
comment
ตกลง ลองใช้วิธีแก้ปัญหาของ @Archer ด้านบน นั่นอาจจะดีกว่าสำหรับคุณ - person robertp; 25.10.2012
comment
สิ่งนี้ไม่ได้รับอนุญาตในส่วนขยายของ Chrome - person Shiva; 14.07.2021

arrow_upward
0
arrow_downward

ในไฟล์ Manifest ตรวจสอบให้แน่ใจว่าคุณอ้างอิงไฟล์ jquery.js ในเครื่องของคุณ (ไม่ว่าจะเรียกว่าอะไรก็ตาม) ในบล็อก content_scripts:

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

เพื่อให้แน่ใจว่าไฟล์นั้นฝังอยู่ในไฟล์ crx และสคริปต์อื่นๆ ของคุณจะสามารถเข้าถึงได้

person Reinstate Monica Cellio    schedule 25.10.2012