\$\begingroup\$
\$\endgroup\$
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": ["<all_urls>"],
"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
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="popup.css" />
</head>
<body>
<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>
</html>
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;
}
Jamal
35.2k13 gold badges134 silver badges238 bronze badges
1 Answer 1
\$\begingroup\$
\$\endgroup\$
2
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")?
janos
113k15 gold badges154 silver badges396 bronze badges
-
\$\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– Tristan Sun2017年03月31日 19:58:11 +00:00Commented Mar 31, 2017 at 19:58
-
\$\begingroup\$ yes vanilla JS = normal javascript \$\endgroup\$Dhyey– Dhyey2017年04月01日 02:30:53 +00:00Commented Apr 1, 2017 at 2:30
lang-css