Cara membuat peluasan silang penyemak imbas menggunakan JavaScript dan API penyemak imbas

Tutorial ini akan merangkumi cara membuat peluasan web yang berfungsi di pelbagai penyemak imbas. Ini akan menunjukkan kepada anda bagaimana menyusun projek dan menulis kod JavaScript untuk berinteraksi dengan tab penyemak imbas, bergantung pada penyemak imbas mana yang digunakan. Ini bermakna anda dapat membuat kod dan kemudian menyebarkan satu pakej pelanjutan ke kedai web pelbagai penyemak imbas.

Catatan ini akan memberi tumpuan kepada penyemak imbas Chrome dan Firefox, bersama dengan menyebarkan pelanjutan melalui laman web Chrome Web Store dan Firefox Add-ons. Penyemak imbas dan pilihan pengedaran lain juga tersedia untuk sambungan web.

Mulakan dengan templat - salin, edit dan terbitkan!

Untuk melihat contoh yang lengkap, berikut adalah pautan ke peluasan yang saya buat dipanggil Link Formatter, dengan JavaScript penyemak imbas silang dalam popup.js. Pakej yang sama disenaraikan di kedai web Chrome dan Firefox.

Sambungan penyemak imbas

Sambungan adalah kaedah hebat untuk memperluas fungsi penyemak imbas anda, dan ini membolehkan anda meningkatkan pengalaman dalam talian. Sekiranya anda membina yang pertama atau ingin mengetahui lebih lanjut mengenai mereka, saya cadangkan tutorial berikut:

  • Sambungan Penyemak Imbas - Mozilla | MDN
  • Apa itu sambungan? - Google Chrome
  • Anatomi sambungan - Mozilla | MDN

Muatkan pelanjutan anda secara tempatan di komputer anda

Semasa mengembangkan pelanjutan anda, anda boleh memuatkannya secara tempatan tanpa perlu menerbitkan dan memuat turunnya dari laman web luaran. Cara anda melakukannya bergantung pada penyemak imbas yang anda gunakan.

Chrome

  • Lawati chrome://extensions/di penyemak imbas Chrome anda
  • Klik Load Unpacked
  • Pilih folder pelanjutan

Firefox

  • Lawati about:debugging
  • Klik pada Load Temporary Add-on
  • Pilih manifest.jsonfolder dalam pelanjutan

Petua debug : untuk melihat konsol, (misalnya untuk melihat ralat), klik kanan / kawalan klik pada ikon pelanjutan web atau pop timbul dan pilihinspect

Menulis JavaScript untuk pelanjutan penyemak imbas anda

Terdapat banyak API JavaScript yang dapat digunakan dalam pelanjutan penyemak imbas anda. Catatan ini akan memfokus pada API tab.

Untuk lebih lanjut mengenai API peluasan web, lihat API JavaScript - Mozilla | MDN.

Sambungan penyemak imbas yang merangkumi halaman HTML pop timbul ketika pengguna mengklik ikon di bar alat penyemak imbas boleh memiliki struktur projek seperti ini:

extension├── css│ └── style.css├── js│ └── popup.js├── manifest.json└── popup.html

The popup.htmlhalaman kemudian akan menjalankan js/popup.jsskrip di bahagian bawah halaman. Anda akan menambahkan JavaScript anda di sini.

Catatan : struktur projek lain mungkin mempunyai folder untuk kod perpustakaan, serta fail JavaScript yang dijalankan di kawasan lain dari sambungan. Contohnya, dalam skrip latar peluasan, dan dalam dokumen lain yang digabungkan dengan pelanjutan, termasuk tindakan penyemak imbas atau munculan tindakan halaman, bar sisi, halaman pilihan, atau halaman tab baru.

API tab penyemak imbas

Semasa menulis pelanjutan web, anda perlu menggunakan API tab untuk berinteraksi dengan tab di penyemak imbas. Anda juga perlu meminta izin daripada pengguna untuk melakukan ini.

Meminta kebenaran untuk mengakses tab

Kebenaran perlu ditetapkan manifest.json. Apabila pengguna cuba memasang pelanjutan, pengguna akan meminta untuk mengesahkan bahawa tindakan ini dibenarkan.

"permissions": [ "tabs" ]

Menanya tab dengan API penyemak imbas

Browsers, such as Firefox, use the browser.tabs API to interact with the browser’s tabs. To request info about the window’s tabs, you use the query method, which returns a promise with an array of tabs.

browser.tabs.query( queryInfo // object)

Read more about browser.tabs.query at tabs.query() — Mozilla | MDN

To request the active tab for the browser window, you would write the following JavaScript:

browser.tabs.query({active: true, currentWindow: true}) .then(logCurrentTabData)

To get the current tab, you retrieve the first tab from the returned array of tabs. Following this structure, you can get the data from the browser tab.

const logCurrentTabData = (tabs) => { currentTab = tabs[0] console.log(currentTab.title); console.log(currentTab.url);}

However, when you try to open the extension in Chrome…

Querying tabs with the chrome API

Chrome has its own API for tabs queries. This follows the syntax chrome.tabs → your query

chrome.tabs.query(object queryInfo, function callback)

Read more about Chrome’s tabs API here: chrome.tabs — Google Chrome.

So to use this method call, you would write the following in your browser extension:

chrome.tabs.query( {active: true, currentWindow: true}, (arrayOfTabs) => { logCurrentTabData(arrayOfTabs) });

Combining tab queries

Detect which API to use

You can then include both types of browser queries in your extension by using a conditional statement to determine which one to use.

if(chrome) { chrome.tabs.query( {active: true, currentWindow: true}, (arrayOfTabs) => { logCurrentTabData(arrayOfTabs) } );} else { browser.tabs.query({active: true, currentWindow: true}) .then(logCurrentTabData)}

Adding more code for each browser type

Within each side of the condition, you can then add other pieces of code that depend on the different APIs, for example to create new tabs.

chrome.tabs.create()browser.tabs.create()

Here is the code with the extra methods added in that opens a link in a new tab.

if(chrome) { chrome.tabs.query( {active: true, currentWindow: true}, (arrayOfTabs) => { logCurrentTabData(arrayOfTabs) } ); $('a').click( (event) => { chrome.tabs.create({url:event.target.href}) } )} else { browser.tabs.query({active: true, currentWindow: true}) .then(logCurrentTabData) $('a').click( (event) => { browser.tabs.create({url:event.target.href}) } )}

Publishing your extension

With this code in place, you can now interact with the current browser without having to write two or more different web extension projects. You can now package your extension and publish to multiple web stores with the same file!

  • Publish in the Chrome Web Store — Google Chrome
  • Developer Hub :: Add-ons for Firefox

Read more from Medium

  • How to link to a specific paragraph in your Medium article (2018 Table of Contents method) by Quincy Larson in freeCodeCamp
  • Improving the Medium Experience: One browser extension at a time by in cedric amaya in freeCodeCamp

Read more from ryanwhocodes

  • How you can make a progressive web app in an hour
  • Mind your programming language: How to use Github Linguist and gitattributes to detect your app’s code type accurately
  • Make your terminal more colourful and productive with iTerm2 and Zsh!