Copy & Search Chrome Extension
Tags: javascript, webdev, codenewbie
Published: 2021-03-05 15:32:54

### <center>Copy & Search Chrome Extension</center>

------------

### <center>This tutorial assumes you know how a Chrome Extension works.</center>
#### <center>Experienced Web Developer? Check out our fast and free Youtube tutorial.</center>
{% youtube -dhMbVEreII %}

------------

![Copy & Search Chrome Extension](https://user-images.githubusercontent.com/58220766/109964208-5d3dec80-7cbb-11eb-9618-4fa514cece87.png)

### 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>"
	]
}
```

<br />

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>
```

<br />

Here is what we have:

![popup](https://user-images.githubusercontent.com/58220766/109962190-e43d9580-7cb8-11eb-8620-1d9924b53050.png)

------------

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

<br />

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='
}
```

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

<br />

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

```

<br />

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](https://github.com/an-object-is-a/chrome-ext-copy-paste "here") and/or you can watch a video tutorial down below.

------------

#### <center>If you want a more in-depth guide, check out my full video tutorial on YouTube, **[An Object Is A](https://www.youtube.com/c/anobjectisa "An Object Is A")**.</center>

### <center>Copy & Search Chrome Extension</center>

{% youtube upFe5i3iSzA %}