ฉันจะรับ URL ของแท็บปัจจุบันจากส่วนขยายของ Google Chrome ได้อย่างไร

ฉันสนุกกับส่วนขยายของ Google Chrome และฉันแค่อยากรู้ว่าฉันจะเก็บ URL ของแท็บปัจจุบันในตัวแปรได้อย่างไร

ใช้chrome.tabs.query()แบบนี้:

chrome.tabs.query({active: true, lastFocusedWindow: true}, tabs => {
    let url = tabs[0].url;
    // use `url` here inside the callback because it's asynchronous!
});

สิ่งนี้ต้องการให้คุณร้องขอการเข้าถึงchrome.tabsAPI ในรายการส่วนขยายของคุณ:

"permissions": [ ...
   "tabs"
]

โปรดทราบว่าคำจำกัดความของ "แท็บปัจจุบัน" ของคุณอาจแตกต่างกันไปขึ้นอยู่กับความต้องการของส่วนขยายของคุณ

การตั้งค่าlastFocusedWindow: trueในแบบสอบถามนั้นเหมาะสมเมื่อคุณต้องการเข้าถึงแท็บปัจจุบันในหน้าต่างที่ผู้ใช้โฟกัส (โดยทั่วไปคือหน้าต่างด้านบนสุด)

การตั้งค่าcurrentWindow: trueช่วยให้คุณได้รับแท็บปัจจุบันในหน้าต่างที่รหัสส่วนขยายของคุณกำลังทำงานอยู่ ตัวอย่างเช่นสิ่งนี้อาจมีประโยชน์หากส่วนขยายของคุณสร้างหน้าต่าง / ป๊อปอัปใหม่ (เปลี่ยนโฟกัส) แต่ยังคงต้องการเข้าถึงข้อมูลแท็บจากหน้าต่างที่มีการเรียกใช้ส่วนขยาย

ฉันเลือกที่จะใช้lastFocusedWindow: trueในตัวอย่างนี้เพราะ Google โทรออกในกรณีที่อาจไม่เป็นปัจจุบันcurrentWindow

คุณสามารถปรับแต่งการสืบค้นแท็บโดยใช้คุณสมบัติใด ๆ ที่กำหนดไว้ที่นี่: chrome.tabs.query

คำเตือน! chrome.tabs.getSelectedจะเลิก โปรดใช้chrome.tabs.queryตามที่แสดงในคำตอบอื่น ๆ

ก่อนอื่นคุณต้องกำหนดสิทธิ์สำหรับ API ใน manifest.json:

"permissions": [
    "tabs"
]

และเพื่อเก็บ URL:

chrome.tabs.getSelected(null,function(tab) {
    var tablink = tab.url;
});

คำตอบอื่น ๆ ถือว่าคุณต้องการทราบจากป๊อปอัพหรือสคริปต์พื้นหลัง

ในกรณีที่คุณต้องการทราบ URL ปัจจุบันจากสคริปต์เนื้อหาวิธี JS มาตรฐานใช้:

window.location.toString()

คุณสามารถใช้คุณสมบัติของwindow.locationเพื่อเข้าถึงแต่ละส่วนของ URL เช่นโฮสต์โปรโตคอลหรือพา ธ

ปัญหาคือ chrome.tabs.getSelected นั้นไม่ตรงกัน รหัสด้านล่างนี้จะไม่ทำงานตามที่คาดไว้ ค่าของ 'tablink' จะยังไม่ได้กำหนดเมื่อถูกเขียนไปยังคอนโซลเนื่องจาก getSelected ยังไม่ได้เรียกใช้การเรียกกลับที่รีเซ็ตค่า:

var tablink;
chrome.tabs.getSelected(null,function(tab) {
    tablink = tab.url;
});
console.log(tablink);

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

ลองสิ่งที่ชอบ:

chrome.tabs.getSelected(null, function(tab) {
    myFunction(tab.url);
});

function myFunction(tablink) {
  // do stuff here
  console.log(tablink);
}

สวัสดีนี่คือตัวอย่าง Google Chrome ที่ส่งอีเมลถึงไซต์ปัจจุบันให้เพื่อน แนวคิดพื้นฐานที่อยู่เบื้องหลังคือสิ่งที่คุณต้องการ ... ก่อนอื่นจะดึงเนื้อหาของหน้า (ไม่รบกวนคุณ) ... หลังจากนั้นจะได้รับ URL (<- ส่วนที่ดี)

นอกจากนี้มันเป็นตัวอย่างรหัสที่ใช้งานได้ดีซึ่งฉันชอบ motstly มากกว่าการอ่านเอกสาร

พบได้ที่นี่: ส่งหน้านี้ทางอีเมล

โซลูชันนี้ผ่านการทดสอบแล้ว

กำหนดสิทธิ์สำหรับ API ใน manifest.json

"permissions": [ ...
   "tabs",
    "activeTab",
    "<all_urls>"
]

ในฟังก์ชั่นการโทรครั้งแรก https://developer.chrome.com/extensions/tabs#event-onActivated

chrome.tabs.onActivated.addListener((activeInfo) => {  
  sendCurrentUrl()
})

เมื่อเปลี่ยนฟังก์ชั่นการโทร https://developer.chrome.com/extensions/tabs#event-onSelectionChanged

chrome.tabs.onSelectionChanged.addListener(() => {
  sendCurrentUrl()
})

ฟังก์ชั่นเพื่อรับ URL

function sendCurrentUrl() {
  chrome.tabs.getSelected(null, function(tab) {
    var tablink = tab.url
    console.log(tablink)
  })

สำหรับผู้ใช้ที่ใช้context menu apiเอกสารจะไม่ชัดเจนทันทีเกี่ยวกับวิธีการรับข้อมูลแท็บ

  chrome.contextMenus.onClicked.addListener(function(info, tab) {
    console.log(info);
    return console.log(tab);
  });

https://developer.chrome.com/extensions/contextMenus

คุณต้องตรวจสอบในเรื่องนี้

HTML

<button id="saveActionId"> Save </button>

manifest.json

  "permissions": [
    "activeTab",
    "tabs"
   ]

จาวาสคริปต์
รหัสด้านล่างจะบันทึก URL ทั้งหมดของหน้าต่างที่ใช้งานลงในวัตถุ JSON เป็นส่วนหนึ่งของการคลิกปุ่ม

var saveActionButton = document.getElementById('saveActionId');
saveActionButton.addEventListener('click', function() {
    myArray = [];
    chrome.tabs.query({"currentWindow": true},  //{"windowId": targetWindow.id, "index": tabPosition});
    function (array_of_Tabs) {  //Tab tab
        arrayLength = array_of_Tabs.length;
        //alert(arrayLength);
        for (var i = 0; i < arrayLength; i++) {
            myArray.push(array_of_Tabs[i].url);
        }
        obj = JSON.parse(JSON.stringify(myArray));
    });
}, false);