Simple Dictionary Chrome Extension I have created a Simple Dictionary Chrome Extension. It is using JavaScript/ some HTML/ some CSS. The Manifest.jso file talks about the extension. The HTML is for a small/simple pop up and the JS is for the popup and user interactions.

MANIFEST.JSON

{
"manifest_version": 2,
"name": "My Simple Dictionary Extension",
"description": "A simple dictionary extension where users can look up a word in the extension and find its definition.",
"author": "Tristan Sun",
"version": "0.1",
"content_scripts":[
    {
        "matches": ["&lt;all_urls&gt;"],
        "js":["jquery-3.1.1.js"]
    }
],
"browser_action": {
    "default_title": "Dictionary Popup",
    "default_popup": "popup/popup.html",
    "default_icon": "dic.png"
},
"background": {
    "scripts": ["jquery-3.1.1.js","background.js"],
    "persistent": false
},
"permissions": ["tabs"]
}


POPUP.JS

(function () {
'use strict';

// add enter key functionality to click 'define' button.
document.getElementById('term').addEventListener("keyup", function (event) {
    event.preventDefault();
    //keycode is 13 when the key released is 'enter' key.
    if (event.keyCode === 13) {
        document.getElementById('define').click();
    }
});

//when define button is clicked, then handleButton in backgroundpage.
document.querySelector('button').addEventListener("click", function () {
    var backgroundpage = chrome.extension.getBackgroundPage();
    var term = document.querySelector('input').value;
    if (backgroundpage !== null) {
        backgroundpage.handleButtonClick(term);
    }

});
}());

//retrieve message from background.js getting the response from the dictionary api and adding it to the popup.
chrome.runtime.onMessage.addListener(function (response) {
'use strict';

var b = document.getElementById('seemore');
//    document.getElementById('label').innerHTML = 
//set text as definition to be shown
var definition = document.getElementById('definition');
definition.innerText = response.results[0].lexicalEntries[0].entries[0].senses[0].definitions[0];

//set see more text
b.innerText = "Click for more info on this word.";
//link see more text
b.href = "";
//when href is clicked, create a new tab with the actual dictionary entry for the word at oxford dictionary.
b.addEventListener("click", function () {
    chrome.tabs.create({url: "http://en.oxforddictionaries.com/definition/" + response.results[0].id.toLowerCase()});
});
});


POPUP.HTML

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;link rel="stylesheet" href="popup.css" /&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;label&gt;Insert a word:&lt;/label&gt;
    &lt;input id="term" type="text"&gt;
    &lt;button id="define"&gt;Define&lt;/button&gt;
    &lt;u id="label"&gt;&lt;/u&gt;
    &lt;p id="definition"&gt;&lt;/p&gt;
    &lt;a id="seemore"&gt;&lt;/a&gt;
    &lt;!-- load js/jquery for popup --&gt;
    &lt;script src="jquery-3.1.1.js"&gt;&lt;/script&gt;
    &lt;script src="popup.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;


POPUP.CSS

body {
min-width: 295px;
}

label{
font-family: fantasy;
font-size: 1.5em;
}

#define{
background-color: crimson;
border: none;
color: white;
padding 10px 20px;
text-align: center;
font-size: 1em;
}
If you are using jQuery than why use vanilla JS DOM manipulation such as document.getElementById and others, why not use jQuery DOM manipulation like jQuery("#term")?