Bagaimana saya bisa mendapatkan URL tab saat ini dari ekstensi Google Chrome?

Saya bersenang-senang dengan ekstensi Google Chrome, dan saya hanya ingin tahu bagaimana saya bisa menyimpan URL tab saat ini dalam suatu variabel?

Gunakan chrome.tabs.query()seperti ini:

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

Ini mengharuskan Anda meminta akses ke chrome.tabsAPI di manifes ekstensi Anda :

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

Penting untuk dicatat bahwa definisi "tab saat ini" Anda mungkin berbeda tergantung pada kebutuhan ekstensi Anda.

Pengaturan lastFocusedWindow: truedalam kueri sesuai ketika Anda ingin mengakses tab saat ini di jendela fokus pengguna (biasanya jendela paling atas).

Pengaturan currentWindow: truememungkinkan Anda untuk mendapatkan tab saat ini di jendela tempat kode ekstensi Anda sedang dieksekusi. Misalnya, ini mungkin berguna jika ekstensi Anda membuat jendela / jendela baru (mengubah fokus), tetapi masih ingin mengakses informasi tab dari jendela tempat ekstensi dijalankan.

Saya memilih untuk menggunakan lastFocusedWindow: truedalam contoh ini, karena Google menyebut kasus-kasus yang currentWindow mungkin tidak selalu ada .

Anda bebas untuk lebih mempersempit kueri tab Anda menggunakan salah satu properti yang didefinisikan di sini: chrome.tabs.query

Peringatan! chrome.tabs.getSelectedsudah usang . Silakan gunakan chrome.tabs.queryseperti yang ditunjukkan pada jawaban lain.

Pertama, Anda harus mengatur izin untuk API di manifes.json:

"permissions": [
    "tabs"
]

Dan untuk menyimpan URL:

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

Jawaban lain menganggap Anda ingin mengetahuinya dari munculan atau skrip latar belakang.

Jika Anda ingin mengetahui URL saat ini dari skrip konten , cara JS standar berlaku:

window.location.toString()

Anda dapat menggunakan properti window.locationuntuk mengakses setiap bagian dari URL, seperti host, protokol, atau jalur.

Masalahnya adalah chrome.tabs.getSelected asynchronous. Kode di bawah ini umumnya tidak akan berfungsi seperti yang diharapkan. Nilai 'tablink' akan tetap tidak terdefinisi saat ditulis ke konsol karena getSelected belum memanggil panggilan balik yang menyetel ulang nilai:

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

Solusinya adalah dengan membungkus kode di mana Anda akan menggunakan nilai dalam suatu fungsi dan meminta itu dipanggil oleh getSelected. Dengan cara ini Anda dijamin akan selalu memiliki nilai yang ditetapkan, karena kode Anda harus menunggu nilai diberikan sebelum dieksekusi.

Coba sesuatu seperti:

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

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

Hai di sini adalah Sampel Google Chrome yang mengirimkan email ke Situs saat ini kepada seorang teman. Ide dasar di belakang adalah apa yang Anda inginkan ... pertama-tama ia mengambil konten halaman (bukan untuk Anda) ... kemudian mendapatkan URL (<- bagian yang baik)

Selain itu itu adalah contoh kode kerja yang bagus, yang saya lebih suka motstly daripada membaca Dokumen.

Dapat ditemukan di sini: Email halaman ini

Solusi ini sudah DIUJI.

setel izin untuk API di manifest.json

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

Pada fungsi panggilan beban pertama. https://developer.chrome.com/extensions/tabs#event-onActivated

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

Di ubah fungsi panggilan. https://developer.chrome.com/extensions/tabs#event-onSelectionChanged

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

fungsi untuk mendapatkan URL

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

Bagi mereka yang menggunakan context menu api, dokumen tidak segera jelas tentang cara mendapatkan informasi tab.

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

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

Anda harus memeriksa ini .

HTML

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

manifes. json

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

JavaScript
Kode di bawah ini akan menyimpan semua url jendela aktif ke objek JSON sebagai bagian dari klik tombol.

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);