个人中心
gpt4 book ai didi

JavaScript 无法在 Chrome 扩展程序中运行

转载 作者：行者123 更新时间：2023-12-03 09:11:34 25 4
gpt4 key购买 nike

我正在制作一个 Chrome 扩展程序，HTML 弹出窗口包含 JavaScript 脚本。但是，当我单击扩展按钮时，JavaScript 不起作用。我的 HTML 包含 JavaScript 调用，但他无法正常工作。

我的 JS 代码 (func01.js) 和我的 HTML 弹出窗口:

function openMenu(){
    document.getElementById("others_nav").style.visibility = 'visible';
}


function closeMenu(){
    document.getElementById("others_nav").style.visibility = 'hidden';
}

function openMail(){
    document.getElementById("mail").style.visibility = 'visible';
    document.getElementById("vagas").style.visibility = 'hidden';
    document.getElementById("log").style.visibility = 'hidden';
    document.getElementById("themes").style.visibility = 'hidden';
    document.getElementById("search").style.visibility = 'hidden';
    document.getElementById("about").style.visibility = 'hidden';
    document.getElementById("index").style.visibility = 'hidden';
}

function openVagas(){
    document.getElementById("mail").style.visibility = 'hidden';
    document.getElementById("vagas").style.visibility = 'visible';
    document.getElementById("log").style.visibility = 'hidden';
    document.getElementById("themes").style.visibility = 'hidden';
    document.getElementById("search").style.visibility = 'hidden';
    document.getElementById("about").style.visibility = 'hidden';
    document.getElementById("index").style.visibility = 'hidden';
}

function openLog(){
    document.getElementById("mail").style.visibility = 'hidden';
    document.getElementById("vagas").style.visibility = 'hidden';
    document.getElementById("log").style.visibility = 'visible';
    document.getElementById("themes").style.visibility = 'hidden';
    document.getElementById("search").style.visibility = 'hidden';
    document.getElementById("about").style.visibility = 'hidden';
    document.getElementById("index").style.visibility = 'hidden';
}

function openThemes(){
    document.getElementById("mail").style.visibility = 'hidden';
    document.getElementById("vagas").style.visibility = 'hidden';
    document.getElementById("log").style.visibility = 'hidden';
    document.getElementById("themes").style.visibility = 'visible';
    document.getElementById("search").style.visibility = 'hidden';
    document.getElementById("about").style.visibility = 'hidden';
    document.getElementById("index").style.visibility = 'hidden';
}

function openSearch(){
    document.getElementById("mail").style.visibility = 'hidden';
    document.getElementById("vagas").style.visibility = 'hidden';
    document.getElementById("log").style.visibility = 'hidden';
    document.getElementById("themes").style.visibility = 'hidden';
    document.getElementById("search").style.visibility = 'visible';
    document.getElementById("about").style.visibility = 'hidden';
    document.getElementById("index").style.visibility = 'hidden';
}

function openAbout(){
    document.getElementById("mail").style.visibility = 'hidden';
    document.getElementById("vagas").style.visibility = 'hidden';
    document.getElementById("log").style.visibility = 'hidden';
    document.getElementById("themes").style.visibility = 'hidden';
    document.getElementById("search").style.visibility = 'hidden';
    document.getElementById("about").style.visibility = 'visible';
    document.getElementById("index").style.visibility = 'hidden';
}

function menuWarning(){
    document.getElementById("z-index-nav-2").src = ('src/habilite-this-menu.png');
}

function menuWarningOut(){
    document.getElementById("z-index-nav-2").src = ('src/z-index-nav.png');
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="src/hover-min.css"/>
    <link rel="stylesheet" type="text/css" href="src/st01.css"/>
    <script language="javascript" src="src/func01.js"></script>
</head>
<body>
<div id="div_body">
    <nav id="main_nav">
        <ul>
            <a href="http://forum.craftlandia.com.br/ipb/index.php?/forum/295-avisos/" target="_blank"><li class="hvr-overline-reveal">Avisos</li></a>
            <a href="http://forum.craftlandia.com.br/ipb/index.php?/forum/296-entrevistas/" target="_blank"><li class="hvr-overline-reveal">Entrevistas</li></a>
            <a href="http://forum.craftlandia.com.br/ipb/index.php?/forum/297-mat%C3%A9rias/" target="_blank"><li class="hvr-overline-reveal">Matérias</li></a>
            <a href="http://forum.craftlandia.com.br/ipb/index.php?/forum/594-noticias/" target="_blank"><li class="hvr-overline-reveal">Notícias</li></a>
            <a href="http://forum.craftlandia.com.br/ipb/index.php?/forum/298-concursos/" target="_blank"><li class="hvr-overline-reveal">Concursos</li></a>
            <li id="more" class="hvr-overline-reveal" onclick="openMenu()">Mais</li>
        </ul>
    </nav>
    <div class="div_main_content" id="index">
        <h1>Seja bem-vindo à extensão do Jornal!</h1>
        <h2>Navegue pelos menus para selecionar alguma opção.</h2>
    </div>
    <div class="div_main_content" id="mail">

    </div>
    <div class="div_main_content" id="vagas">
        <h1>Vagas para jornalistas</h1>
        <p>Estamos constantemente procurando membros com maturidade, responsabilidade e habilidade com escrita. Se você acha que atende a esses requisitos, acesse já o tópico oficial e faça já seu currículo!</p>
        <form id="view-topic-vagas" method="post" action="http://forum.craftlandia.com.br/ipb/index.php?/topic/543799-abertas-vagas-para-o-jornal/" target="_blank">
            <input class="input_submit" type="submit" value="Ver o tópico completo"/>
        </form>
    </div>
    <div class="div_main_content" id="log">
        <h1>ChangeLog do Jornal</h1>
        <p>Assim como a ChangeLog da Craftlandia, a nossa ChangeLog te deixa informado de tudo que acontece na área. Para não perder nenhuma novidade, não deixe de acessá-la.</p>
        <form id="view-topic-log" method="post" action="http://forum.craftlandia.com.br/ipb/index.php?/topic/471019-changelog-do-jornal/" target="_blank">
        <input class="input_submit" type="submit" value="Ver o tópico completo"/>
        </form>
    </div>
    <div class="div_main_content" id="themes">
        <h1>Sugestões de temas</h1>
        <p>Quer ver um tema sendo trabalhado na área oficial? A maneira mais fácil de fazer isso acontecer é postar uma sugestão no tópico oficial. Caso aceita, sua sugestão será trabalhada e postada o mais breve possível.</p>
        <form id="view-topic-themes" method="post" action="http://forum.craftlandia.com.br/ipb/index.php?/topic/452580-sugest%C3%B5es-para-temas/" target="_blank">
            <input class="input_submit" type="submit" value="Ver o tópico completo"/>
        </form>
    </div>
    <div class="div_main_content" id="search">
        <h1>Formulário de pesquisa</h1>
        <p>Digite abaixo um termo que deseja pesquisar e veja os resultados.</p>
        <form id="search-box" method="post" action="http://forum.craftlandia.com.br/ipb/index.php?app=core&module=search&do=search&fromMainBar=1" target="_blank">
            <input id="main_search" name="search_term" type="text" size="25"/><br/>
            <input class="input_submit" name="submit" type="submit" value="Pesquisar"/>
        </form>
    </div>
    <div class="div_main_content" id="about">
        <h1>Sobre o Jornal da CL</h1>
        <p>O nosso jornal foi criado para transmitir informações sobre os mais diversos assuntos, como tecnologia, jogos, astronomia, entrevistas com os membros e STAFFs da Craftlandia, além de concursos excluvisos da nossa área. Essa extensão foi criada para aproximar você, player, da nossa área, e nos ajudar a crescer cada vez mais.</p>
    </div>
    <nav id="others_nav">
        <ul>
            <li onclick="openMail()"><img src="src/icon-01.png"/></li>
            <li onclick="openVagas()"><img src="src/icon-02.png"/></li>
            <li onclick="openLog()"><img src="src/icon-03.png"/></li>
            <li onclick="openThemes()"><img src="src/icon-04.png"/></li>
            <li onclick="openSearch()"><img src="src/icon-05.png"/></li>
            <li onclick="openAbout()"><img src="src/icon-06.png"/></li>
            <li id="btn_close" onclick="closeMenu()"><img src="src/close-icon.png"/></li>
        </ul>
    </nav>
    <nav id="z-index-nav">
        <ul>
            <li onmouseover="menuWarning()" onmouseout="menuWarningOut()"><img id="z-index-nav-2" src="src/z-index-nav.png"/></li>
        </ul>
    </nav>
</div>
</body>
</html>

如何让JS在Chrome扩展中正确运行？

最佳答案

不能在 html 中使用 javascript。您需要在脚本文件中添加监听器。

参见https://developer.chrome.com/extensions/contentSecurityPolicy

关于JavaScript 无法在 Chrome 扩展程序中运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32061487/

25 4 0
文章推荐： javascript - 启动 Angular 服务器时出错
文章推荐： javascript - Node.js 括号语法
文章推荐： javascript - $_POST ["g-recaptcha-response"]，它存储在验证码 div 元素中的什么位置？如何使用 AJAX 处理 Recaptcha？
文章推荐： javascript - 我可以创建一个仅在多次点击后才有效的链接吗
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com