DEV Community

loading...
Cover image for Copy & Search Chrome Extension

Copy & Search Chrome Extension

anobjectisa profile image an-object-is-a Updated on ・3 min read

Copy & Search Chrome Extension


This tutorial assumes you know how a Chrome Extension works.

Experienced Web Developer? Check out our fast and free Youtube tutorial.


Copy & Search Chrome Extension

The Rundown

We'll have a simple HTML page that allows our user to pick a search engine; this page will be the popup in our Chrome Extension.

In the foreground script we'll listen for when the user copies a piece of text. When they do, we'll get our background script to open a new with the appropriate URL and search parameter.

Let's start.


Our manifest.json

Nothing special here.

{
    "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>"
    ]
}
Enter fullscreen mode Exit fullscreen mode

The only permissions we'll need are the tabs so we can inject our foreground script into specific tabs and <all_urls> so we can inject our foreground script into specific webpages.


The popup.html

A simple web page.

Nothing complicated here.

We have a select with options, a button for submission, and a div to display their search engine of choice.

<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>
Enter fullscreen mode Exit fullscreen mode

Here is what we have:

popup


Our foreground script

Not a lot of code here.

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

We create a listener for the copy event. When triggered, we get the copied material from the clipboard using the readText() method.

We then send the copied text to our background script using the chrome.runtime.sendMessage() method.


Our background script

This is where the bulk of our extension gets written.

Here we have an object that holds all of our search engine strings.

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='
}
Enter fullscreen mode Exit fullscreen mode

When our Chrome Extension detects that a user has opened a new tab, we make sure to inject our foreground script into that page.

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.');
        });
    }
});
Enter fullscreen mode Exit fullscreen mode

In the background listener we listen for the message, "search", from our foreground.

When we receive it, we open up a new tab for our user.

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}`
        });
    }
});

Enter fullscreen mode Exit fullscreen mode

Notice how the url property has a value constructed of the search engine of choice plus the search term, the request.payload, amended to the string.


That's the basics of how this extension works.

You can get the source files here and/or you can watch a video tutorial down below.


If you want a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

Copy & Search Chrome Extension

Discussion (0)

pic
Editor guide