Selainlaajennusten kehittäminen (Chrome ja Edge) · Oppitunti

Kontekstivalikkokohteiden lisääminen

Luokaa mukautettuja kontekstivalikkokohteita, jotka näkyvät käyttäjän napsauttaessa verkkosivuja, kuvia tai linkkejä hiiren kakkospainikkeella ja käynnistävät laajennuksen toimintoja.

Oppitunti 1/411 vaihetta

Kontekstivalikkokohteiden lisääminen on ilmainen Selainlaajennusten kehittäminen (Chrome ja Edge)-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Selainlaajennusten kehittäminen (Chrome ja Edge)-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Selainlaajennusten kehittäminen (Chrome ja Edge)-kurssilla on yhteensä 4 oppituntia.

Mitä pikavalikot ovat?

Näiden kohteiden avulla käyttäjät voivat suorittaa nopeasti napsauttamaansa sisältöön liittyviä toimintoja, kuten tallentaa kuvan, kääntää valitun tekstin tai käynnistää mukautetun haun.

Pikavalikkojen ottaminen käyttöön

Ennen kuin laajennuksenne voi luoda pikavalikon kohteita, "contextMenus"-käyttöoikeus on ilmoitettava manifest.json-tiedostossa.

Tämä käyttöoikeus kertoo selaimelle, että laajennuksenne aikoo käyttää pikavalikkorajapintaa.

{ "manifest_version": 3,
  "name": "My Menu Extension",
  "version": "1.0",
  "permissions": [
    "contextMenus"
  ],
  "background": {
    "service_worker": "background.js"
  }
}

`chrome.contextMenus`-rajapinta

chrome.contextMenus-rajapinnan avulla laajennuksenne taustapalvelutyöntekijä käsittelee pikavalikkoja.

Se tarjoaa menetelmiä valikkokohteiden hallintaan:

create(): uuden valikkokohteen lisääminen.
update(): olemassa olevan kohteen ominaisuuksien muuttaminen.
remove(): tietyn kohteen poistaminen.
removeAll(): kaikkien laajennuksenne lisäämien kohteiden poistaminen.

Ensimmäisen kohteen luominen

Luo pikavalikkokohde käyttämällä chrome.contextMenus.create()-metodia. Teidän on annettava yksilöllinen id ja title.

Tässä esimerkissä yleiseen sivun pikavalikkoon lisätään yksinkertainen kohde nimeltä "Ensimmäinen kohteeni".

// background.js
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "myFirstItem",
    title: "My First Item",
    contexts: ["page"]
  });
});

Kohteen ominaisuudet: ID ja otsikko

Jokainen pikavalikkokohde tarvitsee yksilöllisen id-tunnisteen. Sen avulla tunnistetaan myöhemmin, mitä kohdetta napsautettiin.

title on valikossa näkyvä teksti. contexts-taulukko määrittää, missä kohteen pitäisi näkyä.

id: Yksilöllinen merkkijonotunniste.
title: Käyttäjälle näkyvä valikkokohteen teksti.
contexts: Merkkijonotaulukko, joka määrittää, missä kohde näkyy.

Napsautuksiin vastaaminen

Kun kohde on luotu, haluatte todennäköisesti suorittaa koodia, kun käyttäjä napsauttaa sitä. Kuunnelkaa näitä napsautuksia käyttämällä chrome.contextMenus.onClicked.addListener()-metodia.

Kuuntelija vastaanottaa info-objektin, joka sisältää napsautuksen tiedot, kuten menuItemId-tunnisteen, jonka avulla aktivoitu kohde voidaan tunnistaa.

// background.js
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "logClickItem",
    title: "Log This Click",
    contexts: ["page"]
  });
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "logClickItem") {
    console.log("Item 'Log This Click' was clicked!");
    // You can perform other actions here
  }
});

Elementtikohtaiset kontekstit

contexts-ominaisuus on tehokas! Sen avulla voitte hallita tarkasti, missä valikkokohta näkyy.

Yleisiä kontekstityyppejä ovat:

"page": Napsautus hiiren oikealla painikkeella missä tahansa sivun kohdassa.
"selection": Napsautus hiiren oikealla painikkeella valitun tekstin kohdalla.
"link": Napsautus hiiren oikealla painikkeella hyperlinkin kohdalla.
"image": Napsautus hiiren oikealla painikkeella kuvan kohdalla.
"video", "audio": Mediaelementtejä varten.

Esimerkki: valitun tekstin haku

Luodaan valikkokohta, joka näkyy vain, kun tekstiä on valittu. Kun sitä napsautetaan, se avaa uuden välilehden ja hakee tekstin Googlella.

Huomioikaa selectionText-ominaisuus info-objektissa, kun käytätte "selection"-kontekstia.

// background.js
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "searchSelected",
    title: "Search '%s' on Google", // %s is placeholder for selected text
    contexts: ["selection"]
  });
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "searchSelected" && info.selectionText) {
    const query = encodeURIComponent(info.selectionText);
    const url = `https://www.google.com/search?q=${query}`;
    chrome.tabs.create({ url: url });
  }
});

Valikkokohtien päivittäminen ja poistaminen

Voitte muuttaa kontekstivalikon kohtia dynaamisesti tai poistaa niitä sen jälkeen, kun ne on luotu. Tämä on hyödyllistä, kun valikkoa mukautetaan käyttäjän asetusten tai sivun sisällön mukaan.

chrome.contextMenus.update(id, properties): Muuttaa esimerkiksi otsikon tai kontekstien kaltaisia ominaisuuksia.
chrome.contextMenus.remove(id): Poistaa tietyn valikkokohdan.
chrome.contextMenus.removeAll(): Poistaa kaikki laajennuksen lisäämät valikkokohdat.

Kontekstivalikkohaaste

Tarkastelkaa seuraavaa manifest.json-tiedostoa ja laajennuksen taustaskriptiä.

Mitkä seuraavista väitteistä luoduista kontekstivalikon kohdista ovat totta?

// manifest.json
{
  "manifest_version": 3,
  "name": "Test Menu",
  "version": "1.0",
  "permissions": ["contextMenus"],
  "background": {"service_worker": "background.js"}
}

// background.js
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "itemA",
    title: "Action A",
    contexts: ["page"]
  });
  chrome.contextMenus.create({
    id: "itemB",
    title: "Action B",
    contexts: ["selection"]
  });
  chrome.contextMenus.create({
    id: "itemC",
    title: "Action C",
    contexts: ["link"]
  });
});

Vastaa interaktiivisessa oppitunnissa

Kertaus: kontekstivalikot

Olette oppineet lisäämään selaimen laajennukseen mukautettuja kontekstivalikon kohtia!

Määritä "contextMenus"-käyttöoikeus tiedostossa manifest.json.
Käytä taustaskriptissäsi metodia chrome.contextMenus.create().
Määritä kullekin kohdalle id, title ja contexts.
Kuuntele napsautuksia käyttämällä metodia chrome.contextMenus.onClicked.addListener().
Kontekstien, kuten "page", "selection" ja "link", avulla voit kohdistaa toiminnon tarkasti.

Näiden taitojen avulla voitte lisätä laajennukseenne tehokkaita kontekstitietoisia toimintoja. Seuraavaksi tutustumme Omnibox-integraatioon!

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 12
Oppitunnit: 48

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Kontekstivalikkokohteiden lisääminen” ilmainen?

Kyllä – oppitunnin ”Kontekstivalikkokohteiden lisääminen” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Selainlaajennusten kehittäminen (Chrome ja Edge)-kurssin, päivitä CoddyKit PROhon. Selainlaajennusten kehittäminen (Chrome ja Edge)-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Kontekstivalikkokohteiden lisääminen”?

Luokaa mukautettuja kontekstivalikkokohteita, jotka näkyvät käyttäjän napsauttaessa verkkosivuja, kuvia tai linkkejä hiiren kakkospainikkeella ja käynnistävät laajennuksen toimintoja. Harjoittelet Selainlaajennusten kehittäminen (Chrome ja Edge)-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Selainlaajennusten kehittäminen (Chrome ja Edge)-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Selainlaajennusten kehittäminen (Chrome ja Edge)-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Kontekstivalikkokohteiden lisääminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Selainlaajennusten kehittäminen (Chrome ja Edge)-oppitunnilla?

Kyllä. Jokainen Selainlaajennusten kehittäminen (Chrome ja Edge)-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Selainlaajennusten kehittäminen (Chrome ja Edge)