Akses `window`/DOM/HTML halaman web daripada sambungan

Question

Saya sedang menulis sambungan Chrome dan cuba menindih halaman web semasa sebaik sahaja butang diklik dalam fail popup.html. Apabila saya mengakses kaedah document.body.insertBefore daripada popup.html, ia menimpa pop timbul, bukan halaman web semasa. Adakah saya perlu menggunakan pemesejan antara background.html dan popup.html untuk mengakses DOM halaman web? Saya mahu melakukan semuanya dalam popup.html dan juga menggunakan j jika boleh

P粉296080076 · Answer

Beberapa contoh menggunakan suntikan program untuk menambah skrip pop timbul yang berkembang pada div ini.

Manifest V3

Jangan lupa untuk menambah kebenaran dalam manifest.json, lihat jawapan lain untuk mendapatkan maklumat lanjut.

Panggilan ringkas:

(async () => {
  const [tab] = await chrome.tabs.query({active: true, currentWindow: true});
  await chrome.scripting.executeScript({
    target: {tabId: tab.id},
    func: inContent1,
  });
})();

// executeScript runs this code inside the tab
function inContent1() {
  const el = document.createElement('div');
  el.style.cssText = 'position:fixed; top:0; left:0; right:0; background:red';
  el.textContent = 'DIV';
  document.body.appendChild(el);
}

Nota: Dalam Chrome 91 atau lebih awal, func: 应为 function:.

Panggil dengan parameter dan terima keputusan

Memerlukan Chrome 92 semasa ia melaksanakan args.

Contoh 1:

res = await chrome.scripting.executeScript({
  target: {tabId: tab.id},
  func: (a, b) => { return [window[a], window[b]]; },
  args: ['foo', 'bar'],
});

Contoh 2:

(async () => {
  const [tab] = await chrome.tabs.query({active: true, currentWindow: true});
  let res;
  try {
    res = await chrome.scripting.executeScript({
      target: {tabId: tab.id},
      func: inContent2,
      args: [{ foo: 'bar' }], // arguments must be JSON-serializable
    });
  } catch (e) {
    console.warn(e.message || e);
    return;
  }
  // res[0] contains results for the main page of the tab 
  document.body.textContent = JSON.stringify(res[0].result);
})();

// executeScript runs this code inside the tab
function inContent2(params) {
  const el = document.createElement('div');
  el.style.cssText = 'position:fixed; top:0; left:0; right:0; background:red';
  el.textContent = params.foo;
  document.body.appendChild(el);
  return {
    success: true,
    html: document.body.innerHTML,
  };
}

Senarai V2

Panggilan ringkas:

// uses inContent1 from ManifestV3 example above
chrome.tabs.executeScript({ code: `(${ inContent1 })()` });

Panggil dengan parameter dan terima keputusan:
```
// uses inContent2 from ManifestV3 example above
chrome.tabs.executeScript({
  code: `(${ inContent2 })(${ JSON.stringify({ foo: 'bar' }) })`
}, ([result] = []) => {
  if (!chrome.runtime.lastError) {
    console.log(result); // shown in devtools of the popup window
  }
});
```
Contoh ini menggunakan fungsi inContent untuk menukar kod secara automatik kepada rentetan, faedahnya ialah IDE boleh menggunakan penyerlahan sintaks dan linting. Kelemahan yang jelas ialah penyemak imbas membuang masa menghuraikan kod, tetapi biasanya kurang daripada 1 milisaat jadi ia boleh diabaikan.

P粉600402085 · Answer

Masalah: Halaman sambungan (pop timbul, pilihan, halaman latar belakang dalam MV2, dll.) diasingkan daripada halaman web, mereka mempunyai DOM sendiri, document、< code>window 和 chrome-extension:// URL.

Sila ambil perhatian bahawa Pekerja Perkhidmatan tidak mempunyai sebarang DOM/dokumen/tetingkap sama sekali.
Untuk memeriksa setiap konteks sambungan gunakan alat pembangunannya sendiri .

Penyelesaian: Gunakan Skrip Kandungan untuk mengakses halaman web atau berinteraksi dengan kandungannya.

Skrip kandungan dilaksanakan dalam halaman web, bukan dalam sambungan.
Skrip kandungan diasingkan secara lalai, lihat Cara menjalankan kod dalam konteks halaman (juga dikenali sebagai dunia utama).
Jangan muatkan skrip kandungan dalam halaman sambungan.

Kaedah 1. Deklaratif

manifest.json:

"content_scripts": [{
  "matches": ["*://*.example.com/*"],
  "js": ["contentScript.js"]
}],

Ia akan berjalan sekali apabila halaman dimuatkan. Selepas itu, gunakan Mesej.

Amaran! Ia tidak boleh menghantar elemen DOM, Peta, Set, ArrayBuffers, kelas, fungsi, dsb. Ia hanya boleh menghantar objek dan jenis ringkas yang serasi dengan JSON, jadi anda perlu mengekstrak data yang diperlukan secara manual dan menghantarnya sebagai tatasusunan atau objek mudah.

Kaedah 2. Pengaturcaraan

ManifestV3:

Dalam skrip sambungan (seperti tetingkap pop timbul), skrip/fungsi kandungan boleh disuntik ke dalam tab mengikut keperluan.

Hasil kaedah ini ialah ungkapan terakhir dalam skrip kandungan dan oleh itu boleh digunakan untuk mengekstrak data. Data mestilah serasi dengan JSON, lihat amaran di atas.
Diperlukan
dalam 权限manifest.json:
- “脚本” - wajib
- "activeTab" - Senario yang ideal, sesuai untuk bertindak balas kepada tindakan pengguna (biasanya mengklik ikon sambungan dalam bar alat). Jangan tunjukkan sebarang amaran kebenaran semasa memasang sambungan.
Jika ideal tidak mungkin, tambahkan tapak yang dibenarkan pada host_permissions dalam manifes.json:
- “*://*.example.com/” dan mana-mana laman web lain yang anda mahukan.
- "" 或 "*://*/" Ini akan meletakkan sambungan anda dalam baris gilir semakan yang sangat perlahan dalam Kedai Web Chrome kerana kebenaran hos yang luas.
Perbezaan antara ManifestV2 dan di atas:
- Gunakan chrome.tabs.executeScript.
- Nyatakan laman web dalam 权限.

Akses `window`/DOM/HTML halaman web daripada sambungan

membalas semua(2)saya akan balas

Manifest V3

Senarai V2

Kaedah 1. Deklaratif

Kaedah 2. Pengaturcaraan