Екстензије за прегледач нису ништа друго до додаци који побољшавају функционалност прегледача. Другим речима, они додају више функција основној функционалности претраживача.
Али како је проширење корисније од веб апликације? Па, зато што проширење може приступити свим АПИ-јима претраживача, што вам даје већу контролу над прегледачем.
Уз помоћ проширења, можете:
✅ Прилагодите кориснички интерфејс претраживача и картица.
✅ Додајте нове пречице за радње прегледача.
✅ Пажљиво пратите прегледач и веб.
Гоогле Цхроме такође има веб продавницу у којој можете да хостујете своје Цхроме екстензије које свако може да користи. Можда мислите да је прављење Цхроме екстензије застрашујући задатак, али у стварности, то су само ХТМЛ, ЦСС и ЈаваСцрипт.
Да, можете да направите проширење за Цхроме користећи једноставне веб технологије као што је ЈаваСцрипт, а ево упутства о томе!
Преглед садржаја
Прављење Цхроме екстензије
У овом водичу ћете научити како да направите проширење за Цхроме које анализира историју прегледача и представља вам је путем искачућег прозора.
Обавезне датотеке
Једина потребна датотека за прављење екстензије за Цхроме је датотека манифест.јсон. Остатак свега што кодирате идентично је изградњи веб апликације.
Креирање датотеке Манифест.јсон
Ова конкретна датотека дефинише конфигурацију и функционалност екстензије. Ево примера како датотека манифеста обично изгледа:
{
"manifest_version": 3,
"name": "History",
"description": "View Browsing History",
"version": "0.1",
"action": {
"default_popup": "index.html"
}
}
Најновија верзија датотеке манифеста у време писања је в3, која, према Цхроме-ууводи побољшања безбедности екстензија, приватности и перформанси и омогућава проширењима да користе отворене веб технологије као што су сервисни радници и обећања.
Такође можете видети својство акције у датотеци манифеста. Дефинише коју ХТМЛ датотеку желите да отворите у искачућем прозору када корисник кликне на икону екстензије. Такође постоји својство дефаулт_ицон које вам омогућава да дефинишете подразумевану икону екстензије која ће бити приказана.
Израда апликације
Време је да се направи апликација, која ће бити приказана крајњем кориснику као искачући прозор. То нема везе са екстензијама. Уместо тога, то је нормална веб апликација.
Прво, морате да креирате улазну датотеку коју можете навести у својству дефаулт_попуп манифеста. Направио сам индек.хтмл као улазну тачку за ово проширење.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chrome Extension</title>
<link rel="stylesheet" href="https://wilku.top/how-to-create-a-chrome-extension-from-scratch-in-3-steps/style.css">
</head>
<body>
<h2>Browsing History</h2>
<ul class="list"></ul>
<script src="./app.js"></script>
</body>
</html>
Повезао сам листу стилова да би страница изгледала добро у искачућем прозору. Осим тога, постоји и јавасцрипт датотека повезана за руковање функционалношћу екстензије.
function searchHistory() {
chrome.history.search({
text: '',
startTime: new Date("2023-10-01").getMilliseconds()
}, (results) => {
for (const result of results) {
let liItem = document.createElement("li")
let link = document.createElement("a")
link.innerText = result.title
link.href = result.url
liItem.appendChild(link)
document.querySelector(".list").appendChild(liItem)
}
})
}
document.addEventListener("DOMContentLoaded", () => {
searchHistory()
})
Оно што ова датотека ради је да користи АПИ за историју Цхроме-а да бисте упитали историју прегледача и приказали је у искачућем прозору. Када корисник кликне на икону екстензије, ДОМЦонтентЛоадед догађај ће се покренути и позваће функцију сеарцхХистори, која садржи стварни код.
Метод претраге у АПИ-ју историје прихвата обавезни текст параметра, који је текст претраге на основу којег желите да филтрирате историју. Ако га оставите као празан стринг, историја ће бити враћена без икаквих филтера.
Други параметар који је користан је параметар стартТиме. Филтрира резултате историје на основу времена које је протекло од времена почетка. На пример, ако дате време почетка од једне недеље, онда ће се преузети историја само за прошлу недељу. То је опциони параметар и подразумевано је подешен на последња 24 сата.
За преузимање резултата, АПИ обезбеђује функцију повратног позива која садржи резултате у низу. Можете прећи преко низа и направити листу од њега.
for (const result of results) {
let liItem = document.createElement("li")
let link = document.createElement("a")
link.innerText = result.title
link.href = result.url
liItem.appendChild(link)
document.querySelector(".list").appendChild(liItem)
}
Сада АПИ за историју у Цхроме-у захтева дозволу за „историју“, која треба да буде дефинисана у нашој датотеци манифеста.
{
"manifest_version": 3,
"name": "History",
"description": "View Browsing History",
"version": "0.1",
"action": {
"default_popup": "index.html"
},
"permissions": [
"history"
]
}
Покретање проширења
Ово је најлакши корак за креирање и извршавање Цхроме екстензије. Кликните на троточку у Цхроме-овој траци са радњама и идите на Управљање екстензијама у оквиру Екстензије. Такође можете директно да одете на ову везу цхроме://ектенсионс/.
Укључите режим програмера ако није укључен.
Затим кликните на Учитај распаковано, а затим изаберите фасциклу пројекта у којој сте управо креирали екстензију. На тај начин ћете моћи да видите своју екстензију на листи.
Да бисте извршили проширење, идите на Цхроме траку са радњама и кликните на своје проширење за листу.
То је то; управо сте направили једноставну екстензију за Цхроме. Ако желите више примера, можете погледати више Примери проширења за Цхроме у званичном спремишту Гоогле Цхроме-а.
Ако желите да објавите свој додатак за Цхроме у Цхроме веб продавници, можете Пратите ове кораке и платите једнократну накнаду да бисте регистровали проширење у продавници.
Завршне речи
Прављење проширења за Цхроме је заиста лако ако знате основе било које веб апликације. Питање је само креирања датотеке манифеста, а ваша апликација се претвара у екстензију.
Сада када знате како да направите проширење за Цхроме, погледајте најбоље Цхроме екстензије да бисте помогли програмерима.