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.

Masalah: Halaman sambungan (pop timbul, pilihan, halaman latar belakang dalam MV2, dll.) diasingkan daripada halaman web, mereka mempunyai DOM sendiri, document、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 权限.