Како направити проширење за више прегледача користећи ЈаваСцрипт и АПИ-је прегледача

Овај водич ће описати како направити веб екстензију која ради у више прегледача. Показаће вам како да структуришете пројекат и напишете ЈаваСцрипт код за интеракцију са картицама прегледача, у зависности од тога који се прегледач користи. То значи да можете кодирати и затим дистрибуирати један додатак у веб продавнице више прегледача.

Овај пост ће се фокусирати на претраживаче Цхроме и Фирефок, заједно са дистрибуцијом додатака путем веб локација Цхроме Веб Сторе и Фирефок Адд-онс. За веб екстензије су такође доступни и други прегледачи и опције дистрибуције.

Започните са шаблоном - копирајте, уредите и објавите!

Да бисте видели завршени пример, ево везе до проширења које сам направио под називом Линк Форматтер, са ЈаваСцрипт-ом за више прегледача у оквиру попуп.јс. Исти пакет наведен је и у веб продавницама Цхроме и Фирефок.

Додаци прегледача

Проширења су фантастичан начин да проширите функционалност свог прегледача и омогућавају вам да побољшате своје искуство на мрежи. Ако градите свој први или желите да сазнате више о њима, препоручујем следеће водиче:

  • Проширења прегледача - Мозилла | МДН
  • Шта су продужења? - Гоогле Цхроме
  • Анатомија продужетка - Мозилла | МДН

Учитајте локално локално на рачунар

Када развијате своје проширење, можете га локално учитати без потребе за објављивањем и преузимањем са спољне веб локације. Начин на који ћете то учинити зависи од тога који прегледач користите.

Хром

  • Посетите chrome://extensions/у Цхроме прегледачу
  • Кликните Load Unpacked
  • Изаберите фасциклу екстензије

Фирефок

  • Посетите about:debugging
  • Кликните на Load Temporary Add-on
  • Изаберите manifest.jsonфасциклу унутар наставка

Савет за отклањање грешака : да бисте погледали конзолу (на пример да бисте видели грешке), кликните десним тастером миша / кликните на икону или искачући прозор веб проширења и изаберитеinspect

Писање ЈаваСцрипт-а за екстензију прегледача

Постоји много ЈаваСцрипт АПИ-ја који се могу користити у проширењу прегледача. Овај пост ће се фокусирати на АПИ картице.

За више информација о АПИ-има за веб-проширење, погледајте ЈаваСцрипт АПИ-ји - Мозилла | МДН.

Додатак прегледача који укључује искачућу ХТМЛ страницу када корисник кликне на икону на траци с алаткама прегледача може имати структуру пројекта попут ове:

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

popup.htmlСтрана би онда покренути js/popup.jsскрипту на дну странице. Овде бисте додали ЈаваСцрипт.

Напомена : друге структуре пројеката могу да имају фасциклу за библиотечки код, као и ЈаваСцрипт датотеке које се изводе у другим областима екстензије. На пример, у позадинским скриптама додатка и у свим другим документима који су у пакету са додатком, укључујући искачуће прозоре акције или странице, бочне траке, странице опција или странице нових картица.

АПИ-ји картице прегледача

Када пишете веб екстензију, требате да користите АПИ картице да бисте комуницирали са картицама у прегледачу. Такође треба да затражите дозволу од корисника да то уради.

Тражење дозвола за приступ картицама

Потребно је подесити дозволе manifest.json. Када корисник покуша да инсталира екстензију, од њега ће затражити да потврди да је ова радња дозвољена.

"permissions": [ "tabs" ]

Упит о картицама помоћу АПИ-ја прегледача

Прегледачи, као што је Фирефок, користе browser.tabsАПИ за интеракцију са картицама прегледача. Да бисте затражили информације о картицама прозора, користите queryметоду која враћа обећање са низом картица.

browser.tabs.query( queryInfo // object)

Прочитајте више о бровсер.табс.куери на табс.куери () - Мозилла | МДН

Да бисте затражили активну картицу за прозор прегледача, написали бисте следећи ЈаваСцрипт:

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

Да бисте добили тренутну картицу, прву картицу дохваћате из враћеног низа картица. Следећи ову структуру, податке можете добити на картици прегледача.

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

Међутим, када покушате да отворите додатак у Цхроме-у ...

Упит о картицама помоћу цхроме АПИ-ја

Цхроме има свој АПИ за упите на картицама. Ово следи синтаксу chrome.tabs→ вашег упита

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

Прочитајте више о Цхроме-овом АПИ-ју картица: цхроме.табс - Гоогле Цхроме.

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

Прочитајте више од Медиум

  • Како повезати одређени пасус у вашем чланку Медиум (метода Садржаја 2018) Куинци Ларсон у фрееЦодеЦамп
  • Побољшање средњег искуства: По једно проширење прегледача од стране цедриц амаиа у фрееЦодеЦамп

Прочитајте више из рианвхоцодес

  • Како за сат времена можете направити прогресивну веб апликацију
  • Пазите на свој програмски језик: Како користити Гитхуб Лингуист и гитаттрибутес за тачно откривање типа кода ваше апликације
  • Учините свој терминал живописнијим и продуктивнијим помоћу иТерм2 и ​​Зсх!