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

【问题标题】：How can I implement a show/hide functionality in the popup.html of a Google Chrome Extension?如何在 Google Chrome 扩展程序的 popup.html 中实现显示/隐藏功能？
【发布时间】：2013-09-10 20:39:06
【问题描述】：

我想显示/隐藏文本...我了解 Manifest 2 的基本知识并成功实现了一个使用事件监听器的 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 文件中添加侦听器来解决它。下面的示例适用于跳转菜单......所以我很困惑如何让显示/隐藏代码中的简单 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);

【问题讨论】：

那么，你的扩展中有三个文件？(1)manifest.json(2)popup.html(3)popup.js(不是background.js)对吗？此外，当您单击页面操作或浏览器操作的图标时，是否会出现弹出窗口？你遇到了什么错误？你的 manifest.json 是什么样的？
非常感谢您的回复...这是一个非常简单的扩展...是的，三个文件：manifest.json、popup.html 和 popup.js。当您单击图标时，弹出窗口会显示 - 一切都很好，除了一点点 javascript 来使显示/隐藏工作。
我在原帖中添加了一些细节...谢谢您的观看。
>也许有办法查看错误？是的，有一种方法可以查看 popup.html 中的错误。查看此页面以了解如何调试 Chrome 扩展程序。 developer.chrome.com/extensions/tut_debugging.html
谢谢...单击我的 js 链接（“显示”）会引发与安全相关的错误。这里是：拒绝执行 JavaScript URL，因为它违反了以下内容安全策略指令：“script-src 'self' chrome-extension-resource:”。我没有看到说明如何为此类事件添加侦听器...只是有关添加事件侦听器的基本说明...感谢您的帮助...

标签： google-chrome-extension

【解决方案1】：

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

根据 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);

【讨论】：

【解决方案2】：

嗯，不知道你是否找到了答案，但我走了…… 我自己也遇到过同样类型的问题。你可以去这里>jQueryUI

    <!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>

【讨论】：

请注意 link-only answers 是不鼓励的，所以答案应该是寻找解决方案的终点（而不是另一个参考中途停留，随着时间的推移往往会变得陈旧）。请考虑在此处添加独立的概要，并保留链接作为参考。
另外，请注意，JQuery 根本不是解决问题所必需的。看看我解释问题（和解决方案）的答案:)