Question

我想显示/隐藏文字...我理解Manifest 2的最低基础知识并成功实现了一个使用eventlistener的javascript下拉菜单......

当我在Google中打开popup.html作为网站时，这个简单的代码就可以运行了。它在实际扩展中不起作用（单击徽标）。

我认为出于安全原因，我需要一个听众或类似的人......但不知道如何让它发挥作用。

目标是能够显示/隐藏当您在Chrome中点击扩展程序的徽标/按钮时显示的popup.html页面中显示的文本块。任何帮助深深感激......

HTML：

<a id="displayText" href="javascript:toggle();">show</a> <== click Here
<div id="toggleText" style="display: none"><h1>Hello world</h1></div>

JS：

 function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
    ele.style.display = "none";
    text.innerHTML = "show";
    }
    else {
    ele.style.display = "block";
    text.innerHTML = "hide";
    }
    }

问题后更新：

非常感谢您的回复...

这是一个非常简单的扩展...是的，三个文件：manifest.json，popup.html和popup.js。

当你点击图标时弹出窗口显示 - 一切都很好，除了一点点javascript以显示/隐藏工作。

我没有收到错误 - 它只是不起作用（也许有办法看错误？）。我认为安全模型正在阻止js运行。

简单的下拉菜单也发生了同样的事情，但我通过添加js文件的监听器来解决这个问题。下面的示例为跳转菜单的WORKS ...所以我很困惑如何让show / hide代码中的简单js工作。

Function init() {

jump = document.getElementById('jumpchoice');   
jumpowl = document.getElementById('jumpchoiceowl'); 
jumpmla = document.getElementById('jumpchoicemla'); 
jumpapa = document.getElementById('jumpchoiceapa'); 


jump.addEventListener('change',jumpto,false);
jumpowl.addEventListener('change',jumptoowl,false);
jumpmla.addEventListener('change',jumptomla,false);
jumpapa.addEventListener('change',jumptoapa,false);

}    
document.addEventListener('DOMContentLoaded', init);

Answer 1

嗯，不知道你是否找到了答案，但我在这里...... 我自己也遇到了同样的问题。你可以去这里＆gt; jQueryUI＆lt;这对我帮助很大。

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>tabs demo</title>
// ***Start of jQueryUI***
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
// ***End of jQueryUI***
</head>
<body>

<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$( "#tabs" ).tabs(); </code></pre>
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>

<script>    // ****This script will have to go in 'popup.js'****
$( "#tabs" ).tabs();
</script>

</body>
</html>

Answer 2

这是一个老问题，但任何人都登陆此页面时遇到类似问题：

根据 changes regarding Manifest V2 上的文档：

[...]内联事件处理程序[...]将不会执行。

这些在清单V2扩展中不起作用。删除内联事件处理程序，将它们放在外部JS文件中，并使用addEventListener（）为它们注册事件处理程序

所以，在你的情况下，而不是：

<a id="displayText" href="javascript:toggle();">show</a>

你应该这样做：

/* In 'popup.html' */
<a id="displayText">show</a>

/* In 'popup.js' (after the DOM has beed loaded) */
document.getElementById("displayText").addEventListener("click", toggle);

如何在Google Chrome扩展程序的popup.html中实现显示/隐藏功能？

2 个答案: