1

I'd like to show/hide text...I understand the minimum basics of Manifest 2 and have successfully implemented a javascript dropdown menu that uses an eventlistener...

This simple code works when I open popup.html in Google as a website. It doesn't work in the actual extension (clicking the logo).

I think I need a listener or similar for security reasons...but don't know how to make it work.

The goal is to be able to show/hide blocks of text visible in the popup.html page that appears when you click the extension's logo/button in Chrome. Any help deeply appreciated...

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";
    }
    }

Update after question:

Thanks so much for responding...

It's a very straightforward Extension...yes, three files: manifest.json, popup.html and popup.js.

The popup shows when you click the icon - everything works great except the little bit of javascript to make show/hide work.

I don't get an error - it just doesn't work (maybe there's a way to see errors?). I think the security model is stopping the js from running.

The same thing happened with the simple drop-down menu, but I got around it by adding listeners to the js file. The example below WORKS for the jump menus...so I'm puzzling over how to allow the simple js in the show/hide code to work.

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);
4

2 回答 2

0

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

根据有关 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);
于 2013-11-07T09:36:54.977 回答
0

好吧，不知道您是否找到了答案，但我走了……我自己也遇到了同样类型的问题。你可以去这里 > 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>
于 2013-11-07T09:22:43.543 回答