Pembangunan Sambungan Chrome - Bangunkan apl minimum dengan TypeScript, React, Tailwind CSS dan Webpack

pengenalan

Dalam blog ini, kami akan meneroka cara menyediakan dan membangunkan sambungan Chrome menggunakan TypeScript, React, Tailwind CSS dan Webpack. Kami akan membuat sambungan minimum yang dipanggil "NoteMe" ✍️ untuk menguji pemahaman kami. Sambungan kami akan menyertakan ciri berikut:

• Benarkan pengguna menambah berbilang nota untuk tapak web tertentu
• Membolehkan pengguna melihat nota yang disimpan untuk tapak web tertentu
• Berikan pilihan untuk memadam nota untuk tapak web tertentu
• Simpan nota secara setempat dalam storan penyemak imbas
• Segerakkan nota secara pilihan dengan hujung belakang untuk storan awan

Penyegar semula

Dalam blog ini, kita akan belajar cara membina sambungan Chrome menggunakan teknologi moden. Panduan ini menganggap bahawa anda sudah mempunyai kebiasaan membina dan memuat naik sambungan ke Chrome semasa pembangunan tempatan. Jika anda baru dalam hal ini atau memerlukan panduan terperinci tentang asas-asas, saya syorkan anda menyemak blog saya sebelum ini: Pautan

Intip sambungan

Pelanjutan akan termasuk komponen berikut:

• Butang Togol: Butang untuk membuka dan menutup bar sisi.
• Bar sisi: Panel serba boleh yang membolehkan pengguna: Tulis nota baharu. Lihat nota yang disimpan. Padamkan nota yang disimpan. Segerakkan nota dengan hujung belakang (peruntukan tersedia dalam kod, walaupun tiada hujung belakang disambungkan pada masa ini).
• Timbul Timbul: Tetingkap kecil yang membolehkan pengguna meletakkan semula butang togol (digunakan untuk membuka/menutup bar sisi) pada kedudukan yang telah ditetapkan pada skrin Nota: Walaupun tiada penyepaduan bahagian belakang dalam pelaksanaan ini, kod tersebut termasuk peruntukan untuk menyambungkan bahagian belakang pada masa hadapan.

Di bawah ialah tangkapan skrin yang mempamerkan rupa sambungan selepas siap:

Prasyarat

Sebelum menyelami tutorial ini, pastikan anda mempunyai alatan berikut dipasang pada sistem anda:

• Node.js (v18.16 LTS atau lebih baru)
• NPM (Pengurus Pakej Node, digabungkan dengan Node.js)
• TypeScript
• Pek web
• Editor Kod VS (atau mana-mana editor kod pilihan anda)

Sambungan dari 40,000 Kaki

Rajah di atas memberikan gambaran keseluruhan peringkat tinggi tentang kerja dalaman sambungan ini. Berikut adalah beberapa perkara penting yang boleh kita perolehi daripada rajah:

• skrip kandungan berinteraksi secara langsung dengan DOM halaman web induk, membolehkannya mengubah suai kandungan halaman.
• Timbul, latar belakang dan skrip kandungan berkomunikasi antara satu sama lain melalui sistem pemesejan masa jalan Chrome.
• Untuk tugasan yang berkaitan dengan storan Chrome atau panggilan API bahagian belakang, kandungan atau skrip pop timbul serahkan tanggungjawab kepada pekerja latar belakang menggunakan sistem pemesejan masa jalan.
• skrip latar belakang bertindak sebagai pengantara tunggal dengan bahagian belakang apl dan storan Chrome. Ia juga menyampaikan pemberitahuan, jika ada, kepada skrip lain menggunakan pemesejan masa jalan.
• Timbul dan skrip kandungan bertukar maklumat terus melalui sistem pemesejan masa jalan Chrome.

Persediaan sambungan

Walaupun projek sambungan Chrome tidak mewajibkan struktur projek tertentu, projek tersebut memerlukan fail manifest.json untuk ditempatkan pada akar direktori binaan. Mengambil kesempatan daripada fleksibiliti ini, kami akan mentakrifkan struktur projek tersuai yang membantu menyusun skrip yang berbeza dengan berkesan. Struktur ini akan membolehkan penggunaan semula kod yang lebih baik merentas skrip dan meminimumkan pertindihan, memperkemas proses pembangunan kami.

Langkah 1: Buat struktur direktori asas untuk projek

Untuk bermula, kami akan menyediakan struktur direktori asas untuk projek itu. Anda boleh menggunakan skrip bash berikut untuk mencipta struktur asas bersama-sama dengan fail manifest.json:

#!/bin/bash

bash_script_absolute_path=$(pwd)
declare public_paths=("public" "public/assets" "public/assets/images")
declare source_paths=("src" "src/lib" "src/scripts" "src/scripts/background" "src/scripts/content" "src/scripts/injected" "src/scripts/popup" "src/styles")
declare public_directory_path="public"
declare manifest_file="manifest.json"
declare project_name="note-me"

create_directory () {
    if [ ! -d "" ]; then
        mkdir 
    fi
}

create_file () {
    if [ ! -e "/" ]; then
        touch /
    fi
}

create_public_directories () {
    for public_path in "${public_paths[@]}";
    do
        create_directory $public_path
    done
}

create_source_directories () {
    for source_path in "${source_paths[@]}";
    do
        create_directory $source_path
    done
}

execute () {
    echo "creating project struture at "${bash_script_absolute_path}
    create_directory $project_name
    cd $bash_script_absolute_path"/"$project_name
    create_public_directories
    create_source_directories
    create_file $manifest_file $public_directory_path
    echo "done creating project struture at "${bash_script_absolute_path}" with project name "$project_name
}

execute

Pastikan struktur direktori anda menyerupai yang ditunjukkan dalam tangkapan skrin di bawah.

Langkah 2: Fail manifest.json yang terletak dalam direktori awam hendaklah distrukturkan seperti yang ditunjukkan di bawah:

{
    "manifest_version": 3,
    "name": "NoteMe",
    "version": "1.0",
    "description": "A Chrome extension built with React and TypeScript using Webpack.",
    "action": {
      "default_popup": "popup.html",
      "default_icon": "app-icon.png"
    },
    "background": {
      "service_worker": "background.js",
      "type": "module"
    },
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["content.js"],
        "run_at": "document_end"
      }
    ],
    "permissions": [
      "storage",
      "activeTab",
      "scripting",
      "webNavigation"
    ],
    "host_permissions": ["<all_urls>"],
    "web_accessible_resources": [
      {
        "resources": ["styles.css", "sidebar-open.png", "sidebar-close.png"],
        "matches": ["<all_urls>"]
      }
    ]
  }

Perkara yang perlu diperhatikan:

• Pelanjutan fail ialah .js kerana fail .ts akan disusun ke dalam fail .js, yang diperlukan semasa masa jalan dalam persekitaran Chrome.
• Medan padanan menggunakan sebagai nilainya, membolehkan sambungan itu beroperasi pada mana-mana halaman web yang dimuatkan dalam Chrome.
• Tiga fail imej dirujuk: app-icon.png, sidebar-open.png dan sidebar-close.png. Anda boleh menemui fail ini dalam repositori yang dipautkan di hujung blog ini.
• Fail manifest.json mesti diletakkan pada peringkat akar direktori dist selepas projek dibina. Untuk memastikan ini, kami perlu mengkonfigurasi tetapan webpack untuk mengalihkannya dengan sewajarnya semasa proses binaan.

Langkah 3: Mulakan npm dan Pasang Ketergantungan

• Mulakan dengan memulakan npm dalam projek anda menggunakan arahan berikut: npm init -y
• Tambahkan pergantungan pembangunan yang diperlukan pada bahagian devDependencies projek anda. Jalankan arahan berikut: npm i --save-dev @types/chrome @types/react @types/react-dom autoprefixer copy-webpack-plugin css-loader mini-css-extract-plugin postcss postcss-loader style-loader tailwindcss ts-loader typescript webpack webpack-cli webpack-dev-server
• Tambah kebergantungan masa jalan yang diperlukan untuk menjalankan projek: npm i --save react react-dom

Langkah 4: Buat fail yang dirujuk dalam manifest.json

Buat fail berikut yang dirujuk dalam manifes.json: backgroun.ts, content.ts dan popup.html.

• background.ts: Cipta fail ini dalam direktori src/scripts/background
• content.ts: Cipta fail ini dalam direktori src/scripts/content
• popup.html Cipta fail ini dalam direktori awam

Langkah 5: Kemas kini pop timbul dan Kod latar belakang

Tambahkan kod berikut pada fail popup.html dalam direktori awam:

#!/bin/bash

bash_script_absolute_path=$(pwd)
declare public_paths=("public" "public/assets" "public/assets/images")
declare source_paths=("src" "src/lib" "src/scripts" "src/scripts/background" "src/scripts/content" "src/scripts/injected" "src/scripts/popup" "src/styles")
declare public_directory_path="public"
declare manifest_file="manifest.json"
declare project_name="note-me"

create_directory () {
    if [ ! -d "" ]; then
        mkdir 
    fi
}

create_file () {
    if [ ! -e "/" ]; then
        touch /
    fi
}

create_public_directories () {
    for public_path in "${public_paths[@]}";
    do
        create_directory $public_path
    done
}

create_source_directories () {
    for source_path in "${source_paths[@]}";
    do
        create_directory $source_path
    done
}

execute () {
    echo "creating project struture at "${bash_script_absolute_path}
    create_directory $project_name
    cd $bash_script_absolute_path"/"$project_name
    create_public_directories
    create_source_directories
    create_file $manifest_file $public_directory_path
    echo "done creating project struture at "${bash_script_absolute_path}" with project name "$project_name
}

execute

Nota:

Kod di atas memasang dua pendengar:

1. Fungsi yang didaftarkan oleh chrome.runtime.onInstalled.addListener dilaksanakan setiap kali sambungan dipasang dalam penyemak imbas. Ini boleh digunakan untuk memulakan storan Chrome atau bahagian belakang (jika berkenaan) dengan keadaan yang dipratakrifkan.
2. Fungsi yang didaftarkan oleh chrome.runtime.onMessage.addListener dilaksanakan apabila skrip latar belakang menerima mesej daripada kandungan atau skrip pop timbul.

Selain itu, pernyataan import membawa masuk pendengar dari direktori src/lib. Logik apl teras dibina dalam src/lib, membolehkan penggunaan semula merentas konteks yang berbeza (cth., kandungan dan skrip latar belakang).

Langkah 6: Walkthrough Direktori src/lib

Direktori src/lib menempatkan logik teras sambungan. Di bawah ialah gambaran keseluruhan struktur dan komponen utamanya:

• Direktori komponen: Mengandungi semua komponen React yang digunakan dalam sambungan.
• lib/components/ContentApp.tsx: Bertindak sebagai komponen bekas untuk skrip kandungan.
• lib/components/NoteMePosition.tsx: Mengandungi komponen yang bertanggungjawab untuk skrip pop timbul.
• pembantu.ts: Termasuk fungsi pembantu yang digunakan sepanjang sambungan.
• model storan.ts: Mengurus interaksi dengan storan setempat Chrome. Untuk butiran tentang struktur data yang disimpan, rujuk fail ini bersama-sama dengan types.ts.
• jenis.ts: Mentakrifkan jenis tersuai yang digunakan dalam sambungan.
• pekerja.ts: Mengandungi panggilan balik untuk pendengar acara latar belakang.

Untuk pelaksanaan terperinci, sila rujuk kod sebenar dalam repositori.

Langkah 7: Memasang Komponen Reaksi

Dalam langkah ini, kami memasang komponen React untuk pemaparan. Komponen ini dipasang dalam dua skrip berbeza:src/scripts/content/content.ts dan src/scripts/popup/popup.ts.

Skrip Popup: Ditemui dalam src/scripts/popup/popup.ts.

#!/bin/bash

bash_script_absolute_path=$(pwd)
declare public_paths=("public" "public/assets" "public/assets/images")
declare source_paths=("src" "src/lib" "src/scripts" "src/scripts/background" "src/scripts/content" "src/scripts/injected" "src/scripts/popup" "src/styles")
declare public_directory_path="public"
declare manifest_file="manifest.json"
declare project_name="note-me"

create_directory () {
    if [ ! -d "" ]; then
        mkdir 
    fi
}

create_file () {
    if [ ! -e "/" ]; then
        touch /
    fi
}

create_public_directories () {
    for public_path in "${public_paths[@]}";
    do
        create_directory $public_path
    done
}

create_source_directories () {
    for source_path in "${source_paths[@]}";
    do
        create_directory $source_path
    done
}

execute () {
    echo "creating project struture at "${bash_script_absolute_path}
    create_directory $project_name
    cd $bash_script_absolute_path"/"$project_name
    create_public_directories
    create_source_directories
    create_file $manifest_file $public_directory_path
    echo "done creating project struture at "${bash_script_absolute_path}" with project name "$project_name
}

execute

Skrip Kandungan: Ditemui dalam src/scripts/content/content.ts.

{
    "manifest_version": 3,
    "name": "NoteMe",
    "version": "1.0",
    "description": "A Chrome extension built with React and TypeScript using Webpack.",
    "action": {
      "default_popup": "popup.html",
      "default_icon": "app-icon.png"
    },
    "background": {
      "service_worker": "background.js",
      "type": "module"
    },
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["content.js"],
        "run_at": "document_end"
      }
    ],
    "permissions": [
      "storage",
      "activeTab",
      "scripting",
      "webNavigation"
    ],
    "host_permissions": ["<all_urls>"],
    "web_accessible_resources": [
      {
        "resources": ["styles.css", "sidebar-open.png", "sidebar-close.png"],
        "matches": ["<all_urls>"]
      }
    ]
  }

perkara utama:

• Skrip Pemasangan Berasingan:   Skrip pop timbul dan kandungan beroperasi dalam konteks yang berbeza  
• Skrip Popup: Berjalan dalam konteks halaman web popup.html di mana ia dimuatkan.  
• Skrip Kandungan: Berjalan dalam konteks halaman web utama yang dimuatkan dalam penyemak imbas.
• DOM Bayang untuk Skrip Kandungan:  
  • Gaya yang disuntik oleh skrip kandungan berpotensi menjejaskan penampilan halaman web induk.  
  • Untuk mengelakkan perkara ini, kami menggunakan Shadow DOM untuk merangkum gaya, memastikan ia kekal terpencil dalam sambungan.  
  • Ini tidak diperlukan untuk skrip pop timbul, kerana ia beroperasi dalam persekitaran terpencilnya sendiri (popup.html).

Langkah 8: Konfigurasi untuk Menyusun dan Membina

Menambah konfigurasi yang diperlukan untuk menyusun dan membina sambungan

Untuk berjaya menyusun dan membina sambungan, kami perlu mengkonfigurasi fail berikut:

1. postcss.config.js
2. tailwind.config.js
3. tsconfig.json
4. webpack.config.js

Perkara Utama:

• Tetapan Lalai:  Seboleh-bolehnya, tetapan lalai disediakan untuk memudahkan proses dan memastikan fokus kekal pada matlamat utama—membina sambungan berfungsi sepenuhnya.
• Butiran dalam Repositori: Untuk konfigurasi lengkap dan tetapan terperinci fail ini, sila rujuk repositori kod.

Konfigurasi ini mengendalikan kompilasi TypeScript, penyepaduan CSS Tailwind dan keseluruhan proses binaan Webpack untuk sambungan.

Menguji sambungan

1. Jana Direktori dist: Jalankan arahan berikut untuk mencipta direktori dist:  npm run build
2. Muat naik ke Chrome:    
   • Buka Chrome dan navigasi ke chrome://extensions/.    
   • Dayakan Mod Pembangun di penjuru kanan sebelah atas.    
   • Klik pada Muat Dibongkar dan pilih direktori dist.
3. Sahkan Pemasangan:
   • Setelah dimuatkan, ikon sambungan akan muncul pada setiap halaman di sudut kanan bawah secara lalai.
4. Semakan Kefungsian:
   • Kawalan Kedudukan: Gunakan kawalan dalam pop timbul untuk menukar kedudukan ikon.
   • Ciri Nota: Nota disimpan secara berasingan untuk setiap tapak web dan boleh dipadamkan untuk tapak tertentu tanpa menjejaskan orang lain.
5. Simulasi Belakang:
   • Walaupun tiada bahagian belakang yang disambungkan pada masa ini, kod tersebut termasuk peruntukan untuk disepadukan dengan satu.
   • Pelaksanaan semasa meniru sambungan hujung belakang menggunakan setTimeout dan berjanji untuk mensimulasikan interaksi tak segerak.

Berikut ialah beberapa tangkapan skrin yang ditangkap semasa ujian sambungan.

Pengambilan Utama

Berikut ialah beberapa petikan penting daripada blog ini,

• Kami meneroka cara pelbagai komponen persekitaran Chrome, seperti skrip kandungan, skrip pop timbul dan pekerja latar belakang, berkomunikasi antara satu sama lain menggunakan sistem pemesejan masa jalan Chrome.
• Kami belajar cara mengkonfigurasi dan membina sambungan Chrome dari awal, termasuk menyediakan struktur projek, memasang kebergantungan dan menulis kefungsian teras.
• Kami menemui beberapa amalan baik, seperti:
  • Meningkatkan kebolehgunaan semula kod merentas skrip untuk kebolehselenggaraan dan kebolehskalaan.
  • Menggunakan Shadow DOM dalam skrip kandungan untuk mengelakkan konflik gaya dengan halaman web induk.

Pandang Ke Hadapan

Pada masa hadapan, saya merancang untuk mengusahakan blog lain di mana kami akan meneroka proses penerbitan sambungan Chrome berfungsi sepenuhnya ke Kedai Web Chrome. Matlamat blog itu adalah untuk:

• Bangunkan kompleks sambungan yang cukup untuk menyelesaikan masalah dunia sebenar.
• Tunjukkan proses langkah demi langkah untuk menerbitkan sambungan ke Kedai Web Chrome.

Terima kasih kerana meluangkan masa membaca blog ini! Minat dan sokongan anda amat bermakna bagi saya. Saya teruja untuk berkongsi lebih banyak cerapan semasa saya meneruskan perjalanan ini.

Selamat pengekodan!

pautan github: https://github.com/gauravnadkarni/chrome-extension-starter-app

Artikel ini pada asalnya diterbitkan di Medium.

Atas ialah kandungan terperinci Pembangunan Sambungan Chrome - Bangunkan apl minimum dengan TypeScript, React, Tailwind CSS dan Webpack. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!