Tab Roulette - sambungan pertama saya

Matlamat semasa saya ialah untuk mencipta sambungan Chrome ringkas yang menggunakan keupayaan latar belakang rangka kerja sambungan.

Untuk meringkaskan, skrip latar belakang beroperasi sebagai pekerja perkhidmatan, terutamanya direka untuk mengendalikan tugas yang tidak memerlukan interaksi pengguna langsung.

Salah satu peranan utamanya ialah bertindak sebagai hab komunikasi atau pengendali acara, berfungsi sebagai satu-satunya komponen yang berterusan dan boleh dipercayai dalam seni bina sambungan penyemak imbas. Tidak seperti skrip kandungan, tetingkap timbul atau halaman pilihan, yang bersifat sementara, pekerja perkhidmatan latar belakang memastikan kesinambungan dengan memulakan semula secara automatik apabila ditamatkan untuk mengendalikan acara masuk.

Saya merancang untuk memanfaatkan keupayaan skrip latar belakang ini sebagai pengawal pusat untuk sambungan saya.

Kes penggunaan

Pelanjutan Chrome pertama ini agak mudah. Ia akan mendengar klik pada ikon tindakan sambungan dan bertindak balas dengan mencetuskan tingkah laku seperti rolet. Rolet akan secara berurutan mengaktifkan tab yang sedang dibuka dalam penyemak imbas pengguna untuk tempoh yang singkat sehingga satu tab dibiarkan dipilih secara rawak.

Seperti yang anda lihat, sambungan ini tidak mempunyai tujuan praktikal tetapi bertujuan semata-mata sebagai latihan pembelajaran.

Manifes

{
  "name": "TabRoulette",
  "version": "0.0.1",
  "manifest_version": 3,
  "icons": {
    "16": "images/icon16.png",
    "32": "images/icon32.png",
    "48": "images/icon32.png",
    "128": "images/icon128.png"
  },
  "action": {
    "default_title": "Click to start",
    "default_icon": {
      "16": "images/icon16.png",
      "24": "images/icon24.png",
      "32": "images/icon32.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  }
}

Selain ikon yang dinyatakan dalam manifes untuk digunakan dalam Kedai Web Chrome dan antara muka pengurusan sambungan, penambahan paling ketara ialah atribut tindakan. Atribut ini mengkonfigurasi tingkah laku sambungan apabila ikon bar alat diklik. Dalam kes kami, ia mengarahkan pekerja perkhidmatan untuk memulakan rolet tab semasa interaksi pengguna.

Untuk mengambil kira
Kod saya menggunakan import ES, tetapi seperti yang ditunjukkan sebelum ini, service_worker tidak diisytiharkan secara eksplisit sebagai modul. Bagaimanakah ia masih berfungsi?

"background": {
  "service_worker": "service-worker.js",
  "type": "module"
}

Import ini dikendalikan dan diselesaikan oleh Vite semasa proses penggabungan.

Latar belakang

Seperti yang dinyatakan sebelum ini, skrip latar belakang akan mendengar klik pada ikon tindakan dan memulakan rolet tab sebagai tindak balas.

chrome.action.onClicked.addListener(async () => {
 ...
})

Aspek utama logik pendengar untuk diserlahkan: Pertama, saya perlu mengumpulkan semua tab yang sedang dibuka dalam tetingkap aktif. Ini penting kerana kod saya memerlukan rujukan kepada tab ini untuk mengitarnya secara berurutan.

const currentWindow = await chrome.windows.getCurrent();
const windowTabs = await chrome.tabs.query({
  windowId: currentWindow.id,
});

Saya pada mulanya keliru apabila menggunakan chrome.tabs.query tanpa menyatakan windowId, kerana ia mengembalikan semua tab merentas semua tetingkap penyemak imbas yang terbuka, sedangkan saya hanya mahukan tab dari tetingkap aktif. Ini membawa kepada keputusan yang tidak dijangka kerana bilangan tab yang lebih besar dalam senarai.

Setelah saya memahami tingkah laku ini, mengaktifkan tab secara berurutan menjadi mudah. Ia hanya melibatkan pengemaskinian sifat tab untuk menetapkan setiap satu sebagai aktif dalam urutan sehingga tab rawak akhirnya dipilih.

{
  "name": "TabRoulette",
  "version": "0.0.1",
  "manifest_version": 3,
  "icons": {
    "16": "images/icon16.png",
    "32": "images/icon32.png",
    "48": "images/icon32.png",
    "128": "images/icon128.png"
  },
  "action": {
    "default_title": "Click to start",
    "default_icon": {
      "16": "images/icon16.png",
      "24": "images/icon24.png",
      "32": "images/icon32.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  }
}

Satu lagi matlamat yang ingin saya capai ialah melaraskan rentak tab diaktifkan—bermula dengan pantas dan perlahan hingga ke penghujung. Untuk mencapai ini, fungsi setInterval asli yang saya gunakan dalam ujian awal tidak mencukupi. Sebaliknya, saya melaksanakan utiliti kecil yang membolehkan saya membuat selang boleh laras, menyediakan cara untuk mengubah suai masanya secara dinamik mengikut keperluan.

"background": {
  "service_worker": "service-worker.js",
  "type": "module"
}

Dan itu sahaja—sambungan ringkas dengan kes penggunaan yang menyeronokkan, berfungsi sebagai alasan untuk menyelidiki lebih dalam dunia sambungan penyemak imbas. Saya juga berkongsi kod sumber dengan anda jika anda ingin tahu tentang butirannya.

Oh, dan saya juga menggunakan projek ini untuk meneroka proses penerbitan, yang saya dapati agak mudah. Sekarang, saya hanya menunggu semakan dan penerbitan akhir.

https://github.com/ivaneffable/tabRoulette

Atas ialah kandungan terperinci Tab Roulette - sambungan pertama saya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!