Saya telah mengembangkan ekstensi untuk Chrome untuk waktu yang lama dan selama ini saya telah beralih dari skrip pengguna Greasemonkey ke aplikasi Angular penuh di shell chrome-extension. Tugas saya adalah saya akan menambal beberapa situs yang sudah berfungsi untuk mengubah fungsionalitasnya dan mengotomatiskan beberapa proses di situs ini. Terkadang aplikasi saya tumbuh dalam skala besar dan menjadi sulit untuk mendukung ekstensi plain-js (ada banyak pengaturan dalam aplikasi, fungsi CRUD, dll.). Dan kemudian Angular datang untuk menyelamatkan.
Dalam artikel ini, saya akan memberi tahu Anda bagaimana saya berteman dengan
Chrome Extension dan
Angular CLI , dan mengatur proses pengembangan, serta kesulitan apa yang saya temui dan bagaimana menyelesaikannya.
Buat folder baru dan inisialisasi aplikasi baru di dalamnya.
mkdir new-project cd new-project ng new frontend --routing=true --skipGit=true --style=scss --skipTests=true
Pada tahap pengembangan,
Angular menghasilkan file html dinamis di mana pengembangan berlangsung, dan ekstensi Chrome perlu diberi makan file html statis untuk melihat hasil pekerjaan. Tentu saja, Anda dapat secara terpisah merakit proyek Angulyarovsk dan kemudian membangun versi build sebagai tambahan, tetapi akan lebih mudah jika ini terjadi secara otomatis.
Setelah membuat aplikasi baru, buka folder frontend dan di file package.json di bagian skrip tambahkan skrip baru untuk membangun proyek kami
"developing": "ng build --watch --deploy-url /frontend/dist/frontend/ --base-href /frontend/dist/frontend/index.html?/"
Perhatikan
deploy-url dan
base-href .
Kemudian, di root proyek, buat folder
ekstensi lain dan buat file
extension.js di dalamnya, yang akan menjadi skrip
latar belakang untuk ekstensi kita. Struktur proyek saat ini:
| new-project/ | | extension/ | | | extension.js | | frontend/ | | | ...
Content
extension.js const ANGULAR_HTML_URL = "../../frontend/dist/frontend/index.html"; chrome.browserAction.onClicked.addListener(function () { chrome.tabs.create({ url: chrome.runtime.getURL(ANGULAR_HTML_URL) }); });
Ini akan menjadi
browserAction , yang akan membuka tab baru dengan aplikasi bersudut kami, yang dalam bentuk rakitan akan disimpan di sepanjang jalur ini.
Tambahkan manifest.json ke proyek kami { "manifest_version": 2, "name": "Simple Chrome Ext", "description": "Simple Chrome Extension as an example", "version": "1.00", "author": "Bogdan", "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", "background": { "persistent": true, "scripts": ["/extension/extension.js"] }, "browser_action": { "default_title": "Chrome ext" } }
Sekarang kita dapat merakit proyek kita menjadi sebuah ekstensi. Kami menggunakan
chrome: // extensions / ,
aktifkan mode pengembang dan pilih
Unduh ekstensi yang belum dibuka .
Kenyamanannya adalah kami memiliki pemuatan ulang yang hampir panas. Kami meluncurkan
ng build dengan flag
arloji dan ketika kode berubah, proyek akan dibangun kembali dan file js akan diganti. Artinya, pada halaman ekstensi, kita hanya perlu memuat ulang halaman dan semua pembaruan akan diambil. Ini sangat mempercepat pengembangan add-on.
Poin lain di mana saya memakan anjing adalah bahwa dalam konfigurasi routing:
{ useHash: true }
dan juga kami akan kembali di atas,
base-href di build kami terdaftar sebagai
/frontend/dist/frontend/index.html?/ - perhatikan tanda tanya sebelum slash terakhir. Faktanya adalah bahwa pada beberapa sistem, ketika Anda mengklik tautan dalam aplikasi Angular, semuanya macet tanpa tanda ini. Rupanya, server web statis dari mesin chrome merasakan perubahan URL sebagai permintaan ke file lain (meskipun useHash: true) dan ketika memperbarui halaman itu menghasilkan kesalahan 404. Hanya dalam kombinasi ini saya berhasil mencapai operasi yang stabil di semua sistem.
Mari kita kembali ke
package.json dari aplikasi kita dan menambahkan skrip lain
"prod": "ng build --sourceMap false --prod true --deploy-url /frontend/dist/frontend/ --base-href /frontend/dist/frontend/index.html?/"
Ini akan menjadi skrip untuk membangun aplikasi kami untuk versi produksi.
Di Toko Web Chrome, arsip zip dengan ekstensi diposkan dan untuk menyederhanakan perakitan, saya membuat skrip untuk tujuan ini
Kode sumber dapat ditemukan di
sini .
Total: kami membuat kit pra-pengembangan untuk Ekstensi Chrome Sudut dengan perutean yang benar dan pembaruan / pembuatan aplikasi yang nyaman.
PS: untuk menghilangkan path
/ frontend / dist / frontend / tersebut , Anda dapat mengkonfigurasi lingkungan dan menentukan path dalam majelis produksi secara berbeda, tetapi ini bukan titik kunci.