Chrome Web Extension - Walang Kailangang Karanasan sa Coding dati: 6 na Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:10

Ang Mga Extension ng Chrome ay maliliit na programa na binuo upang mapahusay ang isang karanasan sa pag-browse ng mga gumagamit. Para sa karagdagang impormasyon sa mga extension ng chrome pumunta sa

Upang makagawa ng isang Chrome Web Extension, kinakailangan ang pag-coding, kaya napakakinabangan upang suriin ang HTML, JavaScript, at CSS sa website sa ibaba:

www.w3schools.com/default.asp (ang mga paaralan ng w3 ay isang mahusay na website para sa mga mapagkukunan ng pag-coding)

Hindi alam kung paano mag-code? Huwag magalala, makakatulong ang tutorial na ito na gabayan ang paraan.

Ang pinakamagandang bagay tungkol sa Mga Extension ng Chrome ay maaari silang ipasadya. Hindi lamang isang tiyak na bagay ang maaaring magawa, kaya't maging malikhain.

Mga gamit

Ang mga suplay na kinakailangan ay nasa ibaba:

• Isang computer na may text editor (Gumagamit ako ng Notepad)
• Google Chrome

At yun lang!

Hakbang 1: Lumikha ng Direktoryo

Una, lumikha ng isang folder upang hawakan ang lahat ng mga file, at pangalanan itong 'extension'. Ang pangalan ay maaaring mabago sa paglaon kung ninanais.

Hakbang 2: Lumikha ng Manifest File at I-code Ito

Ang manifest file ay isang napakahalagang bahagi ng extension. Sinasabi nito ang extension nang eksakto kung ano ang dapat gawin at maging. Ang mga manifest file ay naka-format sa JSON. Ang unang hakbang ay upang buksan ang isang text editor at mag-save ng isang bagong file bilang 'manifest.json'.

Susunod na i-type ang script sa ibaba:

{

"name": "First Extension", "bersyon": "1.0", "description": "Maaari akong mag-code ng isang extension", "manifest_version": 2, "browser_action": {"default_title": "First Extension"}}

Tandaan ang mga kuwit pagkatapos ng mga halaga!

Matapos itong mai-type, i-save ang manifest file at pumunta sa chrome: // extensions (dapat gamitin ang Chrome bilang browser para dito). Kapag nasa chrome: // mga extension, i-on ang mode ng developer. Pagkatapos nito, pindutin ang pindutang 'Load unpacked' at piliin ang folder na 'extension'.

drum roll po …

Yay! Iyon ay isang extension, maliban sa… uri ng pagbubutas nito. Wala itong literal na ginagawa sa ngayon, ngunit sa madaling panahon ay magiging sobrang cool.

Hakbang 3: Lumikha ng mga Icon at I-update ang Manifest

Ang isang website na gumagana nang maayos para sa pagguhit ng mga icon ay https://www.piskelapp.com/. Mayroong iba pang mga programa sa pagguhit na magagamit para magamit din. Ang mga icon ay dapat na parisukat. Ang proyektong ito ay gagamit ng 16x16, 32x32, 48x48, at 128x128 na mga icon. Kapag nagawa na ang icon, gumawa ng isang folder na tinatawag na 'mga imahe' sa folder ng extension at ilagay ang icon sa folder na iyon. Maaaring maging magandang ideya na pangalanan ang isang imahe ayon sa laki nito. Halimbawa, 'icon32.png'. Ang bagong code ay nasa ibaba:

{

"name": "First Extension", "bersyon": "1.0", "description": "Maaari akong mag-code ng isang extension", "manifest_version": 2, "browser_action": {"default_title": "First Extension", " default_icon ": {" 16 ":" mga imahe / icon16.png "," 32 ":" mga imahe / icon32.png "," 48 ":" mga imahe / icon48.png "," 128 ":" mga imahe / icon128.png "}}}

Para sa sanggunian sa manifest code, pumunta sa

Hakbang 4: Magdagdag ng isang Popup

Magkakaroon ng popup ang extension na ito. Ang popup ay isang HTML (Hypertext Markup Language) na file, kaya mahusay na malaman muna ang mga pangunahing kaalaman sa HTML, CSS, at JavaScript.

Una, i-save ang isang dokumento bilang 'popup.html' file sa folder ng extension.

Susunod, i-edit ang manifest file upang maipakita ang 'popup.html' kapag na-click ito. Ang bagong code ay nasa ibaba:

{

"name": "First Extension", "bersyon": "1.0", "description": "Maaari akong mag-code ng isang extension", "manifest_version": 2, "browser_action": {"default_title": "First Extension", " default_icon ": {" 16 ":" mga imahe / icon16.png "," 32 ":" mga imahe / icon32.png "," 48 ":" mga imahe / icon48.png "," 128 ":" mga imahe / icon128.png "}," default_popup ":" popup.html "}}

Huwag kalimutan ang kuwit!

Ngayon, kung ang sumusunod na HTML code ay naidagdag sa popup.html, ipapakita ang 'Hello World' kapag na-click.

Kamusta Mundo

Hakbang 5: Gawin itong Maganda at Gawin itong Interactive

Kung ang isang pangunahing linya ng HTML ay nai-type, pagkatapos ay nakakakuha ng hubad na minimum na tapos na. Kung ang CSS (Cascading Style Sheets) ay idinagdag, pagkatapos ito ay magiging mas cool, at kung idagdag ang JavaScript, maaari itong maging mas interactive. Ang tutorial na ito ay hindi magiging detalye upang ipaliwanag ang HTML, JavaScript, at CSS, ngunit maraming mapagkukunan sa online. Nasa ibaba ang code para sa simpleng programang 'Hello World', pagkatapos ay ang mas makulay na programa, ayon sa pagkakabanggit:

Kamusta Mundo

Kamusta Mundo

#hello {background-color: # 000000; kulay: # ff0000; hangganan: 8px pasimula # 86a3b2; border-radius: 50px; ibahin ang anyo: paikutin (57deg); padding: 10px; piliin ng gumagamit: wala; cursor: crosshair; paglipat: ibahin ang anyo 2s; } #hello: hover {transform: rotate (-417deg); }

Ang pangalawang halimbawa na ito ay maaaring maging napaka nakalilito, para sa isang nagsisimula. Ngunit, ito ay upang ipakita sa iyo kung gaano kahalaga ang CSS sa isang programa / extension. Ngayon ay magiging isang magandang panahon upang magpahinga at malaman ang ilang HTML5 coding at gamitin ang developer.chrome.com para sa ilang sanggunian. Maaari itong tumagal ng ilang oras, ngunit ang isang mahusay na extension ay maaaring gawin.

Hakbang 6: I-publish ito sa Chrome Web Store

Kung ang isang tao ay gumawa ng isang talagang mahusay na extension at nais nilang ibahagi ito sa mundo, maaari nila itong mai-publish. Iyon ay, pagkatapos ng lahat, ang punto ng isang extension. Sinubukan lamang ng tutorial na ito na ipaliwanag ang manifest file, at kung paano mo ito magagamit, at mayroon lamang itong programang 'Hello World'.

Ang unang bagay na dapat gawin upang gawing pampubliko ang isang extension ay gawing isang zip file ang extension folder. Ang pangalawang bagay na gagawin ay pumunta sa https://chrome.google.com/webstore/category/extensions at mag-log in sa isang google account. Pagkatapos, mag-click sa pindutan ng gear setting at pagkatapos ay mag-click sa 'dashboard ng developer'. Pindutin ang pindutang 'Bagong Item' upang mai-upload ang zip file. Kapag nandiyan na, kinakailangang i-edit ang Listahan ng Store, Privacy, at Pagpepresyo. Madaling mai-publish ang isang extension kung isinumite ito para sa pagsusuri.

Ngayong natapos na ang extension, magpatuloy sa pag-code!