我想将用户选择的文本保存在Chrome扩展程序的变量中。为此,我使用document.getSelection()
方法。
我有全局变量“theText”。当我选择一些文本时,在第一个和第二个日志中,我有我选择的文本。没关系。但是在第三个日志中,我丢失了变量的值。为什么?我在JavaScript中阅读了很多关于范围的内容,但我认为我的变量是全局的,所以我不明白为什么我失去了我的价值。
“definitionPopup”是HTML中我的工具栏的ID。
你能帮帮我吗?我在这里诺比谢谢!
这是我的js文件:
var theText;
window.addEventListener('mouseup', function(){
var text = getSelectionText()
console.log(text.length);
if (text.length > 0){ // check there's some text selected
theText = text;
console.log("Second log theText " + theText);
}
}, false);
function getSelectionText(){
var selectedText = "";
if (document.getSelection()){
selectedText = document.getSelection().toString();
if(selectedText.length > 0){
theText = selectedText;
console.log("First test theText " + theText);
}
}
return selectedText;
}
$(document).ready(function(){
//Call deninion service
$("#definitionPopup").click(function(e){
console.log('Third test theText '+ theText);
...
});
我的toolbar.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/services/option-selected.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="toolbar">
<ul class="nav navbar-nav">
<li id="searchTextPopup"><input type="text" name="search" placeholder="Buscar..."></li>
<li id="definitionPopup"><a href="#">Definiciones</a></li>
<li id="synonymPopup"><a href="#">Palabras parecidas</a></li>
<li id="antonymPopup"><a href="#">Palabras distintas</a></li>
<li id="imgPopup"><a href="#">Pictogramas</a></li>
<li id="youtubePopup" ><a href="#" >Youtube</a></li>
</ul>
</div>
</body>
</html>
add-toolbar.js我创建了我的iframe
var height = '60px';
//var iframe = document.createElement('iframe'); //the "error" is here.
//I create div instead of iframe
var iframe = document.body.createElement('div');
iframe.setAttribute("id", "customToolbarMenu");
//iframe.src = chrome.extension.getURL('../toolbar.html'); //change this
//for this
$("#customToolbarMenu").load(chrome.extension.getURL('../toolbar.html'));
document.documentElement.appendChild(iframe);
var bodyStyle = document.body.style;
var cssTransform = 'transform' in bodyStyle ? 'transform' : 'webkitTransform';
bodyStyle[cssTransform] = 'translateY(' + height + ')';