cari

Rumah >hujung hadapan web >tutorial js >Langkah Ke Pembangunan Sambungan Chrome: Persediaan Mudah dengan TypeScript dan Webpack

Langkah Ke Pembangunan Sambungan Chrome: Persediaan Mudah dengan TypeScript dan Webpack

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-19 05:35:17613semak imbas

Sehingga Disember 2024, Chrome kekal sebagai penyemak imbas paling popular di seluruh dunia. Belajar untuk membangunkan sambungan untuk Chrome boleh membuka peluang menarik untuk meneroka pembangunan berasaskan penyemak imbas dan meningkatkan pemahaman anda tentang cara penyemak imbas berfungsi di bawah hud. Kedai Web Chrome menawarkan pelbagai jenis sambungan yang membolehkan pengguna menyesuaikan tingkah laku lalai penyemak imbas dan melanjutkan fungsi pelbagai tapak web.

Dalam blog ini, kami akan melalui penyediaan persekitaran pembangunan setempat untuk membuat sambungan Chrome menggunakan TypeScript dan Webpack. Panduan ini sesuai untuk sesiapa sahaja yang ingin memahami asas pembangunan sambungan Chrome. Pada akhirnya, anda akan mempunyai persekitaran pembangunan yang berfungsi sedia untuk mencuba sambungan pertama anda. Sebelum menyelam, pastikan anda mempunyai pemahaman asas tentang teknologi web, JavaScript dan alatan yang biasa digunakan dalam ekosistem JavaScript. Butiran disenaraikan di bahagian prasyarat.

Gambaran Keseluruhan Pantas Komponen Sambungan Chrome

Sebelum kita beralih ke persediaan, mari kita fahami secara ringkas beberapa komponen utama sambungan Chrome:

Timbul : Mengurus antara muka pengguna sambungan tetapi tidak mempunyai akses terus ke DOM halaman web induk.

Skrip Kandungan: Mempunyai akses terus kepada DOM halaman web induk tetapi berjalan dalam konteks pelaksanaan yang berasingan. Pemisahan ini bermakna ia tidak boleh mengakses objek JavaScript halaman induk secara langsung.

Skrip Disuntik : Berkongsi konteks pelaksanaan yang sama seperti halaman web induk, membenarkan akses kepada objek DOM dan JavaScriptnya.

Skrip Latar Belakang : Beroperasi dalam konteks terpencil, tanpa akses langsung kepada objek DOM atau JavaScript halaman induk.

Skrip Timbul, Kandungan dan Latar Belakang beroperasi dalam konteks sambungan, manakala skrip Disuntik dijalankan dalam konteks halaman web induk. Halaman induk merujuk kepada halaman web aktif di mana sambungan menjalankan fungsinya. Kebenaran dan akses kepada halaman ini ditakrifkan dalam fail manifest.json, yang akan kami bincangkan kemudian dalam blog ini.

Prasyarat

Untuk mengikuti tutorial ini, pastikan anda memasang alatan berikut:

  • Node.js (v18.16 LTS)

  • NPM (Pengurus Pakej Nod)

  • TypeScript

  • Pek web

  • Editor Kod VS (atau mana-mana editor kod pilihan anda)

Persediaan

Setiap sambungan Chrome memerlukan fail bernama manifest.json pada peringkat akar projek. Fail ini berfungsi sebagai rangka tindakan konfigurasi untuk sambungan anda, yang mengandungi butiran penting tentang projek itu. Walaupun tiada peraturan ketat tentang keseluruhan struktur projek, kami akan mulakan dengan mencipta fail ini dan secara progresif membina projek seperti yang digariskan dalam blog ini.

Sebelum meneruskan, pastikan semua prasyarat dipasang pada mesin anda.

Ikuti langkah di bawah untuk menyediakan projek anda dan kebergantungannya:

Buat direktori untuk projek anda dan masuk ke dalam direktori itu. Ini akan menjadi punca projek anda. Semuanya dari sini dan seterusnya akan berdasarkan punca projek anda melainkan dinyatakan sebaliknya.

mkdir chrome-extension && cd ./chrome-extension

Buat fail yang dipanggil sebagai manifest.json

{
 "manifest_version": 3,
 "name": "My First Chrome App",
 "version": "1.0",
 "description": "A Chrome extension built with TypeScript using webpack.",
 "action": {
 "default_popup": "popup.html",
 "default_icon": "icon.png"
 }
}

Kebanyakan kandungan dalam manifes.json adalah penerangan sendiri kecuali objek tindakan. default_icon ialah ikon apl anda yang akan muncul di sebelah nama apl anda dalam Chrome dan default_popup menentukan fail HTML untuk dipaparkan sebagai pop timbul apabila ikon sambungan diklik.

Buat fail yang dipanggil sebagai popup.html dengan kandungan berikut,

<html>
 <head>
  <title>First Chrome Extension</title>
 </head>
 <body>
  <h1>This is my app popup</h1>
 </body>
</html>

Sertakan fail imej bernama icon.png dalam direktori akar. Ini akan berfungsi sebagai ikon apl anda, dipaparkan dalam bar alat Chrome. Pastikan imej dalam format yang disokong (cth., PNG) dan bersaiz sesuai.

Ujian Pantas dengan persediaan minimum

Sebelum menyelami kefungsian yang lebih kompleks, mari uji sambungan asas ini untuk memastikan semuanya disediakan dengan betul. Ujian awal ini akan menjadi asas untuk proses pembangunan kami dan mengesahkan bahawa perubahan yang kami buat kemudian berfungsi seperti yang diharapkan.

Buka Pengurusan Sambungan Chrome : Buka Chrome dan navigasi ke halaman Urus Sambungan dengan menaip chrome://extensions/ dalam bar alamat. Ini akan membawa anda ke skrin Sambungan.

Dayakan Mod Pembangun : Cari togol mod Pembangun di bahagian atas sebelah kanan skrin dan hidupkannya jika ia belum didayakan. Mendayakan mod ini membolehkan Chrome memuatkan sambungan yang dibina secara setempat selain daripada yang dimuat turun daripada Kedai Web Chrome.

Muat Sambungan Anda : Klik butang Muatkan yang tidak dibungkus di bahagian atas halaman. Semak imbas ke dan pilih direktori akar projek anda.

Sahkan Pemasangan : Setelah dimuatkan, sambungan anda akan muncul dalam senarai sambungan yang dipasang.

Render Pop Timbul : Klik pada ikon Apl Chrome Pertama Saya di penjuru kanan sebelah atas Chrome, betul-betul di atas butang Urus Sambungan. Tindakan ini sepatutnya memaparkan fail popup.html, memaparkan kandungan yang anda takrifkan sebelum ini.

Step Into Chrome Extension Development: Easy Setup with TypeScript and Webpack

Jika anda telah berjaya membuatnya berfungsi maka ujian pertama kami berjaya dan kami boleh membinanya. Jika tidak, sila baca kandungan di atas dengan teliti untuk memastikan anda tidak terlepas sebarang langkah sepanjang perjalanan.

Langkah seterusnya ialah mencipta fail package.json untuk menguruskan kebergantungan projek. Jalankan arahan berikut:

npm init -y

Arahan ini memulakan fail package.json dengan nilai lalai. Jika anda ingin menyesuaikannya, tinggalkan bendera -y dan jawab gesaan secara interaktif.

Fail package.json lalai akan kelihatan seperti ini:

{
 "manifest_version": 3,
 "name": "My First Chrome App",
 "version": "1.0",
 "description": "A Chrome extension built with TypeScript using webpack.",
 "action": {
 "default_popup": "popup.html",
 "default_icon": "icon.png"
 }
}

Kini kami boleh memasang semua kebergantungan yang diperlukan ke dalam projek. Anda boleh menggunakan arahan berikut untuk berbuat demikian.

  • npm install -D typescript — Untuk memasang TypeScript dan menambahnya pada bahagian devDependencies package.json

  • npm install -D @types/chrome — Untuk memasang jenis untuk Chrome dan menambahkannya pada bahagian devDependencies package.json

  • npm install -D webpack — Untuk memasang webpack ke dalam projek dan menambahnya pada bahagian devDependencies package.json

  • npm install -D webpack-cli — Ini diperlukan kerana kami akan melakukan muat semula panas apabila kami membuat perubahan pada pangkalan kod

  • npm i -D copy-webpack-plugin — Ini diperlukan untuk menyalin sebarang aset statik ke dalam direktori output atau direktori dist

  • laluan npm i -D — Ini diperlukan untuk menyelesaikan laluan aset statik dalam konfigurasi pek web kemudian hari

  • npm i -D @babel/core @babel/preset-env babel-loader ts-loader — Ini diperlukan untuk menyusun kod semasa proses binaan webpack

Untuk ujian seterusnya, kami perlu membuat aplikasi ini berfungsi dengan skrip taip dan pek web. Kami sudah memasang kebergantungan yang diperlukan. Sekarang kita perlu membuat beberapa fail konfigurasi dan menulis beberapa kod untuk membolehkan ini berfungsi.

Kami akan mencipta dua fail konfigurasi, satu untuk TypeScript dan satu lagi untuk webpack. Cipta fail yang dipanggil tsconfig.json dengan kandungan berikut.

<html>
 <head>
  <title>First Chrome Extension</title>
 </head>
 <body>
  <h1>This is my app popup</h1>
 </body>
</html>

Di atas adalah untuk pengkompil TypeScript mengenal pasti lokasi fail .ts dengan betul dan menyusunnya dengan betul. Mengikut konfigurasi di atas, fail .ts dijangka hadir di bawah direktori src atau sub-direktorinya. dan fail .js yang ditranspilkan akan dibuat dalam direktori dist.

Sekarang buat fail webpack.config.cjs yang akan mempunyai konfigurasi yang diperlukan untuk membina dan menjana fail yang disusun bersama-sama dengan aset statik lain cth. imej

{
  "name": "chrome-extension",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Nota: CopyWebpackPlugin menyalin aset statik daripada kod sumber ke direktori dist.

Sekarang buat direktori yang diperlukan menggunakan arahan berikut:

mkdir src/skrip -p

Di dalam direktori skrip, cipta fail Typescript ringkas dengan kandungan berikut,

src/scripts/popup.ts

{
 "manifest_version": 3,
 "name": "My First Chrome App",
 "version": "1.0",
 "description": "A Chrome extension built with TypeScript using webpack.",
 "action": {
 "default_popup": "popup.html",
 "default_icon": "icon.png"
 }
}

Kod di atas akan mencetak mesej ke konsol apabila pop timbul dipaparkan. Kami juga perlu memasukkan pautan fail popup.ts ini (yang akan disusun ke fail popup.js) dalam popup.html. Juga, buat fail yang dipanggil popup-style.css dan content-style.css. Kami kemudiannya boleh menggunakan fail ini untuk menggayakan pop timbul dan halaman lain. Jadi mari lakukan itu,

Sertakan pautan ke popup-style.css dan popup.js dalam popup.html yang kami buat sebelum ini

popup.html

<html>
 <head>
  <title>First Chrome Extension</title>
 </head>
 <body>
  <h1>This is my app popup</h1>
 </body>
</html>

Buat fail pop-style.css:

{
  "name": "chrome-extension",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Buat fail content-style.css:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"]
}

Kini tiba masanya untuk menambah arahan berkaitan webpack pada fail package.json supaya kita boleh membina sambungan.

// [webpack.config.cjs]
const path = require("path");
const webpack = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  mode: "development", // Use 'production' for production builds
  target: "web",
  devtool: "source-map",
  entry: {
   "popup": path.resolve(
      __dirname,
      "src/scripts/popup.ts"
    ),
  },
  output: {
    filename: "[name].js", // Output file name for each entry
    path: path.resolve(__dirname, "dist"), // Output directory
    clean: true, // Clean the output directory before each build
    libraryTarget: "umd", // Universal Module Definition
  },

  resolve: {
    extensions: [".ts", ".js"], // Resolve .ts and .js extensions
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
            },
          },
          "ts-loader",
        ],
      },
    ],
  },

  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "popup-style.css"), // Source directory
          to: path.resolve(__dirname, "dist"), // Destination directory
        },
        {
          from: path.resolve(__dirname, "content-style.css"), // Source directory
          to: path.resolve(__dirname, "dist"), // Destination directory
        },
     {
          from: path.resolve(__dirname, "icon.png"), // Source directory
          to: path.resolve(__dirname, "dist"), // Destination directory
        },
        {
          from: path.resolve(__dirname, "popup.html"), // Source directory
          to: path.resolve(__dirname, "dist"), // Destination directory
        },
        {
          from: path.resolve(__dirname, "manifest.json"), // Source directory
          to: path.resolve(__dirname, "dist"), // Destination directory
        },
      ],
    }),
  ],
}

Jalankan arahan berikut untuk memulakan proses binaan:

npm run build

Perintah ini memantau perubahan dalam fail anda dan membina semula projek secara automatik.

Ujian Pantas dengan persediaan minimum

Kami boleh melakukan ujian lain sekarang untuk menyemak sama ada konfigurasi berkaitan pek web kami berfungsi seperti yang diharapkan. Tetapi sebelum anda mencuba untuk menguji, padamkan sambungan lama daripada ujian pertama di mana anda telah memuat naik direktori akar projek ke Chrome. Sekarang kali ini kita perlu memuat naik direktori dist kerana kod yang disusun akan berada dalam direktori ini dan bukan direktori akar projek. Selepas anda memuat naik versi pelanjutan yang lebih baharu dan memaparkan pop timbul, klik kanan pada pop timbul dan buka konsol dev dan semak sama ada anda boleh melihat pernyataan konsol daripada popup.ts. Pernyataan harus ada, jika tidak , sila semak sebarang kesilapan yang dilakukan dalam langkah sebelumnya.

Step Into Chrome Extension Development: Easy Setup with TypeScript and Webpack

Mempertingkatkan persediaan

Pada ketika ini, kami mempunyai versi asas sambungan yang berfungsi tetapi terdapat beberapa komponen yang perlu kami tambah supaya kami boleh melakukan pembangunan tempatan dengan mudah.

Sehingga kini kami telah melihat komponen pop timbul. Kini tiba masanya untuk menambah komponen lain. Buat tiga fail iaitu injected.ts,content.ts dan background.ts dalam direktori src/scripts dengan kandungan berikut,

src/scripts/injected.ts

(() => {
    const message:string = "This is a console statement from the popup script";
    console.log(message)
})();

disuntik.[ts|js] ialah fail khas yang mempunyai akses kepada Dom serta objek JavaScript yang didedahkan oleh tapak induk. Kami perlu menambahkan fail ini pada tapak hos secara dinamik menggunakan skrip kandungan.

Buat fail content.ts:

src/scripts/content.ts

....
<link href="popup-style.css" rel="stylesheet"/>
....
<script src="popup.js"></script>
....

Buat fail background.ts:

src/scripts/background.ts

{
 "manifest_version": 3,
 "name": "My First Chrome App",
 "version": "1.0",
 "description": "A Chrome extension built with TypeScript using webpack.",
 "action": {
 "default_popup": "popup.html",
 "default_icon": "icon.png"
 }
}

Kini kami perlu mengemas kini fail webpack.config.cjs untuk menambah tiga entri ini sebagai titik masuk.

<html>
 <head>
  <title>First Chrome Extension</title>
 </head>
 <body>
  <h1>This is my app popup</h1>
 </body>
</html>

Sebagai langkah terakhir, kami perlu mengemas kini fail manifest.json untuk memasukkan semua konfigurasi ini supaya persekitaran Chrome dapat mengesannya.

{
  "name": "chrome-extension",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Dalam manifest.json di atas kami mengkonfigurasi sambungan untuk berfungsi dengan google.com bermakna sambungan ini akan melaksanakan logiknya hanya apabila google.com dimuatkan dalam penyemak imbas. Anda boleh menukarnya kepada mana-mana tapak web pilihan anda.

Ujian Pantas dengan persediaan Dipertingkat

Kami boleh melakukan ujian akhir sekarang dengan persediaan yang dipertingkatkan. Sebelum meneruskan, sila pastikan anda memasang semula apl dalam chrome supaya anda mengelakkan isu disebabkan ketidakpadanan dengan versi kod yang lebih lama. Untuk melihat sama ada semua komponen berfungsi dengan betul, semak penyataan console.log yang berbeza. Ingat bahawa kami telah meletakkan pernyataan console.log dalam empat fail berbeza: injected.ts, background.ts, content.ts dan popup.ts. Perlu ada empat mesej yang dilog masuk dalam konsol. Jadi, inilah langkah-langkahnya,

  • Hentikan perintah bina npm run dalam terminal jika ia berjalan dan mulakannya semula supaya ia mengambil fail baharu yang baru kami buat

  • Alih keluar dan Pasang apl sekali lagi

  • Buka pop timbul daripada skrin tetapan sambungan, klik kanan pada pop timbul itu dan buka konsol pembangun. Anda sepatutnya melihat mesej yang datang daripada skrip latar belakang dan skrip pop timbul dalam konsol ini

  • Buka https://www.google.com dalam penyemak imbas dalam tab lain

  • Klik kanan pada tapak google yang dibuka dan buka konsol pembangun. Anda sepatutnya dapat melihat mesej yang datang daripada skrip kandungan dan skrip yang disuntik

Step Into Chrome Extension Development: Easy Setup with TypeScript and Webpack

Step Into Chrome Extension Development: Easy Setup with TypeScript and Webpack

Tahniah kerana berjaya menyediakan dan menjalankan sambungan Chrome pertama anda! Jika anda menghadapi sebarang masalah, sila semak semula langkah yang telah anda ikuti untuk memastikan segala-galanya tersedia. Selain itu, pautan ke repositori GitHub disediakan di penghujung blog ini untuk rujukan anda.

Pengambilan Utama

Dalam blog ini, kami telah mempelajari cara menyediakan persekitaran pembangunan setempat untuk pembangunan sambungan Chrome. Berikut ialah beberapa perkara penting:

  • Kami meneroka komponen utama yang terlibat dalam pembangunan sambungan Chrome.

  • Kami belajar cara menyediakan persekitaran pembangunan dengan TypeScript dan Webpack.

  • Kami juga membincangkan cara menyediakan dan menguji sambungan dalam Chrome.

Pandang Ke Hadapan

Saya sedang mengusahakan blog lain di mana kami akan meneroka kes penggunaan mudah untuk sambungan Chrome, mempamerkan cara semua komponen persekitaran pembangunan Chrome yang kami bincangkan dalam blog ini bersatu untuk mencipta sambungan berfungsi.

Terima kasih kerana meluangkan masa membaca blog ini! Minat dan masa anda amat kami hargai. Saya teruja untuk berkongsi lebih banyak lagi semasa saya meneruskan perjalanan ini. Selamat mengekod!

Pautan GitHub — https://github.com/gauravnadkarni/chrome-extension-starter-ts

Artikel ini pada asalnya diterbitkan di Medium.

Atas ialah kandungan terperinci Langkah Ke Pembangunan Sambungan Chrome: Persediaan Mudah dengan TypeScript dan Webpack. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript typescript json css chrome html npm webpack print Static Array Object if switch for while select format include try Directory continue double using Interface copy delete JS console default dom this display background github https everything Access Foundation Other
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimanakah Saya Boleh Menyesuaikan Mesej Pengesahan dalam Borang HTML?Artikel seterusnya：Bagaimanakah Saya Boleh Menyesuaikan Mesej Pengesahan dalam Borang HTML?

Artikel berkaitan

Lihat lagi