I want to search for a word and show the results in the same document the word is selected from as a form of a box just like in Wikipedia.
// saves options
function save_options() {
var openDblclick = document.getElementById("openDblclick");
var openIcon = document.getElementById("openIcon");
localStorage["openDblclick"] = openDblclick.checked;
localStorage["openIcon"] = openIcon.checked;
console.log(localStorage["openDblclick"]);
console.log(localStorage["openIcon"]);
// Update status to let user know options were saved.
var status = document.getElementById("status");
status.innerHTML = "Options saved.";
setTimeout(function() {
status.innerHTML = "";
}, 750);
}
// restores options
function restore_options() {
var openDblclickValue = localStorage["openDblclick"];
var openIconValue = localStorage["openIcon"];
console.log(localStorage["openDblclick"]);
console.log(localStorage["openIcon"]);
var openDblclick = document.getElementById("openDblclick");
var openIcon = document.getElementById("openIcon");
openDblclick.checked = (openDblclickValue == "true" || openDblclickValue == undefined) ? true : false;
openIcon.checked = (openIconValue == "true" || openIconValue == undefined) ? true : false;
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('saveBtn').addEventListener('click', save_options);<html><head><title>Search Options</title><link type="text/css" href="/css/options.css" rel="stylesheet" /></head><body><div class="optionDiv"><table><tr><td colspan="2" align="center"><img src="/img/logo.jpg" /></td></tr><tr><td>
Open word definition on double click:</td><td><input type="checkbox" id="openDblclick" /></td></tr><tr><td>
Open selected word definition on icon click:</td><td><input type="checkbox" id="openIcon" /></td></tr><tr><td><div id="status"></div></td><td><button id="saveBtn">Save</button></td></tr></table></div></body><script src="/js/options.js"></script></html>// open url in new or existing tab
function openUrl(url, openInNewTab) {
if (openInNewTab) {
chrome.tabs.create({"url": url,"selected": true
});
} else {
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.update(tab.id, {
url: url,
selected: true
}, null);
window.close();
});
}
window.close();
}
// checks if string is blank
function isBlank(string) {
return string == null || string.replace(/(^\s+)|(\s+$)/g, "").length == 0;
}
// handles logo click and focuses search text field
function logoClick(inputTextId) {
document.getElementById(inputTextId).focus();
}
// handles Enter key press
function keyHandler(event, inputTextId, searchUrl, openInNewTab, placeholderText) {
if (event.keyCode == 13) {
doSearch(inputTextId, searchUrl, openInNewTab, placeholderText);
}
}
// handles focus event of search text field
function focusGained(e, textColor, placeholderText) {
if (e.target.value == placeholderText) {
e.target.value = "";
}
e.target.style.color = textColor;
}
// handles unfocus event of search text field
function focusLost(e, textColor, placeholderText) {
if (e.target.value == "") {
e.target.value = placeholderText;
e.target.style.color = textColor;
}
}
// performs search by opening word definition in a new tab
function doSearch(inputTextId, searchUrl, openInNewTab, placeholderText) {
var searchTerm = document.getElementById(inputTextId).value;
if (isBlank(searchTerm) || searchTerm == placeholderText) {
return;
}
searchUrl += searchTerm;
openUrl(searchUrl, openInNewTab);
}
// initialization function to bind events of popup window to event handlers
document.addEventListener('DOMContentLoaded', function() {
var sbe = document.getElementById('SearchBoxControl_InputText_id_1');
sbe.focus();
sbe.addEventListener('keypress', function() {
keyHandler(event, 'SearchBoxControl_InputText_id_1', 'http://liu.edu.lb/', true, '');
});
sbe.addEventListener('focus', function() {
focusGained(event, 'rgba(0,0,0,1.0)', '');
});
sbe.addEventListener('blur', function() {
focusLost(event, 'rgba(128,128,128,1.0)', '');
});
var logo = document.getElementById('SearchBoxControl_Logo_id_1');
if (logo) {
logo.addEventListener("click", function() {
logoClick('SearchBoxControl_InputText_id_1');
});
}
var button = document.getElementById('SearchBoxControl_Search_Ovl_id_1');
if (button) {
button.addEventListener("click", function() {
doSearch('SearchBoxControl_InputText_id_1', 'http://liu.edu.lb/', true, '');
});
}
});
//send message indicating that popup browser action is clicked
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendMessage(tab.id, {
action: "checkSelection"
}, function(response) {});
});<html><head><link type="text/css" href="/css/popup.css" rel="stylesheet" /><script type="text/javascript" src="/js/popup.js"></script></head><body><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-left:0px;"><div id="SearchBoxControl_Wrapper_id_1"><input id="SearchBoxControl_InputText_id_1" type="text" value=""></input><div id="SearchBoxControl_Logo_id_1"></div><div id="SearchBoxControl_Search_id_1"></div><div id="SearchBoxControl_Search_Ovl_id_1" title="Search LIU-Wiki"></div></div></td></tr></table></body></html>``
`
`
Manifest.json `
`
`` {
"background": {"page": "background.html"
},"browser_action": {"default_icon": "/img/icon19.png","default_popup": "popup.html","default_title": "Double-click any word to instantly get its definition from LIU-Wiki Or click the icon to search the dictionary directly from your toolbar."
},"content_scripts": [{"all_frames": true,"js": ["/js/jquery.min.js", "/js/content_script.js"],"matches": ["http://*/*", "https://*/*", "ftp://*/*"]
}],"description": "Double-click a word on any website and instantly get its definition at LIU-Wiki","homepage_url": "http://URL","icons": {"128": "/img/icon128.gif","16": "/img/icon16.png","48": "/img/icon48.png"
},"manifest_version": 2,"name": "LIU-Wiki","options_page": "options.html","permissions": ["tabs", "contextMenus"],"version": "1.0"
}
``
`
`
background.js `
`
``
// listener that opens new tab for a word definition
chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.action == "openWord") {
if ((request.source == "dblclick"&& (localStorage["openDblclick"] == "true" || localStorage["openDblclick"] == undefined)) ||
(request.source == "popup"&& (localStorage["openIcon"] == "true" || localStorage["openIcon"] == undefined))) {
sendResponse(openWord({"selectionText": request.word
}));
}
}
}
);// binds document body dblclick event
$(document).ready(function() {
$(document).dblclick(function(e) {
var target = (e && e.target) || (event && event.srcElement);
var tag = target.tagName.toLowerCase();
if (!(tag == 'input' || tag == 'textarea' || tag == 'img')) {
openIfSelected("dblclick");
}
});
});
// returns body selection
function getWord() {
return String(window.getSelection());
}
// checks if selection is empty
function isBlank(string) {
return string == null || string.replace(/(^\s+)|(\s+$)/g, "").length == 0;
}
// sends message to background script to open new tab for word definition
function openIfSelected(source) {
var word = getWord();
if (!isBlank(word))
chrome.extension.sendMessage({
action: "openWord",
word: word,
source: source
}, function(response) {});
}
// handles notification from popup to see whether there is a selection
// if there is smth selected then calls openIfSelected
// otherwise opens popup
chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.action == "checkSelection") {
sendResponse(openIfSelected("popup"));
}
}
);