ส่วนขยายของ Google chrome :: console.log () จากหน้าพื้นหลัง?

173

ถ้าฉันโทรconsole.log('something');จากหน้าป๊อปอัพหรือสคริปต์ใด ๆ ที่รวมอยู่ว่ามันทำงานได้ดี

อย่างไรก็ตามในขณะที่หน้าพื้นหลังไม่ได้วิ่งออกจากหน้าป๊อปอัพโดยตรงจึงไม่รวมอยู่ในคอนโซล

มีวิธีที่ฉันจะได้รับconsole.log()ในหน้าพื้นหลังเพื่อแสดงในคอนโซลสำหรับหน้าป๊อปอัพหรือไม่

มีวิธีใดบ้างที่จะทำให้ฟังก์ชั่นจากหน้าเว็บพื้นหลังในหน้าป๊อปอัพ

javascript google-chrome google-chrome-extension

คุณหมายความว่าอย่างไรโดยพูดว่า "ใช้งานได้ดี"? กำลังอ่าน "บางสิ่ง" อยู่ที่ไหน การใช้ console.log () ในหน้าต่างป๊อปอัพไม่ควรพิมพ์ในคอนโซลของหน้าเว็บที่โหลด - เนื่องจาก API อายุคำถามถึง 2 ปีเปลี่ยนไปหรือไม่

— anddam

14

หากคุณคลิกขวา -> ตรวจสอบป๊อปอัปในการทำงานของเบราว์เซอร์คุณจะได้รับหน้าเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์สำหรับส่วนขยายของคุณ popup.js จะพิมพ์บันทึกไปยังสิ่งนั้น

— not_shitashi

ความเห็นของ @ not_shitashi ควรเป็นคำตอบสำหรับคำถามนี้

— gabe

154

ใด ๆ ที่หน้าส่วนขยาย (ยกเว้นสคริปต์เนื้อหา ) chrome.extension.getBackgroundPage()ที่มีการเข้าถึงโดยตรงไปยังหน้าพื้นหลังผ่าน

ซึ่งหมายความว่าภายในหน้าป๊อปอัพคุณสามารถทำได้:

chrome.extension.getBackgroundPage().console.log('foo');

วิธีทำให้ง่ายต่อการใช้งาน:

var bkg = chrome.extension.getBackgroundPage();
bkg.console.log('foo');

ตอนนี้ถ้าคุณต้องการทำเช่นเดียวกันภายในสคริปต์เนื้อหาคุณต้องใช้การส่งข้อความเพื่อให้บรรลุ เหตุผลที่พวกเขาทั้งสองอยู่ในโดเมนที่แตกต่างกันซึ่งทำให้รู้สึก มีตัวอย่างมากมายในหน้าการส่งข้อความเพื่อให้คุณตรวจสอบ

หวังว่าจะล้างทุกอย่าง

— Mohamed Mansour
แหล่งที่มา

1

@MohamedMansour โซลูชันนี้ใช้ไม่ได้สำหรับฉัน ถ้าฉันฉันได้รับalert() chrome.extension.getBackgroundPage() nullฉันต้องมีการตั้งค่าการอนุญาตหรือการกำหนดค่าอื่น ๆ หรือไม่?

— gwg

@gwg ส่วนขยายของคุณมีหน้าพื้นหลังหรือไม่ ตามเอกสารอธิบาย "ส่งคืน null หากส่วนขยายไม่มีหน้าพื้นหลัง" developer.chrome.com/extensions/…

— Mohamed Mansour

สิ่งนี้ทำงานได้อย่างสมบูรณ์แบบสำหรับข้อความของฉันเองที่จะปลอบใจ ขอบคุณ มีความคิดเกี่ยวกับวิธีการทำข้อยกเว้นและอื่น ๆ จาก popup.js ปรากฏในคอนโซลของ background.js หรือไม่

— steven_noble

195

คุณสามารถเปิดคอนโซลของหน้าพื้นหลังได้หากคุณคลิกที่ลิงค์ "background.html" ในรายการส่วนขยาย

ในการเข้าถึงหน้าพื้นหลังที่สอดคล้องกับการขยายของคุณเปิดหรือเปิดแท็บใหม่และป้อนSettings / Extensions chrome://extensionsคุณจะเห็นหน้าจอนี้

กล่องโต้ตอบส่วนขยายของ Chrome

background pageภายใต้นามสกุลของคุณคลิกที่ลิงค์ นี่เป็นการเปิดหน้าต่างใหม่ สำหรับตัวอย่างเมนูบริบท_generated_background_page.htmlหน้าต่างมีชื่อเรื่อง:

— Serg
แหล่งที่มา

4

ไชโยฉันตระหนักถึงสิ่งนี้ แต่การเปิดหน้าพื้นหลังโดยตรงไม่ได้เรียกอะไรจากหน้าป๊อปอัพ

— Hailwood

การเปิดหน้าพื้นหลังจะไม่แสดงข้อมูลบันทึกคอนโซล

— Layke

@Hailwood การเปิดหน้าพื้นหลังไม่ได้เรียกอะไรเลย แต่จะแสดงคอนโซลสำหรับหน้าพื้นหลัง

— anddam

1

@ เลย์เกเมื่อคุณเปิดหน้าพื้นหลังคุณยังต้องเขียนลงไปเช่นใช้ console.log () โดยตรงจากหน้าพื้นหลังหรือตามที่ mohamed-mansour กล่าวว่าการเรียกวิธีการเดียวกันกับวัตถุที่ส่งคืนโดย getBackgroundPage ()

— anddam

3

ฉันพบคำถามนี้เพื่อค้นหาวิธีตรวจสอบเอาต์พุตส่วนขยาย (เช่น OP) และพบคำตอบนี้มีประโยชน์มากเพราะอนุญาตให้ฉันตรวจสอบการบันทึกคอนโซลโดยไม่ผ่านหน้าเนื้อหา

— anddam

66

หากต้องการตอบคำถามของคุณโดยตรงเมื่อคุณโทรconsole.log("something")จากพื้นหลังข้อความนี้จะถูกบันทึกไว้ในคอนโซลของหน้าพื้นหลัง หากต้องการดูคุณสามารถไปที่chrome://extensions/และคลิกที่inspect viewอยู่ใต้ส่วนขยายของคุณ

เมื่อคุณคลิกที่ป๊อปอัพมันจะถูกโหลดลงในหน้าปัจจุบันดังนั้น console.log ควรแสดงข้อความบันทึกในหน้าปัจจุบัน

— songyy
แหล่งที่มา

ฉันด้วย! มันเป็นวิธีที่ง่ายที่สุดและตรงไปตรงมา

— SaidbakR

ส่วนขยายของฉันไม่มีสิ่งนั้นส่วนขยายอื่น ๆ จะทำเช่นนั้น! ฉันจะเปิดใช้งานได้อย่างไร

— Ahmed Eid

หากคุณมี 3 จอภาพเหมือนฉัน ... หมุนหัวของคุณ มันเปิด ChromeDevTools ที่ส่วนตรงข้ามของอาร์เรย์จอภาพและฉันไม่เห็น

— mpen

26

คุณยังคงสามารถใช้ console.log () ได้ แต่จะได้รับการล็อกอินเข้าสู่คอนโซลแยกต่างหาก เพื่อที่จะดูมัน - คลิกขวาที่ไอคอนส่วนขยายและเลือก "ตรวจสอบป๊อปอัพ"

— Lacho Tomov
แหล่งที่มา

12

ทางออกที่ง่ายที่สุดคือการเพิ่มรหัสต่อไปนี้ที่ด้านบนของไฟล์ และกว่าที่คุณสามารถใช้API คอนโซล Chromeแบบเต็มทั้งหมดได้ตามปกติ

 console = chrome.extension.getBackgroundPage().console;
// for instance, console.assert(1!=1) will return assertion error
// console.log("msg") ==> prints msg
// etc

— วว
แหล่งที่มา

9

const log = chrome.extension.getBackgroundPage().console.log;
log('something')

เปิดบันทึก:

เปิด: chrome: // Extensions /
รายละเอียด> หน้าพื้นหลัง

— O Fallante
แหล่งที่มา

คุณช่วยอธิบายเพิ่มเติมเกี่ยวกับคำสั่งของคุณได้ไหม?

— inetphantom

7

ลองนี้ถ้าคุณต้องการเข้าสู่คอนโซลของหน้าใช้งานอยู่:

chrome.tabs.executeScript({
    code: 'console.log("addd")'
});

— Faz
แหล่งที่มา

1

ต้องใช้สิทธิ์ของโฮสต์สำหรับแท็บปัจจุบัน

— Xan

คุณสามารถเพิ่มมันสำหรับการทดสอบและลบถ้าคุณปล่อย Addon

— Faz

1

ในความสัมพันธ์กับคำถามเดิมฉันต้องการเพิ่มคำตอบที่ได้รับการยอมรับโดย Mohamed Mansour ว่ามีวิธีทำให้งานนี้เป็นแบบอื่น:

คุณสามารถเข้าถึงหน้าส่วนขยายอื่น ๆ (เช่นหน้าตัวเลือกหน้าป๊อปอัป) จากภายในหน้าพื้นหลัง / สคริปต์ด้วยการchrome.extension.getViews()โทร ตามที่อธิบายไว้ที่นี่

 // overwrite the console object with the right one.
var optionsPage = (  chrome.extension.getViews()  
                 &&  (chrome.extension.getViews().length > 1)  ) 
                ? chrome.extension.getViews()[1] : null;

 // safety precaution.
if (optionsPage) {
  var console = optionsPage.console;
}

— WoodrowShigeru
แหล่งที่มา

1

มันเป็นโพสต์เก่าที่มีคำตอบที่ดีอยู่แล้ว แต่ฉันเพิ่มสองบิตของฉัน ฉันไม่ชอบใช้ console.log ฉันควรใช้ตัวบันทึกที่บันทึกไปยังคอนโซลหรือที่ใดก็ตามที่ฉันต้องการดังนั้นฉันจึงมีโมดูลที่กำหนดฟังก์ชั่นบันทึกเล็กน้อยเช่นนี้

function log(...args) {
  console.log(...args);
  chrome.extension.getBackgroundPage().console.log(...args);
}

เมื่อฉันเรียกบันทึก ("นี่คือบันทึกของฉัน") มันจะเขียนข้อความทั้งในคอนโซลป๊อปอัพและคอนโซลพื้นหลัง

ข้อดีคือสามารถเปลี่ยนพฤติกรรมของบันทึกได้โดยไม่ต้องเปลี่ยนรหัส (เช่นปิดการใช้งานบันทึกเพื่อการผลิต ฯลฯ )

— เดนิสจี
แหล่งที่มา

0

ในการรับบันทึกคอนโซลจากหน้าพื้นหลังคุณต้องเขียนข้อมูลโค้ดต่อไปนี้ใน background.js หน้าพื้นหลังของคุณ -

chrome.extension.getBackgroundPage () console.log ( 'สวัสดี').

จากนั้นโหลดส่วนขยายและตรวจสอบหน้าพื้นหลังเพื่อดูบันทึกคอนโซล

ไปข้างหน้า !!

— อนุชาไร่
แหล่งที่มา