Vue.js ile Firefox Web Extension Oluşturma

Merhaba. Bu yazıda Vue.js kullanarak basit bir Firefox Web Extension oluşturma işleminin nasıl yapılacağını anlatacağım.

Aslında yazının kaynağı Ebru Güleç tarafından yazılan "React ile Chrome Eklentisi Oluşturma" başlıklı bir yazı.

Ebru gerçekten React konusunda çalışan, bilgili bir arkadaş. Medium üzerinde kendisini takip ediyorum.

Bu yazıda yapacağımız uygulama aslında birçok eklentinin de Vue.js ile kullanılabileceğini bize anlatıyor.

Ben de Ebru gibi bu yazıda Pure CSS Single Div Up Home isimli codepen çalışmasını kullanacağım. Alıntı yaptığım yere sadık kalacağım 🙂

Yazıda size node-sass ve sass-loader eklentisinin kurulması gerektiğinden bahsetmeyeceğim. Bunları biliyor olduğunuzu düşünerek hadi başlayalım

Vue Projesi Oluşturalım

vue create endoplazmik-retikulum

Bu komutla birlikte vue-cli kullanılarak vue projesi oluşturacağız. Bize hazır olarak gelen componentlerde de bu işlemi yapabilirsniz ama ben kendi çalışma şeklimi buraya yansıtaracak dosya yapısını ufacık bi değiştireceğim.

src/
    components/
        Home/
            Home.vue
            Home.scss
    App.vue

Yapı böyle olacak. Home.vue, codepen çalışmasındaki HTML, Home.css ise oradaki SCSS kodlarını içerecek. Home.vue şöyle olsun;

App.vue ise şöyle olsun;

Dist Klasörününün Tekrar Oluşturulmasını Engelleme

Buradan sonra kök dizindeki package.json dosyasını açalım ve scripts bölümünü şöyle düzeltelim;

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --no-clean",
    "lint": "vue-cli-service lint"
  }

normalde –no-clean parametresi gelmiyor. Bunu her defasında dist klasörü silinip tekrar oluşturulmasın diye yaptım çünkü bu proje özelinde dist klasörü işimi görecek. Onu eklemiş oldum.

Manifest Dosyası

Daha sonra dist klasörüne gidelim ve içerisinde manifest.json adında bir dosya oluşturalım.

{
    "manifest_version": 2,
    "name": "Endpolazmik Retikulum",
    "version": "1.0.0",
    "chrome_url_overrides" : {
        "newtab": "index.html"
    }
}

Uygulamamıza burada spesifik bir ID vermedik ileride lazım olabilir ama şu an test yapıyoruz 🙂 Yukarıdaki kodda chrome_url_overrides tıpkı ebrunun paylaştığı gibi yeni sekmenin varsayılan davranışını değiştirmemize imkan tanıyacak aksiyonu sağlıyor.

Firefox’un default new tab sayfası ise React ile yapılmış o da ayrı olay ya neyse. Şimdi vue projemizi yarn ile build edelim.

yarn build

Bu kadar. Şimdi tarayıcımızı açıp adres satırına şunu yazalım;

about:debugging

Açılan sayfa şöye olacak;

Load Temporary Add-on… butonuna tıklayalım ve manifest.json dosyasını dist klasöründen seçelim. Eklentiyi paketlemediğiniz sürece geçici bir eklenti olduğunu Firefox yüzünüze çarpacaktır.

Örneğimizi load ettiğimizde görüntü şöyle olacaktır;

Aşağıdaki Reload linkine tıkladığınızda eklenti tekrar load edilir otomatik olarak. Bunu, kodunuzda güncelleme yaptıktan sonra yapmanız gerekiyor 🙂

Sonra gidiyoruz yeni sekmeye 🙂

Ta taaaa 🙂 Oldu evet bu kadar.

Kaynaklar

Yazının asıl kaynağı Ebru Güleç. Oradan aldığım bir fikirdi.

GitHub: https://github.com/aligoren/endoplazmik-retikulum (dist klasörünü de yukarıya attım)

Özetle

Düşünsenize o şaşalı todolistlerin böyle yeni sekmelerde yapıldığını falan 🙂 Manifest dosyasının içeriği hemen hemen Ebrunun yazısında geçenle aynı. Oraya tekrar bakın isterseniz. Diğerleri için buraya alayım sizi

Okuduğunuz için teşekkürler 🙂