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_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",
        "matches": ["<all_urls>"],
"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"]


(function () {
'use strict';

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

//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) {


//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()});


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


body {
min-width: 295px;

font-family: fantasy;
font-size: 1.5em;

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")?

  • \$\begingroup\$ @janos thanks for your comment. I am still a bit new to JS, so I forgot to use jQuery for that. When you say Vanilla, do you mean just normal JS? \$\endgroup\$ – Tristan Sun Mar 31 '17 at 19:58
  • \$\begingroup\$ yes vanilla JS = normal javascript \$\endgroup\$ – Dhyey Apr 1 '17 at 2:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.