Question

我正在尝试编写Chrome扩展程序，但我遇到了两个问题（请记住，在构建Chrome扩展程序时，我绝对是初学者）：

我想访问popup.html文件的DOM（这是我的扩展的基础）。我尝试使用popup.html内部的脚本直接执行此操作，但我收到Chrome的警告说内联脚本不安全。我尝试以相同的方式使用外部文件，但也不起作用。我还尝试将代码放在后台脚本文件和内容脚本文件中。
其次，我想使用jQuery来访问我的popup.html页面，但它似乎没有用。

这是我的manifest.json文件：

{
    "name": "Test",
    "version": "1",
    "manifest_version": 2,
    "browser_action":
        {
            "default_icon": "icon.png",
            "default_title": "Testing.",
            "default_popup": "popup.html"
        },

    "background":
        {
            "scripts": ["jquery.js", "background.js"],
            "persistent": false             
        },

    "content_scripts": 
        [
            {
              "matches": ["http://*/*", "https://*/*"],
               "js": ["content.js"]                 
            }
        ]       
}

这是我的popup.html文件：

<!DOCTYPE HTML>
  <html>
    <head>
     <link type="text/stylesheet" rel="stylesheet" href="style.css"/>
      <script src="jquery.js" type="text/javascript"></script>
       <script type="text/javascript" src="background.js"></script>
    </head> 
    <body>
      <div id="container">
        <div id="top_bar"> NAV BAR</div>    
      </div>          
    </body>
  </html>

为了测试所有这些，我一直在尝试访问div导航栏并只显示其内容，但警报始终显示null。使用jQuery时，警报甚至没有出现。

这是我使用的JavaScript：

var div = document.getElementById("top_bar");
alert(div.innerHTML);

我真的很感激这方面的一些帮助，以及关于在哪里放置代码以访问popup.html页面的DOM的适当位置的解释。

Answer 1

1）使用相同的脚本作为后台和弹出脚本几乎总是一个坏主意，除非它是一个通用的实用程序库。不要混淆它们。

2）在构造任何<body>之前，你的JS被执行。你应该把它包装在一些DOM ready事件中。由于您正在使用jQuery，因此可以：

$(document).ready(function(){
  var div = document.getElementById("top_bar");
  alert(div.innerHTML);
});

3）不要在弹出窗口中使用警报。它可以使弹出窗口失去焦点，这将导致它被破坏。对于调试，请使用标准console.log()工具。

4）..要查看弹出窗口中的控制台和错误，请右键单击您拥有的浏览器操作按钮，然后选择＆＃34;检查弹出窗口＆＃34;。

Chrome扩展程序：访问popup.html的DOM并让jQuery正常工作

1 个答案: