适用于Chrome扩展程序的HTML/Javascript不太适用

Question

适用于Chrome扩展程序的HTML/Javascript不太适用

1 html javascript google-chrome-extension

所以我正在尝试进行chrome扩展.当我将它作为普通的html页面运行时,我的代码工作正常,但是当我使用浏览器操作时,我的启用/禁用按钮不起作用.当我按下启用(它应该切换到禁用)时,它什么都不做.想知道是否有一些我不知道的权限或其他东西.我没有在我的json页面中设置任何权限,但我认为这不是问题.想知道你们是否可以看看我错过了什么.这是我的代码.

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="nosidebar.css">
        <script type="text/javascript">
            function enableBtn(){
                document.getElementById("btn1").style.display = "none";
                document.getElementById("btn2").style.display = "";
                return false;
            }

            function disableBtn(){
                document.getElementById("btn2").style.display = "none";
                document.getElementById("btn1").style.display = "";
                return false;
            }

        </script>
    </head>
    <body>
    <div id="button">
        <a href="javascript:void(0)" class="myButton1" title="Click to disable" id="btn1" style="display:;" onclick="enableBtn(); return false;">Enabled</a>
        <a href="javascript:void(0)" class="myButton2" title="Click to enable" id="btn2" style="display:none;" onclick="disableBtn(); return false;">Disabled</a>
    </div>
    <div id="text">
        You must refresh the page for the change to take effect.
    </div>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

感谢@duskwuff,我解决了我的问题.我创建了一个单独的js文件并使用了以下代码.

function enableBtn(){
    document.getElementById("btn1").style.display = "none";
    document.getElementById("btn2").style.display = "";
    return false;
}

function disableBtn(){
    document.getElementById("btn2").style.display = "none";
    document.getElementById("btn1").style.display = "";
    return false;
}

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById("btn1").addEventListener("click", enableBtn);
    document.getElementById("btn2").addEventListener("click", disableBtn);
});

Run Code Online (Sandbox Code Playgroud)

Answer 1

dus*_*uff 5

用作Google Chrome扩展程序一部分的HTML页面始终具有内容安全策略集,该策略集禁止在属性(例如onclick)和内联<script>标记中使用内联脚本.您需要在单独的Javascript文件中定义这些脚本,并在该脚本中绑定事件处理程序,例如

<script src="nosidebar.js"></script>

Run Code Online (Sandbox Code Playgroud)

并在该文件中:

function enableBtn() { ... }
function disableBtn() { ... }

document.getElementById("btn1").addEventListener("click", enableBtn);
document.getElementById("btn2").addEventListener("click", disableBtn);

Run Code Online (Sandbox Code Playgroud)

有关内容安全政策及其与Chrome扩展程序相关的更多信息,请参阅:

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

归档时间：	10 年，9 月前
查看次数：	112 次
最近记录：	10 年，9 月前