Rozšíření Kopírovat a hledat pro Chrome

Tento výukový program předpokládá, že víte, jak rozšíření Chrome funguje.

Zkušený webový vývojář? Podívejte se na náš rychlý a bezplatný výukový program na YouTube.

Přehled

Budeme mít jednoduchou HTML stránku, která umožní našemu uživateli vybrat si vyhledávač; tato stránka bude vyskakovacím oknem v našem rozšíření pro Chrome.

V popředí skript, kterému budeme naslouchat, když uživatel zkopíruje část textu. Až to udělají, získáme naše zázemí skript pro otevření nového s příslušnou URL a vyhledávacím parametrem.

Začněme.

Náš manifest.json

Není zde nic zvláštního.

{
    "name": "Clipboard Search",
    "manifest_version": 2,
    "description": "Testing clipboard functionality.",
    "version": "0.0.0",
    "background": {
        "scripts":["background.js"]
    },
    "browser_action": {
        "default_popup": "popup.html"
    },
    "permissions": [
        "tabs",
        "<all_urls>"
    ]
}

Jediná oprávnění, která budeme potřebovat, jsou karty takže můžeme vložit náš skript v popředí na konkrétní karty a takže můžeme vložit náš skript v popředí na konkrétní webové stránky.

Popup.html

Jednoduchá webová stránka.

Není zde nic složitého.

Máme vybranou s možnostmi , tlačítko pro odeslání a div k zobrazení jejich vyhledávače.

<div class="container">
    <div class="section1">
        <select name="search_engine" id="search_engine">
            <option value="" disabled selected>Choose a search engine</option>
            <option value="google">Google</option>
            <option value="startpage">Start Page</option>
            <option value="duckduckgo">Duck Duck Go</option>
            <option value="ecoasia">Ecoasia</option>
            <option value="bing">Bing</option>
        </select>
        <button>Select</button>
    </div>
    <div class="section2">
        <div class="search_engine_choice">Your Current Search Engine</div>
    </div>
</div>

Zde je to, co máme:

Náš skript v popředí

Není zde mnoho kódu.

document.addEventListener('copy', () => {
    navigator.clipboard.readText()
        .then(res => {
            chrome.runtime.sendMessage({
                message: 'search',
                payload: `"${res}"`
            });
        })
        .catch(err => console.log(err));
});

Vytvoříme posluchač pro kopii událost. Po spuštění získáme zkopírovaný materiál ze schránky pomocí readText() metoda.

Zkopírovaný text pak odešleme do našeho skriptu na pozadí pomocí chrome.runtime.sendMessage() metoda.

Náš skript na pozadí

Toto je místo, kde se píše většina našeho rozšíření.

Zde máme objekt, který obsahuje všechny řetězce našeho vyhledávače.

const search_engines = {
    google: 'https://www.google.com/search?q=',
    startpage: 'https://www.startpage.com/do/dsearch?query=',
    duckduckgo: 'https://duckduckgo.com/?q=',
    ecoasia: 'https://www.ecosia.org/search?q=',
    bing: 'https://www.bing.com/search?q='
}

Když naše rozšíření pro Chrome zjistí, že uživatel otevřel novou kartu, vložíme náš skript v popředí do té stránky.

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (/^http/.test(tab.url) && changeInfo.status === 'complete') {
        chrome.tabs.executeScript(tabId, { file: './scripts/foreground.js' }, () => {
            console.log('The foreground script has been injected.');
        });
    }
});

Na pozadí posluchače posloucháme zprávu „hledejte “, z našeho popředí .

Když jej obdržíme, otevřeme pro našeho uživatele novou kartu.

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.message === 'save_search_engine') {
        current_search_engine = request.payload;
        sendResponse({ message: 'success' });
    } else if (request.message === 'get_current_search_engine') {
        sendResponse({ payload: current_search_engine });
    } else if (request.message === 'search') {
        chrome.tabs.create({
            active: true,
            url: `${search_engines[current_search_engine]}${request.payload}`
        });
    }
});

Všimněte si, jak url vlastnost má hodnotu vytvořenou z vyhledávače dle výběru plus hledaný výraz, request.payload , upraveno na řetězec.

To jsou základy fungování tohoto rozšíření.

Zdrojové soubory můžete získat zde a/nebo si níže můžete prohlédnout video tutoriál.

Rozšíření Kopírovat a hledat pro Chrome