Chrome扩展:访问DOM的弹出.html和让jQuery工作

Chrome Extension: accessing the DOM of the popup.html AND getting jQuery to work

本文关键字：html 和让 jQuery 工作 扩展 访问 DOM Chrome      更新时间：2023-09-26

我正在尝试写一个Chrome扩展，但我遇到了两个问题(请记住，我是一个绝对的初学者，当它涉及到构建Chrome扩展):

  1. 我想访问的popup.html文件的DOM(这是我的扩展的基础)。我试过直接在pop .html内使用脚本，但我从Chrome得到警告说，内联脚本是不安全的。我尝试过以同样的方式使用外部文件，这也不起作用。我也试过把代码在后台脚本文件以及内容脚本文件。

  2. 其次，我想使用jQuery来访问我的popup.html页面，它似乎不工作。

这是我的舱单。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);

我真的很感激这方面的一些帮助，以及一个解释，在哪里适当的地方将是把代码访问的弹出窗口。html页面的DOM。

1)使用相同的脚本作为背景和弹出脚本几乎总是一个坏主意，除非它是一个通用的实用程序库。别把它们弄混了。

2)你的JS在任何<body>被构造之前被执行。您应该将它包装在某个DOM就绪事件中。由于您使用的是jQuery，因此可以这样做:

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

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

4) . .并查看控制台和弹出的错误，右键单击浏览器操作按钮，选择"检查弹出"。

相关文章：