Cara Membina Pelanjutan Krom

Saya membangunkan pelanjutan Chrome hujung minggu ini kerana saya mendapati diri saya melakukan tugas yang sama berulang kali dan ingin mengautomasikannya. Di samping itu, saya seorang geek yang tinggal di rumah untuk bertahan dalam wabak itu, jadi saya akan menumpukan tenaga terkumpul saya untuk mencipta sesuatu. Saya telah membangunkan beberapa sambungan Chrome selama bertahun -tahun, dan saya harap artikel ini akan membantu anda memulakan juga. Mari mulakan!

Buat fail manifes

Langkah pertama adalah untuk membuat fail bernama manifest.json dan letakkannya dalam folder projek. Fungsinya sama dengan package.json , yang menyediakan maklumat penting mengenai projek untuk kedai aplikasi Web Chrome, termasuk nama, versi, kebenaran yang diperlukan, dan banyak lagi. Berikut adalah contoh:

 {
  "manifest_version": 2,
  "Nama": "Nama Contoh",
  "Versi": "1.0.0",
  "Keterangan": "Ini adalah keterangan contoh",
  "short_name": "Contoh Nama Singkatan",
  "Kebenaran": ["Activetab", "DeclarativeContent", "Storage", "<all_urls> "],
  "Content_scripts": [
    {
      "Perlawanan": ["<all_urls> "],
      "CSS": ["latar belakang.css"],
      "js": ["latar belakang.js"]
    }
  ],
  "Browser_action": {
    "Default_title": "Jalankan tindakan semasa melaksanakan tindakan",
    "default_popup": "popup.html",
    "default_icon": {
      "16": "ikon/icon16.png",
      "32": "ikon/icon32.png"
    }
  }
}</all_urls></all_urls>

Anda mungkin melihat beberapa butiran - pertama: nama dan keterangan boleh diisi seperti yang anda suka.

Kebenaran bergantung pada apa yang perlu dilakukan oleh pelanjutan. Dalam contoh ini, kami menggunakan ["activeTab", "declarativeContent", "storage", "<all_urls> "]</all_urls> , kerana pelanjutan khusus ini memerlukan maklumat mengenai tag aktif, perlu menukar kandungan halaman, perlu mengakses LocalStorage, dan perlu aktif di semua laman web. Jika ia perlu aktif di hanya satu laman web, kita boleh memadamkan indeks terakhir array itu.

Dokumentasi lanjutan Chrome menyenaraikan semua kebenaran dan makna mereka.

 "Content_scripts": [
  {
    "Perlawanan": ["<all_urls> "],
    "CSS": ["latar belakang.css"],
    "js": ["latar belakang.js"]
  }
],</all_urls>

Bahagian content_scripts menetapkan tapak di mana pelanjutan harus aktif. Jika anda mahukan laman web yang berasingan, seperti Twitter, anda boleh menulisnya sebagai ["https://twitter.com/*"] . Fail CSS dan JavaScript adalah semua yang anda perlukan untuk lanjutan. Sebagai contoh, sambungan Twitter yang cekap saya menggunakan fail -fail ini untuk menimpa penampilan lalai Twitter.

 "Browser_action": {
  "Default_title": "Jalankan tindakan semasa melaksanakan tindakan",
  "default_popup": "popup.html",
  "default_icon": {
    "16": "ikon/icon16.png",
    "32": "ikon/icon32.png"
  }
}

Sesetengah kandungan dalam browser_action juga pilihan. Sebagai contoh, jika pelanjutan tidak memerlukan pop timbul untuk melaksanakan fungsinya, anda boleh memadam default_title dan default_popup . Dalam kes ini, hanya ikon lanjutan yang diperlukan. Sekiranya pelanjutan hanya sah di laman web tertentu, Chrome mengeluarkan ikon pelanjutan apabila ia tidak aktif.

debug

Setelah fail manifes, CSS, dan JavaScript siap, lawati chrome://extensions/ dalam bar alamat penyemak imbas dan membolehkan mod pemaju. Ini akan mengaktifkan butang Decompressed Load untuk menambah fail pelanjutan. Anda juga boleh menukar sama ada versi pemaju pelanjutan itu aktif.

Saya sangat mengesyorkan memulakan repositori GitHub untuk kawalan versi pada ketika ini. Ini adalah cara terbaik untuk menyelamatkan kerja anda.

Apabila mengemas kini pelanjutan, ia perlu dimuat semula dari antara muka ini. Ikon penyegaran kecil akan dipaparkan pada skrin. Juga, jika lanjutan mengalami sebarang kesilapan semasa pembangunan, ia juga akan memaparkan butang ralat dengan jejak stack dan maklumat lanjut di sini.

Fungsi tetingkap popup

Mujurlah, ini sangat mudah jika lanjutan perlu menggunakan pop timbul yang muncul dari ikon lanjutan. Selepas menentukan nama fail dengan browser_action dalam fail manifes, anda boleh menggunakan mana -mana HTML dan CSS yang anda suka untuk membina halaman, termasuk imej (saya cenderung menggunakan SVG dalam talian).

Kita mungkin perlu menambah beberapa fungsi ke pop timbul. Ini mungkin memerlukan beberapa JavaScript, jadi pastikan anda menentukan fail JavaScript dalam fail manifes dan juga menghubungkannya dalam fail pop timbul seperti berikut:

Dalam fail ini, mula -mula membuat fungsi, kami akan mengakses Dom Popup seperti ini:

 document.addeventListener ("domContentLoaded", () => {
  var butang = document.getElementById ("hantar");

  Button.AdDeventListener ("klik", (e) => {
    Console.log (E);
  });
});

Jika kami membuat butang dalam fail popup.html , berikannya ID yang dipanggil submit , dan kemudian kembalikan log konsol, anda mungkin mendapati bahawa sebenarnya tiada apa yang dilog masuk dalam konsol. Ini kerana kita berada dalam konteks yang berbeza, yang bermaksud kita perlu klik kanan pada popup dan membuka set devtools yang berbeza.

Sekarang kita boleh mengakses log dan debug! Tetapi ingatlah bahawa jika ada yang ditetapkan di LocalStorage, ia hanya wujud dalam localStorage Devtools Extension; Bukan pelayar pengguna LocalStorage. (Saya menghadapi masalah ini pada kali pertama saya mencubanya!)

Jalankan skrip di luar lanjutan

Ini semua baik, tetapi bagaimana jika kita mahu menjalankan skrip yang boleh mengakses maklumat tab semasa? Berikut adalah beberapa cara untuk melakukan ini. Saya biasanya memanggil fungsi berasingan di dalam pendengar acara DOMContentLoaded :

Contoh 1: Aktifkan fail

 fungsi contoh fungsi () {
  chrome.tabs.executescript (() => {
    chrome.tabs.executescript ({file: "content.js"});
  });
}

Contoh 2: Laksanakan hanya sedikit kod

Pendekatan ini bagus jika anda hanya perlu menjalankan sedikit kod. Walau bagaimanapun, kerana ia memerlukan lulus segala -galanya sebagai rentetan atau templat literal, ia dengan cepat menjadi sukar untuk dikendalikan.

 fungsi contoh fungsi () {
  chrome.tabs.executescript ({
    Kod: `Console.log ('Hi there');`
  });
}

Contoh 3: Aktifkan parameter fail dan lulus

Ingat bahawa sambungan dan tab dijalankan dalam konteks yang berbeza. Ini menjadikan parameter lulus di antara mereka tidak mudah. Kami akan bersarang dua contoh pertama di sini, lulus beberapa kod ke dalam fail kedua. Saya menyimpan semua yang saya perlukan dalam satu pilihan, tetapi agar ia berfungsi, kita perlu merentasi objek tersebut.

 Fungsi Contoh Fungsi (Pilihan) {
  chrome.tabs.executescript (
    {code: "var options =" ​​json.stringify (options)},
    fungsi () {
      chrome.tabs.executescript ({file: "content.js"});
    }
  );
}

ikon

Walaupun fail manifes hanya mentakrifkan dua ikon, kami memerlukan dua lagi untuk secara rasmi menyerahkan sambungan ke kedai web Chrome: ikon persegi 128-piksel, dan ikon yang saya panggil icon128_proper.png , yang juga 128 piksel, tetapi mempunyai beberapa padding di antara tepi imej dan ikon.

Ingat bahawa tidak kira ikon mana yang digunakan, ia perlu kelihatan baik dalam mod cahaya dan gelap penyemak imbas. Saya biasanya mencari ikon saya pada projek kata nama.

Hantar ke kedai aplikasi web Chrome

Sekarang kita boleh pergi ke Konsol Pemaju Kedai Web Chrome untuk menyerahkan pelanjutan! Klik butang projek baru dan seret dan lepaskan fail projek termampat ke dalam pemuat naik.

Chrome akan mengemukakan beberapa soalan mengenai sambungan di sini dan meminta maklumat mengenai kebenaran yang diminta dalam lanjutan dan mengapa kebenaran tersebut diperlukan. Amaran: Meminta kebenaran "ActiveTab" atau "tab" akan mengambil masa yang lebih lama untuk memastikan bahawa Kod tidak melakukan apa -apa penyalahgunaan.

Itu sahaja! Ini sepatutnya membuat anda bersedia untuk mula membina sambungan penyemak imbas Chrome! ?

Atas ialah kandungan terperinci Cara Membina Pelanjutan Krom. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!