Question

我一直在创建一个chrome扩展程序，将我的新标签页分成2个框，这样我就可以尝试加载2个不同的网址。现在我开始简单，但我不能让它们按预期加载。这是代码：

Background.html

<!DOCTYPE html>
<html> 
    <head>   
        <title>2 Pages</title>
    </head>     
    <frameset cols="*,*">
        <frame src="left.html" name="left">
        <frame src="right.html" name="right">
    </frameset>     
    <script type="text/javascript" src="script.js"></script>    
</html>

左右

<!DOCTYPE html>
<html>  
    <body>   
        <input type="button" value="Load new document" id="loader">
    </body> 
</html>

的script.js

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("loader").addEventListener.("click", loadUrl);
});

function loadUrl(){
    window.location = 'http://www.w3schools.com';
    return false;
}

我尝试在帧之前和之后加载js，也在每个帧内加载。当我点击输入按钮时，没有任何反应。我检查了页面，它显示没有事件监听器存在，并且控制台中没有错误。但是，如果我尝试删除frameset并尝试仅使用一个按钮加载页面，则会收到Uncaught SyntaxError: Unexpected token (第2行的script.js错误消息。有什么我想念的吗？感谢。

Answer 1

将此脚本从Bakcground.html移至Left@Right.html

<script type="text/javascript" src="script.js"></script>

然后在script.js中删除“。”点击之前

document.getElementById("loader").addEventListener.("click", loadUrl);

上面的行应该是

document.getElementById("loader").addEventListener("click", loadUrl);

Answer 2

在manifest.json文件中，您应该添加一个键，指示何时运行.js脚本。

你应该把它放在＆＃34; content_scripts＆＃34;如下：

{
...
    "content_scripts": [{
        "run_at": "document_end",
...

＆＃34; document_end＆＃34;表示您的代码应在加载当前选项卡的文档后运行。

Chrome扩展程序未加载EventListener

2 个答案: