logo

Vytvořte jednoduché webové rozšíření

Podobně jako podpora multimédií v prohlížeči jsme zpočátku dělali doplňky prohlížeče úplně špatně. Po celá léta měl každý prohlížeč svůj vlastní jazyk a způsob instalace doplňků, což vedlo k zneužití zabezpečení, problémům s výkonem, bolestivé údržbě pro vývojáře a frustrujícím uživatelským zkušenostem. Dnes máme Web Extension API, které je podporováno většinou hlavních prohlížečů, což je kritický krok ke zmírnění mnoha problémů, se kterými se dnes vývojáři a uživatelé setkávají. Na nedávném all hands eventu Mozilly na Havaji jsem se rozhodl vytvořit své první webové rozšíření; Chtěl jsem, aby rozšíření bylo užitečné, ale jednoduché, něco se skutečným případem použití. Nakonec jsem vytvořil velmi jednoduché webové rozšíření, které nepřetržitě monitoruje document.title nahradit sprostá slova hvězdičkami, což je bezpečnostní opatření, abyste se vyhnuli rozpakům, když sdílíte vaši obrazovku nebo když vám lidé koukají přes rameno. Dovolte mi, abych vás provedl, jak jednoduché je vytvoření základního webového rozšíření!

Struktura rozšíření

Rozšíření musí být obsaženo v jednom adresáři -- doporučuji strukturovat jednoduché rozšíření takto:
+ foulmouth-filter // (name of your plugin here)
    + icons
        - 48.png
    - filter.js
    - manifest.json
Všechny názvy souborů a podadresáře lze pojmenovat, jak chcete, s výjimkou manifest.json; to je standardní název souboru, který musí být v kořenovém adresáři přípony. Čím složitější je rozšíření, tím více souborů a struktury bude pravděpodobně potřeba.

manifest.json

manifest.json soubor obsahuje všechny vlastnosti rozšíření včetně obrázků, názvu, popisu, požadovaných oprávnění, které skripty se mají spouštět na kterých názvech hostitele a další. Toto je velmi jednoduchý manifest, který jsem použil pro své rozšíření:
{
  "manifest_version": 2,
  "name": "Foulmouth Filter",
  "version": "0.1",
  "icons": {
    "48": "icons/48.png"
  },
  "description": "Filters out filthy words from document titles",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["filter.js"]
    }
  ]
}
content_scripts klíč je důležitý, seznam souborů JavaScriptu, které mají obsahovat názvy hostitelů. V zájmu tohoto jednoduchého webového rozšíření chci, aby bylo načteno pro každý název hostitele a jádro rozšíření bude žít v filter.js .

filter.js

filter.js obsahuje veškerou logiku webového rozšíření. Následující kód prohledává document.title za neslušná slova a nahradí je hvězdičkami:
// Google's bad word filter:
// https://gist.githubusercontent.com/jamiew/1112488/raw/7ca9b1669e1c24b27c66174762cb04e14cf05aa7/google_twunter_lol
let badWords = "w3schools|david|walsh|jquery.....".split('|') // loool

// Runs cleanup on the document title
let cleanup = word => {
    document.title = document.title.split(' ').map(word => {
        return badWords.indexOf(word.toLowerCase()) != -1 ? '*'.repeat(word.length) : word
    }).join(' ')
}

// Set up a mutation observer to listen for title changes
// Will fire if framework AJAX stuff switches page title
let createObserver = function() {
    let observer = new MutationObserver((mutations) => {
        // Disconnect the MO so there isn't an infinite title update loop
        // Run title cleanup again
        // Create a new MO to listen for more changes
        console.log('Mutations!', mutations)
        observer.disconnect()
        observer = null
        cleanup()
        createObserver()
    })

    observer.observe(
        document.querySelector('title'),
        { subtree: true, characterData: true, childList: true }
    )
}
createObserver()

// Kick off initial page load check
cleanup()
Poznámka:Všimněte si, že jsem se pokusil použít MutationObserver API k efektivnímu naslouchání změnám v document.title ale použití MutationObserver způsobilo, že se prohlížeč zaseknul, takže se musím dále podívat na to, jak tomu zabránit -- setInterval je bohužel cestou nejmenšího odporu. Jsem si jistý, že moje používání MutationObserver je problém, nikoli problém s prohlížečem.

Instalace webového rozšíření pro testování

Instalace a testování webového rozšíření v prohlížeči Chrome:
  1. Otevřete Chrome > Preferences
  2. Klikněte na Extensions karta
  3. Klikněte na Load Unpacked Extension , přejděte do adresáře rozšíření a klikněte na Select
Instalace a testování webového rozšíření ve Firefoxu:
  1. Přejděte na about:debugging
  2. Vyberte Add-ons karta
  3. Klikněte na Load Temporary Add-on , přejděte do adresáře rozšíření a vyberte libovolný soubor v adresáři rozšíření
Rozšíření se načte v každém prohlížeči a na každé nové kartě bude document.title budou zkontrolovány na špatná slova. Každý prohlížeč má jiná pravidla pro to, jak dlouho bude rozbalené rozšíření aktivní, takže si uvědomte, že pokud relaci ukončíte, možná budete muset místní rozšíření znovu povolit. Zde se můžete dozvědět o publikování svého webového rozšíření.

Nápady na zlepšení

Zde je několik doplňků, které by toto rozšíření učinily úžasnějším:
  • Možnost přidávat vlastní slova, nejen neslušná slova od Googlu (pro uživatele, nikoli pro vývojáře, kteří rozšíření vytvářejí)
  • Možnost rychle zapínat a vypínat rozšíření, takže například budete filtrovat slova pouze v pracovní době
  • Zveřejněte jej v adresářích chrome a Firefox Add-on!

Zdroje

Nejlepším zdrojem informací o webových rozšířeních je MDN. Webové rozšíření, které jsme zde vytvořili, je velmi jednoduché a nedotýká se žádných oprávnění ani pokročilých interních rozhraní API, takže si nezapomeňte přečíst tuto stránku, abyste získali úplný přehled, od začátku do konce, pro vytváření úplných a pokročilých webových rozšíření. Tady to máte – webová rozšíření nejsou zdaleka tak složitá nebo zastrašující, jako bývala. Toto rozšíření mi trvalo sestavit zhruba 30 minut, takže pokud máte pár volných minut, vyzkoušejte vytvoření webového rozšíření. Budete se divit, že vytváření doplňků pro různé prohlížeče je tak snadné!