Question

因此，当我按下提交按钮时，我正在尝试创建一个运行脚本的扩展程序。由于Google Chrome扩展程序出于安全原因无法直接在HTML中使用脚本，因此我需要一个外部脚本。如何使用提交按钮从外部脚本调用函数？

这是我到目前为止所尝试的：

这是popup.html：

<html>
    <head>
        <!--css styling removed from here-->
        <script src="popup.js"></script> 
    </head>
    <body>
        <!--html page is working fine, only the button is not-->
        <input type="submit" value="Submit" onclick="convert();">
        <p id="p2">Value</p>
    </body>
</html>

（我也试过打电话 popup.convert(); ，但这也不起作用）

这是popup.js：

function convert(){
    document.getElementById("p2").innerHTML = "Hello!";
}

我正在尝试更改扩展程序弹出窗口中的p元素，而不是网页。

提前致谢！

编辑：有人建议我的问题与此重复：onClick within Chrome Extension not working

这并没有真正帮助，虽然它确实给了我https://developer.chrome.com/extensions/contentSecurityPolicy#JSExecution的链接，这对我来说是半帮助的。

另一个问题解决方案的问题在于它不是一个按钮而是链接。（感谢您指点我的话题！）

Answer 1

HTML是标记语言，仅包含标记：

<input id="convert-submit" type="submit" value="Submit">

加载弹出文档正文后，脚本应将事件附加到元素上（您在<HEAD>中引用脚本，以便在<BODY>尚未解析时执行该脚本还）：

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("convert-submit").addEventListener("click", convert);
});

Chrome扩展程序：提交按钮以激活脚本

1 个答案: